Vue.js--实例与数据绑定

忘是亡心i 2021-08-14 00:55 294阅读 0赞

#### Vue实例 ####

Vue.js应用的创建很简单，通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用：

var app = new Vue({ 
    	//选项
    })

变量app就代表了这个Vue实例。事实上，几乎所有的代码都是一个对象，写入Vue实例的选项内。

**el：**  
首先：必不可少的一个选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是CSS选择器，比如：

<div id="app"></div>
    <script>
        var app = new Vue({ 
            el: document.getElementById('app')//或者是 '#app'
        });
    </script>

挂载成功后，可以通过app.$el来访问该元素。

console.log(this.$el);//<div id="app"></div>

**data：**

*  类型：Object | Function
 *  限制：组件的定义只接受 function。
 *  详细：  
    Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。**对象必须是纯粹的对象 (含有零个或多个的 key/value 对)**：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。  
    一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。  
    实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<div id="app"></div>
    <script> var myData = { a : 1 }; var app = new Vue({ el: '#app', data: { myData } }); console.log(app.a);//1 //修改属性，原数据也会随之修改 app.a = 2; console.log(myData.a);//2 //反之，修改原数据，Vue属性也会修改 myData.a = 3; console.log(app.a);//3 </script>

值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性，比如：

app.b = 999;

那么对 b 的改动将不会触发任何视图的更新。

如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值（类似声明变量赋初值）。

data: { 
      newTodoText: '',
      visitCount: 0,
      hideCompletedTodos: false,
      todos: [],
      error: null
    }