1.表單輸入框input中的修飾符

.lazy：加lazy修飾符的區別相當於在輸入後失去焦點或者摁了enter鍵檢視才更新。不加lazy則是在keyup就更新，如下：

<input v-model.lazy="msg" >
<h3>{{msg}}</h3>

.number：把輸入的數值從字串或其他型別轉換為number型別，我們可以如下應正一下，當沒輸入值時，p標籤顯示為string，輸入值後顯示為number

<input v-model.number="msg" >
<h3>{{msg}}</h3>
<p>{{msg1}}</p>

<script>
  data:{
   msg:'',
   msg1:''
},
 computed:{
	msg1:function(){
		return typeof(this.msg)
	}
}

</script>
 

.trim:自動過濾使用者輸入的首尾空格（中間空格過濾不了）

<input v-model.trim="msg" />

2.事件中的修飾符

<!-- 阻止單擊事件冒泡，當點選box2時就不會觸發box1的點選事件，若不加則會觸發 -->
<div class="box1" @click="btn">
	<div class="box2" @click.stop="btn1"></div>
</div>
<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯，阻止預設事件  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 新增事件偵聽器時使用事件捕獲模式，先執行外層盒子事件，再執行裡面盒子事件 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）才去執行 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能點選一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
 

3.按鍵修飾符

只有在按enter鍵時呼叫submit

<input v-on:keyup.enter="submit">

全部的按鍵別名：

• .enter
• .tab
• .delete (捕獲 "刪除" 和 "退格" 鍵)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta