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

最新推荐文章于 2022-11-15 11:22:51 发布

原创最新推荐文章于 2022-11-15 11:22:51 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #Vue实例 #数据绑定

Vue.js 专栏收录该内容

39 篇文章

订阅专栏

本文深入讲解Vue.js实例的创建过程，包括如何使用构造函数创建Vue根实例，详解el选项的作用及使用方法，以及data选项的响应式原理。通过实例演示data属性如何与Vue实例双向绑定，实现数据的实时更新。

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
}