在程序世界裡，修飾符是用於限定類型以及類型成員的聲明的一種符號
在Vue中，修飾符處理了許多DOM事件的細節，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注於程序的邏輯處理
vue中修飾符分為以下五種：
二、修飾符的作用表單修飾符在我們填寫表單的時候用得最多的是input標籤，指令用得最多的是v-model
關於表單的修飾符有如下：
lazy在我們填完信息，光標離開標籤的時候，才會將值賦予給value，也就是在change事件之後再進行信息同步
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
trim自動過濾用戶輸入的首空格字符，而中間的空格不會過濾
<input type="text" v-model.trim="value">
number自動將用戶的輸入值轉為數值類型，但如果這個值無法被parseFloat解析，則會返回原來的值
<input v-model.number="age" type="number">
事件修飾符事件修飾符是對事件捕獲以及目標進行了處理，有如下修飾符：
stop阻止了事件冒泡，相當於調用了event.stopPropagation方法
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只輸出1
prevent阻止了事件的默認行為，相當於調用了event.preventDefault方法
<form v-on:submit.prevent="onSubmit"></form>
self只當在 event.target 是當前元素自身時觸發處理函數
<div v-on:click.self="doThat">...</div>使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊
once綁定了事件以後只能觸發一次，第二次就不會觸發
<button @click.once="shout(1)">ok</button>
capture使事件觸發從包含這個元素的頂層開始往下觸發
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
</div>
// 輸出結構: 1 2 4 3
passive在移動端，當我們在監聽元素滾動事件的時候，會一直觸發onscroll事件會讓我們的網頁變卡，因此我們使用這個修飾符的時候，相當於給onscroll事件整了一個.lazy修飾符
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>不要把 .passive 和 .prevent 一起使用,因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。
passive 會告訴瀏覽器你不想阻止事件的默認行為
native讓組件變成像html內置標籤那樣監聽根元素的原生事件，否則組件上使用 v-on 只會監聽自定義事件
<my-component v-on:click.native="doSomething"></my-component>使用.native修飾符來操作普通HTML標籤是會令事件失效的
滑鼠按鈕修飾符滑鼠按鈕修飾符針對的就是左鍵、右鍵、中鍵點擊，有如下：
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>
鍵盤修飾符鍵盤修飾符是用來修飾鍵盤事件（onkeyup，onkeydown）的，有如下：
keyCode存在很多，但vue為我們提供了別名，分為以下兩種：
普通鍵（enter、tab、delete、space、esc、up...）系統修飾鍵（ctrl、alt、meta、shift...）// 只有按鍵為keyCode的時候才觸發
<input type="text" @keyup.keyCode="shout()">還可以通過以下方式自定義一些全局的鍵盤碼別名
Vue.config.keyCodes.f2 = 113
v-bind修飾符v-bind修飾符主要是為屬性進行操作，用來分別有如下：
async能對props進行一個雙向綁定
//父組件
<comp :myMessage.sync="bar"></comp>
//子組件
this.$emit('update:myMessage',params);以上這種方法相當於以下的簡寫
//父親組件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
this.bar = e;
}
//子組件js
func2(){
this.$emit('update:myMessage',params);
}使用async需要注意以下兩點：
使用sync的時候，子組件傳遞的事件名格式必須為update:value，其中value必須與子組件中props中聲明的名稱完全一致
注意帶有 .sync 修飾符的 v-bind 不能和表達式一起使用
將 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=」{ title: doc.title }」，是無法正常工作的
props設置自定義標籤屬性，避免暴露數據，防止汙染HTML結構
<input id="uid" title="title1" value="1" :index.prop="index">
camel將命名變為駝峰命名法，如將view-Box屬性名轉換為 viewBox
<svg :viewBox="viewBox"></svg>
三、應用場景根據每一個修飾符的功能，我們可以得到以下修飾符的應用場景：
.self ：將事件綁定在自身身上，相當於阻止事件冒泡參考文獻https://segmentfault.com/a/1190000016786254https://vue3js.cn/docs/zh