[TOC] # 修飾符 ## 一.v-model的修飾符 `v-model`是用于在表單表單元素上創建雙向數據綁定的指令。在`<input>`和`<textarea>`上，默認通過監聽元素的 input 事件來更新綁定的屬性值。 ### .lazy .lazy：在改變后才會被觸發，也就是說當`input`或`textarea`失去焦點時，它所綁定的值才會發生改變。 ``` <!-- 若不使用 .lazy 修飾符，則在輸入的過程中，haha 的值時不斷變化的 --> <input type="text" v-model.lazy="haha"> <p>輸入的內容為：{{ haha }}</p> ``` ### .number `.number`：用來將輸入的內容轉換成數值，但如果輸入的是字符串，則輸出的也是字符串； **用于`type='text'`** ``` <!-- html部分 --> <input type="text" v-model.number="haha"> <p>輸入的內容為：{{ haha }}</p> <!-- 輸出的值及為input失去焦點后的value值，即haha的值與input中顯示的值最終會保持一致 有下面幾種情況： 1. 輸入：123ebca154 輸出：123 number類型 2. 輸入：+123456 輸出：123456 number類型 3. 輸入：12e 輸出：12 number類型 4. 輸入：12.36e 輸出：12.36 number類型 5. 輸入：12.3.4.5 輸出：12.3 number類型 6. 輸入：-+1231abc 輸出：-+1231abc string類型 7. 輸入：abc 輸出：abc string類型 8. 輸入：+ 輸出：+ string類型 9. 輸入：- 輸出：- string類型 --> ``` **用于`type='number'`：** ``` <!-- html部分 --> <input type="number" v-model.number="haha"> <p>輸入的內容為：{{ haha }}</p> <!-- 輸出的值及為input的value值，當非法輸入時，input最終展示的內容為輸入的內容 有下面幾種情況： 1. 輸入：-.35 輸出：-0.35 number類型 2. 輸入：+-123e 不輸出 非法輸入，string類型 3. 輸入：12e 不輸出 非法輸入，string類型 4.輸入：+-..25 不輸出 非法輸入，string類型 --> ``` **無論是用在`text`中還是用在`number`中，都需要再進行處理：** **用在`text`中：** ``` <script> // 對haha監聽，如下： watch: { haha (newVal, oldVal) { this.hh = typeof newVal === 'string' && newVal !== '-' ? newVal.slice(0, newVal.length - 1) : newVal } } </script> ``` **用在`number`中：** ``` <script> // 給input綁定blur事件 methods: { inputBlurFunc (newVal, oldVal) { this.hh = typeof newVal === 'string' && newVal !== '-' ? newVal.slice(0, newVal.length - 1) : newVal } } </script> ``` ### .trim `.trim`：自動過濾字符串前后的空格 ``` <!-- html部分 --> <input type="text" v-model.trim="haha"> <p>輸入的內容為：{{ haha }}</p> ``` ## 二. v-on的修飾符 ### .stop `.stop`：該修飾符將阻止事件向上冒泡。同理于調用`event.stopPropagation()`方法 ``` <!-- html部分 --> <div @click='clickDivFunc'> <button @click.stop='clickBtnFunc'>點我</button> <div> ``` ### .prevent `.prevent`：該修飾符會阻止當前事件的默認行為。同理于調用`event.preventDefault()`方法 ``` <!-- html部分 --> <form @submit.prevent='clickBtnFunc'></form> ``` ### .self `.self`：只有該元素本身能觸發此事件，它的子元素無法觸發它的事件；所以，當點擊了它的子元素，按照冒泡原理，父元素的事件應當被觸發，但是因為事件的觸發源并不是它，所以它的事件不會被觸發；如下： ``` <!-- html部分 --> <!-- 點擊按鈕時是不會觸發div上的事件 --> <div @click.self='clickDivFunc'> <button @click='clickBtnFunc'>點我</button> <div> ``` ### .once `.once`：該修飾符表示綁定的事件只會被觸發一次 ``` <!-- html部分 --> <button @click.once='clickBtnFunc'>點我</button> ``` ### .nactive `.native`：給某個組件的根元素上添加事件，需要添加該修飾符來使事件有效；使用在普通根元素上，改修飾符是無效的；如下： ``` <my-component v-on:click.native="clickFun"></my-component> ``` 修飾符可以串聯，如： `<a v-on:click.stop.prevent="hahaFunc"></a>` ## 三.按鍵修飾符 Vue 允許為 v-on 在綁定鍵盤事件時添加按鍵修飾符，通過`keyup.keyCode`的方式來監聽鍵盤特定按鍵的事件。也可以通過按鍵名稱來監聽，如下： ``` <!-- 通過keyCode的方式監聽 --> <input type='text' @keyup.13='submitFunc'> <!-- 通過按鍵名稱的方式監聽 --> <input type='text' @keyup.enter="submit"> ``` **所有的按鍵別名：** * enter * tab * delete (捕獲 “刪除” 和 “退格” 鍵) * esc * space * up * down * left * right ***** >[danger]**注意** 如果使用了element-ui，想要監聽input標簽的鍵盤事件的觸發，需要再添加`.nactive`進行修飾，否則會不起作用。 可能是因為element-ui封裝了個div在input標簽外面，把原來的事件隱藏了，所以如果不加**.native**的話，按鍵不會生效。 ``` <el-input @keyup.enter.native="KeyUpEnter"></el-input> KeyUpEnter() { console.log('按下了enter鍵'); }, ``` ***** **自定義按鍵修飾符** 通過`config.keyCodes`對象來自定義按鍵修飾符別名，如： `Vue.config.keyCodes.f1 = 112` ***** **附鍵盤碼：**  ## 四.v-bing的修飾符 ### .sync `.sync`：當一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定，即在子組件中修改父組件的屬性值；該修飾符會被擴展為一個自動更新父組件屬性的`v-on`監聽器，如下 ``` <comp :foo.sync="bar"></comp> ``` 擴展為： ``` <comp :foo="bar" @update:foo="val => bar = val"></comp> ``` 當子組件需要更新foo的值時，它需要顯式的觸發更新事件，如下： ``` this.emit('update:foo', newValue) ```