Getting Started with Vue.js

Every Vue application needs to start by instantiating Vue.

The syntax is as follows:

var vm = new Vue({
  // options
})

Let's look at an example to see what needs to be included in the Vue constructor:

Example

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "tutorialpro.org",
            url: "www.tutorialpro.org",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return this.site + " - Learning is not just about technology, it's about dreams!";
            }
        }
    })
</script>

Click the "Try it Yourself" button to see the live example.

You can see that there is an el parameter in the Vue constructor, which is the id of the DOM element. In the above example, the id is vue_det, within the div element:

<div id="vue_det"></div>

This means that all subsequent changes will be within the specified div, and will not affect the outside.

Next, let's see how to define the data object.

data is used to define properties. There are three properties in the example: site, url, and alexa.

methods is used to define functions, which can return values using return.

{{ }} is used to output object properties and function return values.

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

When a Vue instance is created, it adds all the properties found in its data object to Vue's reactive system. When the values of these properties change, the HTML view will also update accordingly.

Example

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// Our data object
var data = { site: "tutorialpro.org", url: "www.tutorialpro.org", alexa: 10000 }
var vm = new Vue({
    el: '#vue_det',
    data: data
})
// They reference the same object!
document.write(vm.site === data.site) // true
document.write("<br>")
// Setting properties also affects the original data
vm.site = "tutorialpro"
document.write(data.site + "<br>") // tutorialpro

// … and vice versa
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>

In addition to data properties, Vue instances provide some useful instance properties and methods. They are prefixed with $ to differentiate them from user-defined properties. For example:

Example

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// Our data object
var data = { site: "tutorialpro.org", url: "www.tutorialpro.org", alexa: 10000 }
var vm = new Vue({
    el: '#vue_det',
    data: data
})

document.write(vm.$data === data) // true
document.write("<br>")
</script>

document.write(vm.$el === document.getElementById('vue_det')) // true </script>