Vue常用指令总结
- v-once
表示元素或组件只渲染一次,后面修改的都不再进行渲染
- v-text
用于输出文本
- v-html
用于输出 html 代码
- v-for
循环(迭代数组;迭代对象中的属性;迭代数字)
- v-if
根据表达式的值的真假条件(使dom元素销毁或重建)
- v-else-if
必须和 v-if 连用
- v-else
必须和 v-if 连用
- v-show
根据表达式的真假(切换元素的 display css属性) 经常切换某个元素的显示/隐藏时,则使用 v-shou 会更加节省性能上的开销
- v-hide
隐藏内容
- v-model
实现双向数据绑定
- v-bind
动态绑定,及对页面的数据进行更改 (语法糖简写形式是:“ :”)
- 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> // 阻止默认行为,不给出处理函数
- v-cloak
当网络较慢还在加载Vue.js,会导致页面显示出Vue源代码。可使用 v-cloak 指令来解决这一问题
- v-pre
把标签内部的元素原位输出
<span v-pre>{{ this will not be compiled }}</span> //显示的是{{ this will not be compiled }} <span v-pre>{{msg}}</span> // 即使data里面定义了msg这里仍然是显示的{{msg}}