前言大家好,我是林三鑫。众所周知,修饰符也是Vue的重要组成部分之一。善用修饰符可以大大提高开发效率。下面给大家介绍一下面试官最喜欢问的13个Vue修饰符。1、惰性修饰符的作用是当输入框的值改变时,输入框的值不会改变。当光标离开输入框时,v-model绑定的值会发生变化

前言大家好,我是林三鑫。众所周知,修饰符也是Vue的重要组成部分之一。善用修饰符可以大大提高开发效率。下面给大家介绍一下面试官最喜欢问的13个Vue修饰符。1、惰性修饰符的作用是当输入框的值改变时,输入框的值不会改变。当光标离开输入框时,v-model绑定的值会发生变化{{value}}data(){return{value:'222'}}lazy12.trimtrim修饰符类似于JavaScript中的trim()方法,作用是把v-模型绑定的值的前后空格过滤掉。{{value}}data(){return{value:'222'}}number3.numbernumber修饰符的作用是值转换为数字,但有先输入字符串和先输入数字两种情况。{{value}}data(){return{value:'222'}}如果先输入数字,只取前一个数字的部分。如果您先输入字母,则数字修饰符无效。number24.stopstop修饰符的作用是防止冒泡methods:{clickEvent(num){未添加停止点击按钮输出12添加停止点击按钮输出1console.log(num)}}5.捕获事件从冒泡默认情况下由内而外,捕获修饰符反向工作,捕获方法:{clickEvent(num){withoutcaptureclickbuttonoutput12addcaptureclickbuttonoutput21console.log(num)}}6.selfself修饰符的作用是只有点击事件绑定本身才会触发事件方法:{clickEvent(num){不添加self,点击按钮输出12,添加self后,点击按钮输出1,点击div输出2console.log(num)}}7.onceonce修饰符的作用是事件只执行一次methods:{clickEvent(num){多次点击按钮不输出1添加一次多次点击按钮只输出一次1console.log(num)}}8.函数preventprevent修饰符的作用是阻止默认事件(比如a标签Turn的跳转)...12.camel没有camelviewBox会被识别为viewbox