Vue指令

v-xxx的属性都称之为指令，它等于的值都是实例上面属性的值

v-if：条件渲染，根据布尔值的状态来决定是否渲染，如果没有被渲染会变成注释

v-else：如果v-if不渲染就渲染v-else，必须要紧跟着v-if

v-else-if：根据值来决定是否渲染

v-show：根据值来决定是否显示，在节点树会存在，控制的是display的值

v-if和v-show的区别：如果一个元素需要在界面当中频繁的切换显示或隐藏就用v-show，如果只是根据某个状态只是一次性决定有或没有就用v-if

v-for：遍历（<li v-for='item in 数组名'  v-bind:key='item'>{{item}}</li>）

v-text：根据状态的值当成文本插入

v-html：根据状态的值当成html插入

v-bind：自定义属性绑定，可以简写成：

<div v-bind:id='123'></div>//属性的绑定
<div :class=''></div>//class的绑定,支持数组或对象
<div :style=''></div>//style的绑定,支持数组或对象
<div v-bind:=“{id:'abc',class:'efg'}”></div>//多属性绑定

v-on:click='函数'：事件绑定，可以简写成@

事件绑定直接等于一个函数名 这个时候触发的函数就是methods当中声明的自定义函数，传递的第一个参数就是event

事件绑定的时候等于一个函数执行，函数执行如果需要得到event对象则需要手动传入一个$event

修饰符：
.stop        ->阻止冒泡
.once       ->只能触发一次
.prevent   ->阻止浏览器默认行为
.capture   ->捕获阶段执行
.self         ->只在当前点击的区域触发

v-once：单次绑定，只取第一次状态

v-pre：不需要表达式

v-model：双向绑定

text和textarea元素使用value property和input事件

checkbox和raido使用cheacked  property和ohange事件

select自段将value作为prop并将change作为事件

//实现的原理
<input :value='t'@change='handleChange'/>
<div>t is {{t}}</div>
new Vue({
     data:{t:''}
    methods:{ handleChange(ev){
           this.t=ev.tarage.value}}
   })