vue中常见的指令

v-text //把指定的数据渲染到指令所在的节点只能渲染纯文本   类似于innerText 
v-html //把指定的数据渲染到指令所在的节点，可以渲染html的结构， innerHTML
v-on //给元素绑定事件
v-if  // 满足条件的话，元素显示
v-show  //满足条件的话元素显示 
v-cloak  //解决差值表达式的闪烁问题

• v-html和v-text的区别？
  都可以用来进行数据渲染，但是v-html可以解析html的元素，v-text只能渲染纯文本

• v-if和v-shou的区别？
  当条件为真的时候没有区别，当条件为假，v-if是通过删除节点或者添加节点来控制层的显示或者隐藏，v-show通过设置css样式来控制层的显示或者隐藏。

v-on指令的使用
v-on:事件名 = “要执行的逻辑或者调用的方法”

• v-on指令用来绑定事件 后面直接跟简单的表达式

 <p>
   {{num}}
 </p>
 <button class="btn btn-danger" v-on:click="num++">num++</button>

• v-on指令提供了一个缩写 @

v-bind绑定属性
v-bind:属性名=“直接使用data中的变量值”

• 直接绑定属性的值

v-bind:class="name"

data:{
    name: "box1"
}

-v-bind:class="{box:表达式}" 如果表达式的结果为真显示box属性，否则就不显示box属性

• v-bind:style="{属性名:属性值}"
• v-bind 的可以简写为 “:”

v-model指令
v-model指令可以对数据进行双向绑定的操作，针对表单元素， 文本框，下拉菜单，单选框，复选框 。自动给这个表单元素的value进行绑定

双向绑定: data中数据发生改变，页面渲染数据发生改变， 页面发生改变影响data中的数据

v-model一般可以用到表单中进行元素的操作完成一个简单的计算器的操作