Take A Look At The Vue!!

I can't wait to see how everyone "Reacts" when I show them how to enjoy the Vue.
Hopefully, readers get that joke or I'm going sound pretty dumb let's begin. So VueJS, in essence, is just like any other front-end framework for building user interfaces.
To incorporate vueJS in your code, you can do a few very convenient things. Before we get to that Vue also has it's on Vue DevTools. This like when using React is super helpful to check out whats going on in the code while on the browser. So one quick way to add Vue to your project is by adding a CDN in a script tag and placing that right in your HTML.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

The script above is recommended if you're just trying to dive into Vue and learn a bit about it. You can also NPM install this way is best if you plan on using Vue on a larger scale application.

$ npm install vue

The last way to do it is to create an entire file for it and place Vue's direct script downloaded file inside your workspace. I won't show this as the file is over ten-thousand lines and also I don't think this way is as easy as the other ones.

So let us take a look at a small 'getting started' version of the code.

HTML

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

JS

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

We would get something like

1.Learn JavaScript
2.Learn Vue
3.Build something awesome

A super cool thing about Vue is that it does a lot of auto-updates so if I were to type this

app4.todos.push({ text: 'New item' })

we would instantly see a new list item inserted in the page called 'New item'. Speaking of array methods like push, when I see

<li v-for="todo in todos">

it makes me think of javascript for loop. In Vue, the v-for is a directive used to render a list of items based on an array. When I did some research on this directive I found that it actually has a specific syntax it likes to use that being, 'todo in todos'. The plural version 'todos' points at the array your in use. The singular version 'todo' is to reference the current element from a said array.
If you have ever worked with AnularJS then you can think of Vue's directives kind of like the ones in Angular. A directive is some special token in the markup that tells the library to do something to a DOM element. In Vue.js, the concept of a directive is drastically simpler than that in Angular. A Vue.js directive can only appear in the form of a prefixed HTML attribute that takes the following format:

<element
  prefix-directiveId="[argument:] expression [| filters...]">
</element>

In my opinion writing directives like this is way easier and honestly seems a lot easier to grasp what they're being used for when reading back a line of code with them included.
Vue has a bunch more directives and cool ways of writing components. I can't wait to update you all on the neat tricks I figure out as I explore more and expand my personal perspective of Vue.