Vue实例和生命周期

创建一个Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始:


var vm = new Vue({//选项
})

数据与方法

当一个Vue实例被创建时,它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这个属性的值发生变化时,视图将产生"响应",即匹配更新后的值。


//我们的数据对象
var data = {a: 1}//该数据对象加入到vue实例中
var vm = new Vue({data: data
})//获得这个实例上的属性
//返回源数据中对应的字段
vm.data == data.a // => true//设置属性也会影响
vm.a = 2
data.a //2

值得注意的是只有当实例被创建时data中存在的属性才是响应式的。

除了数据属性,Vue实例还暴露一些有用的实例属性和方法,他们都有$前缀,以便与用户定义的属性区分开来。


var data = {a: 1}
var vm = new Vue({el: '#example',data: data
})vm.$data === data // true
vm.$el === document.getElementById('example') // truevm.$watch('a', function(newValue, oldValue){//这个回调将在vm.a改变后调用
})

实例生命周期钩子

created()可以用来在一个实例被创建之后执行代码。

生命周期钩子的this上下文指向调用它的Vue实例。

关于生命周期的可以接我另外一篇文章:https://segmentfault.com/a/11...

来源:https://segmentfault.com/a/1190000016836774

转载于:https://www.cnblogs.com/qixidi/p/10126291.html

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.