What is Vue.js?

Vue.js lets you extend HTML with HTML attributes called directives, Vue.js directives offers functionality to HTML applications, Vue.js provides built-in directives and user-defined directives

Vue.js Directives

Vue.js uses double braces {{ }} as place-holders for data.

Vue.js directives are HTML attributes with the prefix v-

Vue Example

In the example below, a new Vue object is created with new Vue().

The property el: binds the new Vue object to the HTML element with id="app".

Example

<div id="app">
<h1>{{ message }}</h1>
</div>

<script>

var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

</script>

Vue.js Binding

When a Vue object is bound to an HTML element, the HTML element will change when the Vue object changes:

Example

<div id="app">
{{ message }}
</div>

<script>

var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

function myFunction() {
    myObject.message = "John Doe";
}

</script>

Vue.js Two-Way Binding

The v-model directive binds the value of HTML elements to application data.

This is called two-way binding:

Example

<div id="app">
  <p>{{ message }}</p>
  <p><input v-model="message"></p>
</div>

<script>

var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

</script>

Vue.js Loop Binding

Using the v-for directive to bind an array of Vue objects to an "array" of HTML element:

Example

<div id="app">
 <ul>
   <li v-for="x in todos">
   {{ x.text }}
   </li>
  </ul>
</div>

<script>

myObject =new Vue({
    el: '#app',
    data: {
    todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue.js' },
        { text: 'Build Something Awesome' }
        ]
    }
})
</script>