目录
实例
//批注:一个应用一个实例
var vm = new Vue({
// 选项
})
选项对象
数据对象
//数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
创建
var data = { a: 1 }
注入
var vm = new Vue({
data: data
})
修改(不推荐)
vm.a = "hello"
冻结
Object.freeze(data)
属性暴露
Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来.
生命周期
过程
设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等
钩子
给用户在不同阶段添加自己的代码的机会
创建阶段
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
触发阶段
更新阶段
销毁阶段
箭头函数
不要在选项属性或回调上使用箭头函数,因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例.
图示
组件系统