Vue.js 起步

创建一个 Vue 实例:

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

虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

当创建一个 Vue 实例时,你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考,你也可以在 API 文档中浏览完整的选项列表。

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。

通过下面的一个登录页面我们来看看需要那些内容:

Vue.js 起步

可以看到分为: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 实例

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。

Vue.js 起步