当前位置：首页 > news >正文

Vue指令总结

news 来源：原创 2024/5/19 4:06:23

熟悉的指令

名称	作用
v-bind :	单向绑定解析表达式,可简写为:xxx
v-model :	双向数据绑定
v-for :	遍历数组/对象/字符串
v-on:	绑定事件监听,可简写为@
v-if:	条件渲染（动态控制节点是否存存在)
v-else:	条件渲染(动态控制节点是否存存在)
v-show :	条件渲染(动态控制节点是否展示)

新学指令

名称	作用
v-text	把所有的字符串都当成正常的文本去解析，替换所在的结点的内容，而插值语法不会
v-html	支持HTML结构的解析；与插值语法的区别：v-html会替换掉结点中所有的内容，插值语法不会。严重注意：！！！v-html有安全性问题（1）在网站上动态渲染任意的HTML是非常危险的行为，容易导致XSS攻击。（2)一定要在可信的内容上使用v-html，永远不要在用户提交的内容上使用！！！
v-cloak	v-clock指令（没有值）： 1.本质就是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-clock属性。 2.使用css的属性选择器：[v-cloak]{display:none}配合v-clock可以解决网速慢时，Vue还没接管容器时的{{XXX}}问题。
v-once	v-once在结点初次动态渲染自后，就视为静态内容了，有数据的改变不会引起v-once所在结点的更新，用于优化性能；
v-pre	作用是跳过所在结点的编译。因此，可以利用他跳过没有使用指令语法、没有使用插值语法的结点，会加快编译；

自定义指令
1. 定义语法
  
  （1）局部指令
```
 new Vue({
        directives:{指令名：配置对象}
})
//或者
new Vue({
        directives:{指令名：回调函数}
})
```
  （2）全局指令
```
 Vue.directive('指令名'，配置对象);
 //或者
  Vue.directive('指令名'，回调函数);
```
2. 配置对象中常见的3个回调函数
  
  (1) bind:指令与元素成功绑定时调用。
  
  (2) inserted:指令所在元素被插入页面时调用。
  
  (3) update:指令所在模板结构被重新解析时调用。

fbind: {
                // 指令与元素成功绑定时调用
                bind(element, binding) {
                    element.value = binding.value;
                },
                // 指令所在的结点被插入页面时
                inserted(element, binding) {
                    element.focus();
                },
                // 指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                }
            }