Vue学习笔记入门篇——数据及DOM
本文为转载，原文：Vue学习笔记入门篇——数据及DOM
数据
data
类型
Object | Function
详细
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。
实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、 API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。
当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
示例代码：
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // -> 1
vm.$data === data // -> true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
method
类型:
{ [key: string]: Function }
详细
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
示例代码：
<div id="app-method">
<button @click="click">click me</button>
</div>
var app_method = new Vue({
el:'#app-method',
methods:{
click:function () {
alert(this.getMessage())
},
getMessage:function () {
return 'hello chain'
}
}
})
点击按钮后，结果如下：
watch
类型
{ [key: string]: string | Function | Object }
详细
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
示例代码：
<div id="app-watch">
<p>First Name: <input type="text" v-model="firstname"></p>
<p>Last Name: <input type="text" v-model="lastname"></p>
<p>{{fullname}}</p>
</div>
var app_watch = new Vue({
el:'#app-watch',
data:{
firstname:'',
lastname:'',
fullname:''
},
watch:{
firstname:function (newVal, oldVal) {
this.fullname = newVal + ' ' + this.lastname
},
lastname:function (newVal, oldVal) {
this.fullname = this.firstname + ' ' + newVal
}
}
})
在输入框内输入内容，便可看到如下结果：
computed
类型
{ [key: string]: Function | { get: Function, set: Function } }
详细
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。
示例代码：
<div id="app-computed">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var app_computed = new Vue({
el:'#app-computed',
data:{
message:'hello chain'
},
computed:{
reversedMessage:function () {
return this.message.split('').reverse().join('')
}
}
})
运行结果如下图：
computed与methods对比
我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
computed与watch对比
Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。
例如之前讲到watch的时候的那个例子，如果换成computed的话，代码如下：
<div id="app-computed-watch">
<p>First Name: <input type="text" v-model="firstname"></p>
<p>Last Name: <input type="text" v-model="lastname"></p>
<p>{{fullname}}</p>
</div>
var app_computed_watch = new Vue({
el:'#app-computed-watch',
data:{
firstname:'',
lastname:''
},
computed:{
fullname:function () {
return this.firstname + ' ' + this.lastname
}
}
})
运行结果如下:
在这种场合下，这种写法是不是更好呢？答案是肯定的。
DOM
el
类型
string | HTMLElement
限制
只在由 new 创建的实例中遵守。
详细
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后， 元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
template
类型
string
详细
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。
如果值以 # 开始，则它用作选项符，将使用匹配元素的 innerHTML 作为模板。
例如：
Vue.component('child-component', {
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
})
完
原创博文，转载请注明出处
上一节：Vue学习笔记入门篇——安装及常用指令介绍
返回目录
