Vue中常用的修饰符有哪些
这篇文章主要介绍了Vue中常用的修饰符有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中常用的修饰符有哪些文章都会有所收获，下面我们一起来看看吧。
面试官：说一下你平时用过的 Vue修饰符
候选人：又卷？谁平时没事记这些啊，真正要用的时候我不知道去查文档吗？【相关推荐：vue.js视频教程】
面试官：嗯？
候选人：好吧，我说。
面试官：这才对嘛，虽然考这些八股文看起来是没啥意义，但其实我考察的是你对 vue 的熟悉程度，真正用 vue 开发过几个大型项目的人，是不可能答不出 5 个以上的。
候选人：您说的都对。
...
解答及延伸：
在上一篇文章 《自定义组件中如何用v-model？聊聊.sync修饰符的使用场景》 中，我们介绍了 .sync 修饰符。由此引出了这篇文章的问题，说一下你平时用过的 vue 修饰符。
修饰符用得好，那开发效率杠杠滴，即使不是应对面试，我们也应该掌握常用的修饰符。
自定义组件修饰符
.sync
父子组件交互，父组件传递给子组件 prop 值，子组件抛出事件，通知父组件改变这个绑定的值，可以用 .sync 修饰符简写。
父组件里子组件里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中常用的修饰符有哪些"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
