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}}
————————————————