4.Vue.js- start

Vue.js start

Each Vue applications need to achieve by instantiating Vue.

Syntax is as follows:

Vue new new VM = var ({ 
  // Options 
})

 

Let's look at what needs by example at Vue constructor:

<div ID = "vue_det"> 
    <h1 of> Site: {{Site}} </ h1 of> 
    <h1 of> URL: {{URL}} </ h1 of> 
    <h1 of> {{Details ()}} </ h1 of> 
</ div> 
<Script type = "text / JavaScript"> 
    var Vue new new VM = ({ 
        EL: '#vue_det', 
        Data: { 
            Site: "novice tutorial", 
            URL: "www.runoob.com", 
            ALEXA: "10000" 
        }, 
        Methods: { 
            Details: function () { 
                return this.site + "- not only learning technology, it is a dream!"; 
            } 
        } 
    }) 
</ Script>

 

There can be seen a parameter el Vue constructor, which is a DOM element id. In the example above, the id of vue_det, the div element:

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

This means that we are going all the changes within the above specified div, external div is not affected.

Next we look at how to define data objects.

data for defining attributes, example has three attributes are: site, url, alexa.

methods of defining the function, the function may return values ​​return.

{{}} For outputting object attributes 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 is added all the properties which can be found in the data object to the Vue responsive system. When the values ​​of these property changes, html view will also produce a corresponding change.

<div ID = "vue_det"> 
    <h1 of> Site: {{Site}} </ h1 of> 
    <h1 of> URL: {{URL}} </ h1 of> 
    <h1 of> Alexa: {{ALEXA}} </ h1 of> 
</ div> 
<Script type = "text / JavaScript"> 
// our data object 
var data = {site: "novice tutorial", URL: "www.runoob.com", ALEXA: 10000} 
var = new new VM Vue ({ 
    EL: '#vue_det', 
    Data: Data 
}) 
// they refer to the same object! document.write (vm.site === data.site) to true // 
document.write ( "<br>") 
// set properties will affect the original data 
vm.site = "Runoob" 
document.write (Data. + Site "<br>") // Runoob 
// ...... vice versa 
data.alexa = 1234 
the Document.

 

In addition to data attributes, Vue also provides some examples of useful methods and instance attributes. They have a $ prefix to distinguish the area of ​​the user-defined attribute. E.g:

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
document.write(vm.$data === data) // true
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>