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学习笔记入门篇——安装及常用指令介绍
返回目录