≪インスタンス｜Instance｜emdw≫

  
  
  


  

    
title : {{title}}
    
url : {{url}}
    
{{info()}}
  
  
    var vm = new Vue({
      el: '#vue_data',
      data: {
        title: "Vue.js",
        url: "https://cn.vuejs.org"
      },
      methods: {
        info: function() {
          return  this.title + " -     ！";
        }
      }
    })
  

1、各VueアプリケーションはVueを実例化して実現する必要がある

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

2、elパラメータ
上記の例でのidはvue_data、div要素で:

意味着所有的改动均在这个id为vau_data的div中，外部不受影响。

3、定义数据对象

data用于定义属性，在上述实例中有2个属性，分别为：title、url。

methods用于定义函数，可以通过return来返回函数值。

{{ }}用于输出对象属性和函数返回值。

---

当一个Vue实例创建时，Vue的响应系统加入了data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也会产生相应的变化。

  
  
  


  

    
title : {{title}}
    
url : {{url}}
  
  
    //    
    var data = {title: "Vue.js",url: "https://cn.vuejs.org"}
    var vm = new Vue({
      el: '#vue_data',
      data: data
    })
		
    //            
    vm.title = "spring";
    document.write(data.title + "<br>");
		
    //  
    data.url = "https://spring.io";
    document.write(vm.url);
  

Vueはまた、ユーザ定義の属性とプレフィックス$で区別されるインスタンス属性と方法を提供する.

document.write(vm.$data === data) // true