Vue 实例

创建 Vue 实例

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

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

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

• el:
  • 类型：string | HTMLElement
  • 作用：决定之后 Vue 实例会管理哪一个 DOM。
• data:
  • 类型：Object | Function （组件当中 data 必须是一个函数）
  • 作用：Vue 实例对应的数据对象。
• methods:
  • 类型：{ [key: string]: Function }
  • 作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用。

模板或元素

每个 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++;
        }
    }
})