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 实例。
示例代码:

var app_method = new Vue({ el:'#app-method', methods:{ click:function () { alert(this.getMessage()) }, getMessage:function () { return 'hello chain' } } })

点击按钮后,结果如下:


Vue学习笔记入门篇——数据及DOM_第1张图片

watch

类型

{ [key: string]: string | Function | Object }

详细

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
示例代码:

First Name:

Last Name:

{{fullname}}

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 } } })

在输入框内输入内容,便可看到如下结果:


Vue学习笔记入门篇——数据及DOM_第2张图片

computed

类型

{ [key: string]: Function | { get: Function, set: Function } }

详细

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。
示例代码:

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

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的话,代码如下:

First Name:

Last Name:

{{fullname}}

var app_computed_watch = new Vue({ el:'#app-computed-watch', data:{ firstname:'', lastname:'' }, computed:{ fullname:function () { return this.firstname + ' ' + this.lastname } } })

运行结果如下:


Vue学习笔记入门篇——数据及DOM_第3张图片

在这种场合下,这种写法是不是更好呢?答案是肯定的。

DOM

el

类型

string | HTMLElement

限制

只在由 new 创建的实例中遵守。

详细

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

在实例挂载之后, 元素可以用 vm.$el 访问。

如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。

template

类型

string

详细

一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发 slot。

如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。
例如:

Vue.component('child-component', {
  template: '
Child
', data: function () { return { someChildProperty: true } } })

原创博文,转载请注明出处
上一节:Vue学习笔记入门篇——安装及常用指令介绍
返回目录

你可能感兴趣的:(Vue学习笔记入门篇——数据及DOM)