vue学习笔记 实例(二)

var data = {a: 1}
var vm = new Vue({
el: '#example',
data: data,
created: function () {
// `this` 指向 vm 实例
console.log('created a is: ' + this.a);//
this.a = 2;
},
mounted: function () {
console.log('mounted a is: ' + this.a);//
}
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
vm.$watch('a', function (newVal, oldVal) {
}); console.log(vm.a);//
console.log(data.a);//

创建Vue的根实例 就是

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

选项有很多种 比如可以传入需要操作的DOM元素(挂载元素),传入data数据,模板,设置方法,生命周期钩子等等

http://cn.vuejs.org/v2/api/#选项-数据

实例上有$符号开头的一些变量,是vue实例提供的属性和方法,为了和data属性区分(因为data里的属性会直接暴露给vm变量),比如$data就是指传入的data对象(不过在实例化Vue后,传入的data被进行了改造),还有$el指的就是传入的el DOM元素,$watch可以侦听回调,另外还有一些生命周期相关的钩子函数,这些钩子函数(mounted、 updated 、destroyed)会在实例的不同生命周期被调用,完整的生命周期参考下图:

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
})

生命周期示意图:

vue学习笔记 实例(二)

另外,比较高级的用法是扩展Vue构造器,写法如下:

var MyComponent = Vue.extend({
// 扩展选项
})
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

这样做的话 就不是new Vue了,而是new 新构造器名字(),实际上所有的Vue组件都是被扩展的Vue实例。

上一篇:Vue2学习笔记:实例生命周期


下一篇:jquery 当前链接激活传递参数|div的切换显示