Vue.js 起步
创建一个 Vue 实例:
var vm = new Vue({ // 内容选项 })
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
当创建一个 Vue 实例时,你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考,你也可以在 API 文档中浏览完整的选项列表。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。
通过下面的一个登录页面我们来看看需要那些内容:
可以看到分为:html实列、数据、方法、样式。
Html实列就上模板 template。这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。
数据与方法
当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
data 用于定义属性,实例中有三个属性分别为:form对象。
methods 用于定义的函数,可以通过 return 来返回函数值。
v-model 用于绑定在dom上的视图实时数据。
Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。例如:
var data = { yi: 1 }
var vm = new Vue({
el: '#21yi-example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('21yi-example') // => true
// $watch 是一个实例方法
vm.$watch('yi', function (newValue, oldValue) {
// 这个回调将在 `vm.yi` 改变后调用
})
实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行:
new Vue({
data: {
yi: 10
},
created: function () {
// `this` 指向 vm 实例
console.log('yi is: ' + this.yi)
}
})
// => "yi is: 10"
也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。