基于 Laravel 的 Vue.js 中文学习教程 —— Vue实例

1、构造器

每一个Vue.js应用都是通过使用Vue构造器方法创建一个Vue根实例启动:

var vm = new Vue({
    // options
})

Vue实例实质上就是MVVM模式(Model-View-ViewModel,关于MVC、MVP和MVVM之间的区别可参考阮一峰这篇博客:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html)中定义的ViewModel,从此以后,vm这个变量会贯穿整个文档教程。

MVVM模式

当你实例化一个Vue实例的时候,需要传递选项对象,该对象包含了数据、模板、要挂载的元素、方法、生命周期回调等,完整的选项列表请参考API文档

Vue实例可以通过预定义选项进行扩展,从而创建可复用的组件构造器:

var MyComponent = Vue.extend({
  // extension options
})

// all instances of `MyComponent` are created with
// the pre-defined extension options
var myComponentInstance = new MyComponent()

尽管你可以创建扩展实例,但是在大多数情况下你需要以自定义元素的方式注册组件构造器,然后在模板中对它们进行组合。我们会在后续章节讨论组件系统的细节,现在,你只需要知道所有的Vue.js组件都是继承自Vue实例即可。

2、属性和方法

每个Vue实例都会代理其data对象中的所有属性:

var data = { a: 1 }
var vm = new Vue({
    data: data
})

vm.a === data.a // -> true

// setting the property also affects original data
vm.a = 2
data.a // -> 2

// ... and vice-versa
data.a = 3
vm.a // -> 3

需要注意的是只有代理属性是反应式的,如果在实例创建之后添加一个新的属性到实例上,将不会触发任何视图更新。关于这一点我们将在后续反应系统中讨论。

除了数据属性之外,Vue实例还提供了许多有用的实例属性和方法,这些属性和方法都以$开头以便和代理数据属性进行区分。例如:

var data = { a: 1 }
var vm = new Vue({
    el: '#example',
    data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch is an instance method
vm.$watch('a', function (newVal, oldVal) {
    // this callback will be called when `vm.a` changes
})

完整的Vue实例属性和方法请参考API文档

3、实例生命周期

每个Vue实例在创建时都会经历一系列实例化步骤,例如,需要设置数据观察、编译模板、以及创建必要的数据绑定。在这个过程中,还会调用生命周期钩子,从而方便我们执行自定义逻辑,例如,created钩子会在实例创建后调用:

var vm = new Vue({
    data: {
        a: 1
    },
    created: function () {
        // `this` points to the vm instance
        console.log('a is: ' + this.a)
    }
})
// -> "a is: 1"

还有一些钩子会在实例生命周期的不同阶段调用,例如compiledreadydestroyed,所有被调用的生命周期钩子通过this指向调用它的Vue实例,一些用户可能会疑惑在Vue.js的世界中有没有“控制器”的概念,答案是没有。组件的自定义逻辑会被分割到这些生命周期钩子中。

4、生命周期图示

下面是Vue实例生命周期的图示,你现在不需要了解里面的所有东西,但是这张表在后续学习中将很有用。

vue lifecycle

学院君

学院君 has written 548 articles

资深PHP工程师,Laravel学院院长