Vue常用指令

Vue常用指令总结

1. v-once

   表示元素或组件只渲染一次，后面修改的都不再进行渲染
   

2. v-text

   用于输出文本
   

3. v-html

   用于输出 html 代码
   

4. v-for

   循环（迭代数组；迭代对象中的属性；迭代数字）
   

5. v-if

   根据表达式的值的真假条件（使dom元素销毁或重建）
   

6. v-else-if

   必须和 v-if 连用
   

7. v-else

   必须和 v-if 连用
   

8. v-show

   根据表达式的真假（切换元素的 display css属性） 经常切换某个元素的显示/隐藏时，则使用 v-shou 会更加节省性能上的开销
   

9. v-hide

   隐藏内容
   

10. v-model

    实现双向数据绑定
    

11. v-bind

    动态绑定，及对页面的数据进行更改 （语法糖简写形式是：“ ：”）
    

12. v-on

    给标签绑定事件: <button @click="btnClick">按钮二</button> （语法糖简写形式是：“@”）
    

    <button @click.stop="btnClick"></button>  // 阻止冒泡
    <button @click.prevent="btnClick"></button> // 阻止默认行为
    <button @click.stop.prevent="btnClick"></button> // 字符串可以串联使用,既阻止冒泡，又阻止默认行为
    <button @click.once="btnClick"></button> // 点击时回调只会触发一次
    <form @submit.prevent></form>  // 阻止默认行为，不给出处理函数
    

13. v-cloak

    当网络较慢还在加载Vue.js，会导致页面显示出Vue源代码。可使用 v-cloak 指令来解决这一问题
    

14. v-pre

    把标签内部的元素原位输出
    

    <span v-pre>{{ this will not be compiled }}</span>   //显示的是{{ this will not be compiled }}
    <span v-pre>{{msg}}</span>  // 即使data里面定义了msg这里仍然是显示的{{msg}}