今天给朋友们介绍Vue指令的用处:
- v-bind - - 可简写为 : 动态绑定属性值的时候使用
- v-on - - 可简写为 @ 添加事件监听的时候使用
- v-model - - 与数据实时关联,一般用于input,textarea
- v-text - - 设置文本内容
- v-html - - 设置html文本
- v-pre - - 保留格式
- v-clock - - 一般与[v-cloak] { display: none }一起用,在数据未渲染时隐藏数据
- v-if - - 用作判断元素是否显示
- v-else - - 与v-if配对使用(与JS当中的if else 一样)
- v-else-if - - 同上
- v-for - - 循环遍历某数组,数组多长就遍历多少次添加多少次的DOM
- v-show - - 用作显示隐藏元素
- v-slot - - 插槽
- v-once - - 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-if与v-show都是用作于显示隐藏元素,那么它们有什么区别呢?
- v-if是创建和移除DOM
- v-show是修改DOM的display的属性值
- v-if一般用作于少次数的显示隐藏DOM,因为它的切换开销比较大。
- v-show一般用作于频繁的显示隐藏DOM,但是初始化的时候不建议使用,因为它的初始化开销比较大。
小总结:
只初始化一次的时候用v-if