data 选项

作用

• 用于存储 Vue 实例需要使用的数据，值为对象类型。

var vm = new Vue({
el: '#app',
data: {
  title: '标题文本',
}
});

• data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问。

var vm = new Vue({
el: '#app',
data: {
  title: '标题文本',
}
});
console.log(vm.$data.title);
console.log(vm.title); // 更常用

输出结果

• data 中的数据可以直接在视图中通过插值表达式访问。

<div id="app">
    <p>{{ title }}</p>
</div>

• data 中的数据为响应式数据，在发生改变时，视图会自动更新。

• data 中存在数组时，索引操作与 length 操作无法自动更新视图，这时可以借助 Vue.set() 方法替代操作。

使用Vue.set() 方法操作更新数组某一项或者给数组使用splice方法、concat方法赋值

1. splice方法修改数组，可以触发视图更新

this.array.splice(indexOfItem, 1, newElement)

1. 数组赋值为新数组，可以触发视图更新

this.array = this.array.concat(...)