【 Vue 】—— Vue 实例

创建 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

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

在构造函数中传入一个对象，并且在对象中声明各种 Vue 需要的数据和方法，包括：

• el
• data
• methods

等等

接下来我们一一介绍

模板或元素

每个 Vue 实例都需要关联一段 Html 模板，Vue 会基于此模板进行视图渲染

我们可以通过 el 属性来指定。

例如一段 html 模板：

<div id="app">
    
</div>

然后创建 Vue 实例，关联这个 div

var vm = new Vue({
	el:"#app"
})

这样，Vue 就可以基于 id 为app的 div 元素作为模板进行渲染了。在这个 div 范围以外的部分是无法使用 vue 特性的

数据

当 Vue 实例被创建时，它会尝试获取在 data 中定义的所有属性，用于视图的渲染，并且监视 data 中的属性变化，当 data 发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})

• name 的变化会影响到input的值
• input 中输入的值，也会导致 vm 中的 name 发生改变

方法

Vue 实例中除了可以定义 data 属性，也可以定义方法，并且在 Vue 的作用范围内使用。

html:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        num: 0
    },
    methods:{
        add:function(){
            // this代表的当前vue实例
            this.num++;
        }
    }
})

生命周期钩子

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：

钩子函数

例如：created 代表在 vue 实例创建后；

我们可以在 Vue 中定义一个 created 函数，代表这个时期的构造函数：

html:

<div id="app">
    {{hello}}
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        hello: '' // hello初始化为空
    },
    created(){
        this.hello = "hello, world！ 我出生了！";
    }
})

结果：

this

我们可以看下在 vue 内部的 this 变量是谁，我们在 created 的时候，打印 this

var vm = new Vue({
    el:"#app",
    data:{
        hello: '' // hello初始化为空
    },
    created(){
        this.hello = "hello, world！ 我出生了！";
        console.log(this);
    }
})

控制台的输出：