Vue 实例

  |   0 评论   |   0 浏览

创建 Vue 实例

开发一个 Vue 应用,首先要通过 new Vue 创建一个根 Vue 实例。通常这个实例要与 HTML 中的元素关联。

示例

 1<!DOCTYPE html>
 2<html>
 3
 4<head>
 5    <title>My first Vue app</title>
 6    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7</head>
 8
 9<body>
10    <div id="app">
11        {{ message }}
12    </div>
13
14    <script>
15        var app = new Vue({
16            el: '#app',
17            data: {
18                message: 'Hello Vue!'
19            }
20        })
21    </script>
22</body>
23
24</html>

数据和方法

使用 new Vue() 创建 Vue 实例时,需要传入一个参数对象。

这个对象最主要的属性有三个:

  • el -- element 的缩写,用来指定 HTML 元素的 id 属性值,将 Vue 实例和 HTML 元素关联起来。
  • data -- data 的值是一个对象,该对象中的所有属性(property)会被加入到 Vue 的 响应式系统 中。当这些属性的值发生变化时,对应的视图中的数据也会被更新。
  • methods - methods 的值也是一个对象,通常把用来处理事件的函数放在这个对象中。

通过 Vue 实例变量可以直接访问 data 对象和 methods 对象的属性。

示例

 1// 我们的数据对象
 2var data = { a: 1 }
 3
 4// 该对象被加入到一个 Vue 实例中
 5var vm = new Vue({
 6  data: data
 7})
 8
 9// 获得这个实例上的 property
10// 返回源数据中对应的字段
11vm.a == data.a // => true
12
13// 设置 property 也会影响到原始数据
14vm.a = 2
15data.a // => 2
16
17// ……反之亦然
18data.a = 3
19vm.a // => 3

除了用户(开发人员)传入的 datamethods 对象,Vue 实例还提供了一些有用的属性和方法。这些属性和方法以 $ 为前缀,以便跟用户定义的属性区分开来。

示例

 1var data = { a: 1 }
 2var vm = new Vue({
 3  el: '#example',
 4  data: data
 5})
 6
 7vm.$data === data // => true
 8vm.$el === document.getElementById('example') // => true
 9
10// $watch 是一个实例方法
11vm.$watch('a', function (newValue, oldValue) {
12  // 这个回调将在 `vm.a` 改变后调用
13})

生命周期

Vue 生命周期是指 Vue 实例从创建到销毁都要经历一系列的不同阶段,如下图所示:

在 Vue 实例的生命周期中,Vue 提供了一些钩子函数(如上图所示),通过这些钩子函数开发人员可以在不同的阶段添加自己的代码。

示例:利用 created 函数添加代码,让其在实例创建之后执行:

 1new Vue({
 2  data: {
 3    a: 1
 4  },
 5  created: function () {
 6    // `this` 指向 vm 实例
 7    console.log('a is: ' + this.a)
 8  }
 9})
10// => "a is: 1"

相关资料

Vue 实例