当前位置: 首页 > Web前端 > HTML

《百毒》面试官最喜欢问的14种Vue修饰符

时间:2023-03-28 12:40:04 HTML

为提高开发效率,给大家介绍一下面试官最喜欢问的13种Vue修饰符。只有绑定到模型的值才会改变

{{value}}
data(){return{value:'222'}}2。trim修饰符的作用类似于JavaScript中的trim()方法,过滤掉v-model绑定的值的前后空格。
{{value}}
data(){return{value:'222'}}3.数字number的函数修饰符是将值转换成数字,但是先输入字符串,先输入数字,有两种情况
{{value}}
data(){return{value:'222'}}如果先输入数字,则只取数字的第一部分。如果先输入字母,则数字修饰符无效。4、stopstop修饰符的作用是防止冒泡click
methods:{clickEvent(num){不带stop,点击按钮输出12带stop,点击按钮输出1console.log(num)}}5.捕获事件默认从内向外冒泡,捕获修饰符反向作用,从外网捕获click
methods:{clickEvent(num){不捕获,点击按钮输出12添加捕获点击按钮输出21console.log(num)}}6.self修饰符的作用是只有自己绑定的点击事件才会触发事件click
methods:{clickEvent(num){clickbuttonwithoutselftooutput12添加了self点击按钮输出1点击div输出2console.log(num)}}7.onceonce修饰符的作用是事件只执行一次Click
methods:{clickEvent(num){没有一次,多次点击按钮输出1withonceadded,多次点击按钮只会输出1一次console.log(num)}}8.preventprevent修饰符的作用是阻止默认事件(比如a标签的跳转)点我methods:{clickEvent(num){不加prevent,点击a标签先跳转,再输出1。加prevent后,点击a标签不跳转,只输出1个console。日志(数字)}}9。在自定义组件的事件中添加nativenative修饰符,保证事件可以执行但可以执行10.left,right,middle这三个修饰符分别是鼠标左中右键触发的事件点我方法:{点击中间按钮输出1点击左边按钮输出2点击右键输出3clickEvent(num){console.log(num)}}11.被动当我们在监听元素滚动事件时,onscroll事件会一直被触发。在PC端是没有问题的,但是在移动端,它会让我们的网页变得卡顿,所以当我们使用这个修饰符的时候,相当于在onscroll事件上加了一个.lazy修饰符...12.Camel不添加camelviewBox会被识别为viewboxcanmelviewBox会被识别为viewBox13.syncasparent组件将值传递给子组件。当子组件想要改变这个值时,可以在父组件中进行bar=val">子组件的函数this.$emit('update:foo',newValue)中的同步修饰符是,可以简写为:在父组件中this.$emit('update:foo',newValue)14.keyCode当我们这样写事件的时候,不管怎样我们按下任何按钮都会触发一个事件那如果你想限制为某个按钮触发呢?这时候keyCode修饰符就派上用场了and"Backspace"key).space.esc.up.down.left.right//系统修饰键key.ctrl.alt.meta.shift例如(具体键码见键码对应表)pressctrlTrigger也可以通过鼠标事件+按钮触发可以通过多个按钮比如ctrl+67结语我是林三鑫,一个狂热的前端菜鸟程序员如果你有上进心,喜欢前端-end,又想学前端,然后可以交个朋友,一起钓鱼哈哈,摸摸鱼,加我,请注意[思想]