当前位置: 主页 > 常州移动 > 爱情是个懒东西结局:Vue学习笔记入门篇——数据及DOM

爱情是个懒东西结局:Vue学习笔记入门篇——数据及DOM

发布时间:2019-05-28内容来源:未知 点击:

数据

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

点击按钮后,结果如下:

Vue学习笔记入门篇——数据及DOM

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

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

Vue学习笔记入门篇——数据及DOM

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

运行结果如下图:

Vue学习笔记入门篇——数据及DOM

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

运行结果如下:

Vue学习笔记入门篇——数据及DOM

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

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
}
}
})
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
Here Is AD 250*250 !