I've been a big fan of Angular JS for a while now, it always have been my go to frontend framework for every project that I've built, but after they changed almost everything (actually everything) in their new 2.0 release, I've lost almost all my interest in this framework.

I started looking around and testing a lot of different frameworks, and none have gave me that feeling of being productive. While working for other frameworks I really enjoyed the way that React JS manage their components and I dreamed of finding a framework that merged both the productiveness that I get with Angular with the component approach that React JS has, and I think I did found one, and it's called Vue JS.

Vue JS was inspired by several other frontend frameworks, such as AngularJS, KnockoutJS, Ractive.js and Rivets.js. They basically took the best out of each framework.

"Philosophically, the goal is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible. ..."

Getting Started

Getting started with Vue JS is actually pretty straight fordward. We'll start by adding the Vue JS script from the cloudfare CDN to our HTML file. Lets Add this line to the bottom of your HTML file:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>

After we add the Vue JS to our HTML it gets pretty simple from here, we just need to add a div element with an id, with this id is that we will tell Vue JS where our application or module is located at. For this example we'll create a div with id demo

<div id="demo"></div>

Now we just need to add a script tag below the Vue JS script tag and create a new Vue JS instance, when creating it we have to tell it what our scoped element will be passing the CSS selector to the option el:

new Vue({
  el: '#demo'
});

And voil√°! We are ready to start coding on our Vue app :)

Hello World

For this example lets only use the double-way binding, we'll be printing and edititing a value with just a few lines of code. Lets get started.

First we need a way to model and access our data, Vue JS has a data option when creating the new instance, simply pass an object or a function that returns a json object and this will be used as the data that can be accesed from the view.

Lets add a name attribute to the data object and access it from the view:

new Vue({  
  el: '#demo',

  data: {
      name: 'German Popoter'
  }
});

To print out its content we need to wrap the variable name inside 2 pairs of curly braces {{ name }} and to be able to modify the content of it with an input we have to use the directive v-model that comes with Vue, to this directive we pass the name of the variable (or model) we created inside the data option attribute, in this case will be v-model="name". Here is the example:

<div id="demo">
  {{ name }} 
  <input type="text" v-model="name">
</div>

and that's it! If we edit the input value, the name variable gets edited and updated on the DOM. Pretty cool :). I'll be continuing this series with some small Vue apps tutorial.

Happy coding folks!


Comments? Something wrong in the post? or just want to contact me? Send me a tweet to @gpopoteur on twitter.