详细解析vue中的修饰符

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" @blur="blurText($event)" >
<h3>{{msg}}</h3>
<p>{{msg1}}</p>

<script>
  data:{
   msg:'',
   msg1:''
},
 computed:{
	msg1:function(){
		return typeof(this.msg)
	},
// 输入合法整数
blurText(e) {
      var boolean = new RegExp('^[1-9][0-9]*$').test(e.target.value)
      if (!boolean) {
        this.$message.warning('请输入合法的整数')
        e.target.value = ''
      }
    },
}

</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