大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了Vue中常用的修饰符有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中常用的修饰符有哪些文章都会有所收获,下面我们一起来看看吧。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟空间、营销软件、网站建设、恩阳网站维护、网站推广。
Vue修饰符
候选人:又卷?谁平时没事记这些啊,真正要用的时候我不知道去查文档吗?【相关推荐:vue.js视频教程】
面试官:嗯?
候选人:好吧,我说。
面试官:这才对嘛,虽然考这些八股文看起来是没啥意义,但其实我考察的是你对 vue 的熟悉程度,真正用 vue 开发过几个大型项目的人,是不可能答不出 5 个以上的。
候选人:您说的都对。
...
解答及延伸:
在上一篇文章 《自定义组件中如何用v-model?聊聊.sync修饰符的使用场景》 中,我们介绍了 .sync 修饰符。由此引出了这篇文章的问题,说一下你平时用过的 vue 修饰符。
修饰符用得好,那开发效率杠杠滴,即使不是应对面试,我们也应该掌握常用的修饰符。
.sync
父子组件交互,父组件传递给子组件 prop 值,子组件抛出事件,通知父组件改变这个绑定的值,可以用 .sync
修饰符简写。
父组件里fatherValue = val"> 子组件里 this.$emit('update:value', newValue)
等价于
父组件里子组件里 this.$emit('update:value', newValue)
.nativue
.native
修饰符是加在自定义组件的事件上,保证自定义组件的原生事件能执行
执行不了可以执行
如果不写 .native
修饰符,那上面的 @click
就是自定义事件click,而非原生事件click,除非在 my-button
组件内部 emit
了自定义事件 click,否则 handleClick 方法不会执行。
.stop
.stop
修饰符,用于阻止冒泡,同 event.stopPropagation()
一个 div 里面包了一个 button。
button 上的事件不加 .stop
修饰符,点击 button ,先执行 handleBtnClick
,再执行 handleDivClick
。
button 上的事件加了 .stop
修饰符,点击 button ,只执行 handleBtnClick
。
了解事件冒泡和捕获,请 点击这里,面试几乎必考。
.capture
.capture
修饰符,用于添加事件监听器时使用事件捕获模式
div 上的事件不加 .capture
修饰符,点击 button ,先执行 handleBtnClick
,再执行 handleDivClick
,其实就是默认使用冒泡模式。
div 上的事件加了 .capture
修饰符,点击 button ,先执行 handleDivClick
,再执行 handleBtnClick
。
.self
.self
修饰符,只当在 event.target 是当前元素自身时触发处理函数
div 上的事件不加 .self
修饰符,点击 button ,先执行 handleBtnClick
,再执行 handleDivClick
,其实就是默认使用冒泡模式。
div 上的事件加了 .self
修饰符,点击 button ,只执行 handleBtnClick
,点击 div,才执行 handleDivClick
。
.once
.once
修饰符,点击事件将只会触发一次
button 上的事件加了 .once
修饰符,点击 button ,只执行一次 handleBtnClick
事件 ,之后再次点击,handleBtnClick
事件不会执行。
.prevent
.prevent
阻止默认事件,同event.preventDefault()
阻止a标签的跳转行为 点击跳转 阻止复选框被勾选 阻止 form 表单提交刷新页面问题
键盘按键修饰符
需要用到的时候再去查 vue文档 吧,太多了,不用记住。
.lazy
v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。添加 .lazy
修饰符,会在 change 事件之后进行同步
{{ value }}
//... data() { return { value: 'lin' } } // ...
.trim
使用 .trim
修饰符,会自动过滤用户输入的首尾空白字符
{{ value }}
//... data() { return { value: 'lin' } } // ...
.number
使用 .number
修饰符,会将用户的输入值转为数值类型
{{ value }}
//... data() { return { value: 'lin' } } // ...
关于“Vue中常用的修饰符有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue中常用的修饰符有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。