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("----------------");
}
}
}