這篇文章帶你去聊聊平常常用的 Vue 修飾符，介紹一下自訂元件修飾符、事件修飾符、表單輸入綁定修飾符，希望對大家有幫助！
Vue修飾符候選人：又卷？誰平常沒事記這些啊，真正要用的時候我不知道去查文件嗎？ 【相關推薦：vue.js影片教學】
面試官：嗯？
候選人：好吧，我說。
面試官：這才對嘛，雖然考這些八股文看起來是沒啥意義，但其實我考察的是你對vue 的熟悉程度，真正用vue 開發過幾個大型專案的人，是不可能答不出5 個以上的。
候選人：您說的都對。
...
解答及延伸：
在上一篇文章 《自訂元件如何用v-model？聊聊.sync修飾符的使用場景》 中，我們介紹了 .sync 修飾符。由此引出了這篇文章的問題，說一下你平常用過的 vue 修飾符。
修飾符用得好，那開發效率槓槓滴，即使不是應對面試，我們也應該掌握常用的修飾符。
.sync
#父子元件交互，父元件傳遞給子元件 prop 值，子元件拋出事件，通知父元件改變這個綁定的值，可以用.sync 修飾符簡寫。
父组件里 <children :value="fatherValue" @update:value="val => fatherValue = val"></children> 子组件里 this.$emit('update:value', newValue)
等價於
父组件里 <children :value.sync="fatherValue"></children> 子组件里 this.$emit('update:value', newValue)
.nativue
.native 修飾符是加在自訂元件的事件上，確保自訂元件的原生事件能執行
执行不了 <my-button @click="handleClick"></my-button> 可以执行 <my-button @click.native="handleClick"></my-button>
如果不寫 .native 修飾符，那上面的 @click# 就是自訂事件 click，而非原生事件 click，除非在my-button 元件內部emit 了自訂事件click，否則handleClick方法不會執行。
.stop
#.stop 修飾符，用於阻止冒泡，同event.stopPropagation()
<div @click="handleDivClick"> <button @click.stop="handleBtnClick">click</button> </div>
#一個div 裡麵包了一個button。
button 上的事件不加 .stop 修飾符，點選 button ，先執行 handleBtnClick ，再執行 handleDivClick 。
button 上的事件加了 .stop 修飾符，點擊 button ，只執行 handleBtnClick。
了解事件冒泡和捕獲，請 點擊這裡，面試幾乎必考。
.capture
.capture 修飾符，用於新增事件監聽器時使用事件擷取模式
<div @click.capture="handleDivClick"> <button @click="handleBtnClick">click</button> </div>
div 上的事件不加.capture 修飾符，點擊button ，先執行handleBtnClick ，再執行handleDivClick ，其實就是預設使用冒泡模式。
div 上的事件加了 .capture 修飾符，點擊 button ，先執行 handleDivClick ，再執行 handleBtnClick 。
.self
.self 修飾符，只當在event.target 是當前元素本身時觸發處理函數
<div @click.self="handleDivClick"> <button @click="handleBtnClick">click</button> </div>
div 上的事件不加.self 修飾符，點選button ，先執行handleBtnClick ，再執行handleDivClick ，其實就是預設使用冒泡模式。
div 上的事件加了 .self 修飾符，點擊 button ，只執行 handleBtnClick ，點擊 div，才執行 handleDivClick 。
.once
.once 修飾符，點擊事件只會觸發一次
<button @click.once="handleBtnClick">button</button>
button 上的事件加了 .once 修饰符，点击 button ，只执行一次 handleBtnClick 事件 ，之后再次点击，handleBtnClick 事件不会执行。
.prevent
.prevent 阻止默认事件，同event.preventDefault()
阻止a标签的跳转行为
<a href="#" @click.prevent="handleClick">点击跳转</a>
阻止复选框被勾选
<input type="checkbox" @click.prevent />
阻止 form 表单提交刷新页面问题
<el-form :model="form" @submit.native.prevent>
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>键盘按键修饰符
需要用到的时候再去查 vue文档 吧，太多了，不用记住。
.lazy
v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。添加 .lazy 修饰符，会在 change 事件之后进行同步
<input v-model.lazy="value" />
<p>{{ value }}</p>
//...
data() {
return {
value: 'lin'
}
}
// ...
.trim
使用 .trim 修饰符，会自动过滤用户输入的首尾空白字符
<input v-model.trim="value" />
<p>{{ value }}</p>
//...
data() {
return {
value: 'lin'
}
}
// ....number
使用 .number 修饰符，会将用户的输入值转为数值类型
<input v-model.number="value" />
<p>{{ value }}</p>
//...
data() {
return {
value: 'lin'
}
}
// ...
这一部分平时开发很少用，像这种知识点知道怎么查阅就行，用到的时候再说，vue文档
合理使用 vue 修饰符，能使我们的代码更简洁，提高我们的开发效率。
本文列出的修饰符平时开发中几乎都可以用到，如果你开发过 vue 项目，却没有使用过这些修饰符，要么是你开发的业务不够复杂，要么就是你的代码写得不够简洁，如果正巧你的简历写了熟练使用 vue，那么在面试官眼中就非常减分了。
vue 和 react 有一点很不同的地方，就是 vue 提供了很多语法糖和指令，能够让我们更快捷地去开发，要想熟练使用 vue，就要把这些语法糖和指令用熟。
更多编程相关知识，请访问：编程入门！！
以上是帶你去聊聊平常常用的 Vue 修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章！
