An intro to Vue.js and why you may want to use it

An intro to Vue.js and why you may want to use it

Written by Dev Dojo on May 27th, 2015 Views Report Post

Vue.js is an awesome library for creating interactive webpages.

If you find yourself needing 2-way databinding and event driven code, you'll have to checkout Vue.js. If you're semi-familiar with Backbone, Ember, AngularJS, Polymer, or any other type of javascript front-end framework, you'll probably find Vue.js to be a breaze to work with.

Even if you don't have any experience with front-end frameworks you should still read on. Vue.js is super easy to use and understand.

Let me show you a quick code snippet on how you can add 2-way data-binding with a javascript variable and a textbox input value, here is a simple html file:


<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    
    <div id="container">
      <input type="text" id="container" placeholder="enter text" v-model="value">
      <p>{{ value }}</p>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
    <script>
      
      new Vue({
        el: '#container',
        data: {
          value: '',
        },
      });
      
    </script>
    
  </body>
</html>

So, in the code above we create a new textbox, then inside our Vue object we tell it which container or element we want to use. Then any elements inside the element can be bound with data using Vue.js. Then we tell the Vue which variables we want to make use of.

Checkout a live example of the code below:

Be sure to read more at the Vue.js website. There are so many great things you can do with this amazing library :)

Comments (0)