Vue.js is a open source javascript framework and combines the power of Angular and React.

Vue.js is built by Evan who actually worked in Google on Angular framework. As you can call Vue as a rising star in github(https://github.com/vuejs/vue) which makes the second most popular after React.

Why Vue?

1. File size is small which helps to load fast.
2. Run-time performance is better than Angular and React.
3. It is feature rich(Components,Directives,Events,Filters, Forms, Dynamic styles, Watchers etc
4. It is better than Angular and React Ah! yes for more information on framework comparisons and why Vue is better go through this link (https://vuejs.org/v2/guide/comparison.html)

Now let us start with the simple example.

Step 1:

Download Vue.js from (https://vuejs.org/v2/guide/installation.html).

Or

Use any CDN we will use (https://unpkg.com/vue@2.4.2)

Step 2 :

Create an html file lets say myfirstapp.html add this below code to this file.

<script src="https://unpkg.com/vue@2.4.2"></script>

<div id="firstapp">
{{title}}
</div>

Step  3:

Now we will create a Vue instance in this script.

Add this below script to the html file.

<script>

new Vue({
el:"#firstapp", // el is like a  selector
data:{  // data is an object which takes all the data you want to pass to the view!

title:'Hello Vue 2' // Access this title in your view!
} });

</script>

 

Step 4 :

Now you can just open html file in browser it displays Hello Vue 2 BOOM! you just created your first simple app in Vue 2.

Now let us extend this app to understand about how data flows in vue.

<script src="https://unpkg.com/vue@2.4.2"></script>


<div id="firstapp">

<input type="text" v-on:input="changeTitle">

{{title}}

</div>

<script>
new Vue({
el:"#firstapp",

data:{
title:'Hello Vue 2'
},

methods:{
changeTitle:function(e){ //changeTitle method is called everytime input changes
this.title=e.target.value // This is very interesting how title is accessible in this method? Internally Vue puts all the properties to the outside instance so that you can access using this!
}
} 
});

</script>

Example  is in fiddle as well (https://jsfiddle.net/tk1h7p2q/2/)

Wrapping up:

Vue js latest version is 2.4.2 and it is evolving and no doubt a very popular framework and competing with  Angular and React. Hope this article helps you to kickstart! Vue.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.