Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

What is Vue.js?


Vue

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>

Try it Yourself »


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>

Try it Yourself »


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>

Try it Yourself »


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>

Try it Yourself »