A quick look at VueJS

Ah! So you came to learn about VueJS? Well, today that's exactly what I am here to tell you about. As always I am your guy for learning about various neat and interesting libraries and frameworks. And as a disclaimer. I am in no way shape or form an expert in Vue, but I will surely be teaching you a good way to get started with it!

Anyway. What is Vue? Well, Vue is a front-end framework that lets you extend HTML with HTML attributes called directives. Before we incorporate Vue into your code, I recommend an awesome chrome extension called Vue.js devtools. It's an awesome way to check what is happening in your code anytime you would like all in the browser! Now that we know what Vue is, let's get right into implementing Vue into your code!

If you are looking to take a deep dive and use Vue in a large scale application you can easily do a quick npm install vue and you will be able to use Vue anywhere in your application.

The other way to add Vue to your project is by simply adding a CDN script tag to your main HTML page.

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

Now that we know all that, I am gonna give you guys a short rundown with the help of the 'getting started' from Vue itself! Here we will be rendering a list of todos using Vue.

HTML

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

JavaScript

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

After all of that, our webpage will look a little something like this.

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

Interestingly enough, Vue auto-updates its data as it is changed. Once your page loads, try typing into the console app4.todos.push({ text: 'Make a todo app' }). You should be able to see the new item displayed on the page.

So now that you have seen some code. Let me explain a few things here.

First things first. The first thing you might see that is different from your average HTML. This is what is called a directive!

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

This line here. Very similar to AngularJS, Vue has directives. Personally I feel that Vue directives are much simpler than those in Angular. Basically a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue, the v-for directive is used to render a list of items in an array. It very much especially reminds me of JavaScripts es6 for-of loop.

Vue has a ton more directives and other interesting ways to create components. Maybe I can tell you all about it in another blog at some point in the near future as I continue to learn about Vue myself! And there ya have it, hackers! I hope you learned at least a little something new about Vue here today! Hope to see you all in the future! Happy Coding hackers!