当前位置: 首页 > 科技观察

面试官喜欢问的14种Vue修饰符

时间:2023-03-21 16:45:54 科技观察

前言大家好,我是林三鑫。众所周知,修饰符也是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修饰符的作用是防止冒泡click
methods:{clickEvent(num){未添加停止点击按钮输出12添加停止点击按钮输出1console.log(num)}}5.捕获事件从冒泡默认情况下由内而外,捕获修饰符反向工作,捕获click
方法:{clickEvent(num){withoutcaptureclickbuttonoutput12addcaptureclickbuttonoutput21console.log(num)}}6.selfself修饰符的作用是只有点击事件绑定本身才会触发事件点击
方法:{clickEvent(num){不添加self,点击按钮输出12,添加self后,点击按钮输出1,点击div输出2console.log(num)}}7.onceonce修饰符的作用是事件只执行一次Click
methods:{clickEvent(num){多次点击按钮不输出1添加一次多次点击按钮只输出一次1console.log(num)}}8.函数preventprevent修饰符的作用是阻止默认事件(比如a标签Turn的跳转)clickmemethods:{clickEvent(num){不加prevent,点击a标签先跳转,然后输出1,加prevent点击a标签不会跳转,只会输出1console.log(num)}}9、在自定义组件的事件中添加native修饰符,保证事件可以执行但不能执行可以执行10.left,right,middle三个修饰符是针对鼠标的左中右按钮触发的事件点我methods:{点击中间按钮输出1点击左侧按钮输出2点击右侧按钮输出3clickEvent(num){console.log(num)}}11.passive当我们在监听元素滚动事件时,onscroll事件会一直被触发,在PC端是没有问题的,但是在移动端,我们的网页就会变得卡顿,所以当我们使用这个修饰符的时候,相当于在onscroll事件上加了一个.lazy修饰符...12.camel没有camelviewBox会被识别为viewboxcanmelviewBox会被识别为viewBox13.sync当父组件给子组件传了一个值,子组件想改变这个值,可以在父组件bar=val">this.$emit('update:foo',newValue)sync修饰符在子组件中的作用在于可以简写:<在父组件/children>subcomponentthis.$emit('update:foo',newValue)14.keyCode当我们这样写事件的时候,无论什么按钮被按下,事件会被触发那么如果你想限制在某个按键触发怎么办?这时候keyCode修饰符就派上用场了Vue提供的keyCode://Commonkey.enter.tab.delete//(capture"delete"and"backspace"key).space.esc.up.down.left.right//系统修饰符key.ctrl.alt.meta.shift例如(具体键码见键码对应表)按ctrl触发也可以是鼠标事件+按钮可以多次触发按钮,例如ctrl+67