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

不要设置值的指令

 v-else,v-cloak,v-once，v-pre 
 <!-- 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("----------------");
                }
            }
        }