vue学习笔记 实例（二）

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

console.log(vm.a);//2
console.log(data.a);//2

 

创建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实例。

 

 

 
标签：

相关文章