vue指令

自定义指令

v-if和v-show的区别

区别：对于元素只是一次可以选择使用v-if(消耗内存),操作次数多v-show(并没有销毁元素

v-if 和v-for的优先级谁更高？

1.在vue2中，v-for优先级比v-if高 在vue3中，v-if优先级比v-for高
2. v-if和v-for不能同时使用
3. 同时使用需要在外层嵌套盒子，在外层进行v-if判断，在内层进行v-

注：使用v-else,v-else-if前必须有v-if

**v-else和v-else-if判断
v-text和v-html
v-text和v-html，插值区别
v-text和v-html相同点：都会覆盖文本
不同点：v-text只读取文本，v-html读取标签插值添加值
不要在用提交时使用v-html,不要在动态

这里是引用

渲染时时使用v-html 解决屏幕闪烁的问题，第一在标签上添加v-cloak,第二需要设置上面样式**

[v-cloak]{
display: none;
} 1 2 3 不要设置值的指令 v-else,v-cloak,v-once，v-pre

e和event区别
// 1.定义函数()，接收时e,当为形参
// 2.e自身某个事件带有的方法，event是window带有的
// 3.e = window.event;兼容

自定义语法

// 自定义指令
// 规则：定义指令名称不能使用驼峰和v-，要是用-连接，记得添加引号
// 使用时要v-自定义名称
// 函数写法
// 名称(节点,绑定对象){}
// 对象写法
// 名称:{
// 绑定成功调用
// bind(节点,绑定对象){},
// 插入到页面调用
// inserted(节点,绑定对象){},
// 重新解析时调用(值发生改变)
// update(节点,绑定对象){}
// }
// 1.局部自定义指令
//directives ,写入Vue实例中
// 2.全局自定义指令
// Vue.directive ,定义在实例化之前

directives:{
            "nums":{
                // bind成功绑定时调用
                bind(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*10;
                    binding.value = binding.value*10;
                    console.log("----------------");
                },
                // inserted成功插入页面调用
                inserted(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*100;
                    binding.value = binding.value*100;
                    console.log("----------------");
                },
                // update重新解析时(改变)调用
                update(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value+binding.oldValue;
                    binding.value = binding.oldValue;
                    console.log("----------------");
                }
            }
        }