Vue常用指令总结

201 阅读1分钟

Vue常用指令总结

解释:指令是带有 v- 前缀的特殊属性

作用:当表达式的值改变时,将其产生的连带影响,响应式作用于 DOM

01.v-once     表示元素或组件只渲染一次,后面修改的都不再进行渲染
02.v-text     是用于输出文本      
03.v-html     用于输出 html 代码 
04.v-for      循环(迭代数组;迭代对象中的属性;迭代数字)
05.v-if       根据表达式的值的真假条件(使dom元素销毁或重建)
06.v-else-if  必须和v-if连用
07.v-else     必须和v-if连用   
08.v-show     根据表达式的真假值(切换元素的 display CSS属性)经常切换某个元素的显示/隐藏时,则使用v-show会更加节省性能上的开销
09.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}}
 ————————————————