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>{{name}}</p>
</div>

Mustache 标签将会被替代为对应数据对象上 name属性的值。无论何时，绑定的数据对象上name属性发生了改变，插值处的内容都会更新。

3.2 数据与视图更新的123

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是可以使用 vm.object.propertyName=value或Vue.set(object, propertyName, value)方法向嵌套对象添加响应式 property。

<div id="app">
	<h1>{{obj.name}}</h1>
	<p>{{obj.msg}}</p>
</div>

var vm=new Vue({
	el:'#app',
	data:{
		obj:{
			name:'章三',
		}
	}
});
vm.obj.msg='hi';//vm.object.propertyName=value方式给Vue实例vm添加数据，不会更新视图
Vue.set(vm.obj,'msg','hi');//Vue.set(object, propertyName, value)方式给Vue实例vm添加数据，会更新视图

四、methods定义方法

methods属性用来定义方法，这些方法可以直接通过vm实例访问或者在指令表达式中使用。方法中的this自动绑定为Vue实例。

<div id="app">
   <button @click="showInfo">请单击</button>
    <p>{{msg}}</p>
</div>

var vm = new Vue({
        el:'#app',
        data:{
           msg:''
        },
        methods:{
            showInfo:function () {
                this.msg='触发了单击是阿金啊'
            }
        }
    });

五、computed计算属性

如果有一些数据需要随着其他数据变动而变动时，就需要使用computed计算属性。
通过计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

<div id="app">
    <p>总价格{{totalPrice}}</p>
    <p>单价：{{price}}</p>
    <p>数量{{num}}</p>
    <div>
        <button @click="num==0?0:num--">减少数量</button>
        <button @click="num++">增加数量</button>
    </div>
</div>

var vm=new Vue({
        el:'#app',
        data:{
            price:10,
            num:0
        },
        computed:{
            totalPrice (){
                return this.price*this.num;
            }
        }
    });

六、watch状态监听

Vue中的事件处理方法时根据用户所需自行定义的，它可以通过单击事件、键盘事件等触发条件来触发，但不能自动监听当前Vue对象的状态变化。为了解决上述问题，Vue提供了watch状态监听功能。

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

var vm=new Vue({
        el:'#app',
        data:{
            cityName:'shanghai'
        },
        watch:{
            cityName(newName,oldName){
                console.log(newName,oldName);
            }
        }
    });

七、filters过滤器

在前端页面开发中，通过数据绑定可以将data数据绑定到页面中，页面中的数据经过逻辑层处理后展示最终的结果。数据的变化除了在Vue逻辑层进行操作外，还可以通过过滤器来实现。

7.1 在插值表达式中使用过滤器

通过{{data}}语法，可以将data中的数据插入页面中，该语法就是插值表达式。在插值表达式中还可以使用过滤器来对数据进行处理，语法为{{data|filter}}。

<div id="app">
    <div>{{message|toUpcase}}</div>
</div>

 var vm=new Vue({
        el:'#app',
        data:{
            message:'helloword'
        },
        filters:{
            toUpcase(value){
                return value?value.toUpperCase():'';
            }
        }
    });

7.2 在v-bind属性绑定中使用过滤器

v-bind用于属性绑定，如v-bind:id="data"（可省略写成:id="data"）表示绑定id属性，值为data。在data后面可以加过滤器，语法为data|filter。

<div id="app">
    <div v-bind:id="dataId|formatId">hellowworld</div>
</div>

 var vm=new Vue({
        el:'#app',
        data:{
            dataId:'dff1'
        },
        filters:{
            formatId(value){
                return value?value.charAt(1)+value.indexOf('d'):'';
            }
        }
    });