使用过一段时间的vue1.0,现在vue已经更新了很多版本了,语法在很多地方也有了变化。在此记录一下重新学习的过程以及对vue的一些自己的理解。vue的介绍就直接连接到官网了,官网介绍很详细了
1. 构造函数
在使用之前我们首先需要构建vue实例
var vm = new Vue({ })
以上代码是通过 new 构建了一个vue实例,构造函数中是一个对象,上面代码我用了一个空的对象,对象中可以包含 数据、模板、挂载元素、方法、生命周期钩子等选项。
【我们可以通过extend对vue构造器进行扩展】
var MyComponent = Vue.extend({ // 扩展选项})// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建var myComponentInstance = new MyComponent()
以上代码中通过extend进行了vue构造函数的扩展,我们使用 MyComponent 生成的每一个实例都将拥有扩展中的属性。
2. 属性与方法
我们上面在创建实例的时候传入的是一个空的对象,实际使用中这个对象中是有属性的。
let data = { name: "blue"}let vm = new Vue({ data})vm.name === data.name; //truedata.name = "Crazy";vm.name; // Crazyvm.name = "Pink";data.name; //Pink
上面代码使用的是ES6的语法,应该能懂。上面代码中Vue实例 【vm】在创建的过程中加入了一个data属性,我们可以通过【vm】实例访问到 name 属性,说明vue实例会对data对象中的每一个属性进行【代理】(也就是托管),所以我们不管是更改【对象data】还是更改【实例vm】属性都会同步name属性。
let data = { name: "blue"}let vm = new Vue({ data})vm.$data;
我们可以通过上面一种方式访问到整个实例的【data属性】对象,还有一些暴露在实例中的属性和方法,他们都是用$为前缀。这儿就不多说了参考手册里有详细的说明。
3. Vue实例的生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 【生命周期钩子】(一些实例方法,用于生命周期中我们更愿意叫他们为钩子函数) ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:
var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) }})// -> "a is: 1"
也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。
4. Vue生命周期图示
下面这张图是官方给出的生命周期图示,我只是把它翻译成中文了