3. Vue实例简介

一、 创建Vue实例

每个Vue应用都是通过Vue构造器创建新的Vue实例开始，Vue实例的创建是通过new关键字实例化Vue({})构造函数，并传入一个选项对象，具体语法如下：

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

Vue实例配置选项

选项	说明
el	唯一根标签
data	Vue实例数据对象
methods	定义Vue实例中的方法
components	定义子组件
computed	计算属性
filters	过滤器
watch	监听数据变化

二、 el唯一根标签

在创建Vue实例时，el表示唯一根标签，它会提供一个页面上已存在的DOM元素作为Vue实例的挂载目标。在实例挂载之后，元素可以用vm.$el访问。

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

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

三、data初始数据

3.1 数据对象基本创建与显示

3.1.1数据对象的创建

Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter（理解为data对象的的属性可以被Vue设置值获取值），从而让data的属性能够响应数据变化。【对象必须是纯粹的对象（含有0个多多个key/value对）】

Vue实例创建之后，可以通过vm.$data访问原始数据对象。Vue实例也代理了data对象上所有的属性，因此访问vm.name相当于访问vm.$data.name。

注意：只有当Vue实例被创建时就存在于data中的属性才是响应式的，后加入的data属性将不会触发视图的更新，如后续需要触发视图更新的属性，需要在创建实例时就设为属性值为空。

<div id="app">
	<p>{
  {name}}</p>
</div>

var vm=new Vue({
   
	el:'#app',
	data:{
   
		name:'创建Vue实例成功！'//data对象中的name属性是响应式的
	}
});

3.1.2 数据对象在视图中的显示

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

<div id="app">
	<p