vue之修饰符

1. 简介

修饰符是以半角句号 . 指明的特殊后缀

2. 常用修饰符

2.1 .prevent ：阻止事件默认行为

可以告诉v-on指令对于触发的事件调用 event.preventDefault()，一般用于表单提交、a标签的click事件等

<form v-on.prevent="onSubmit"></form>
<a href="www.baidu.com" @click.prevent="clickEvent">百度一下</a>

2.2 a标签常用修饰符

<a @click.stop="doThis"></a>

@click.stop：阻止单击事件冒泡

@click.prevent： 提交事件不再重载页面

@click.capture：添加事件着呢侦听器时使用事件捕捉模式

@click.self：只当事件在该元素本身（不作用于子元素）触发时触发回调

@click.once：click事件只能点击一次

@submit.prevent 提交事件不再重载页面（一般用于表单）

2.3 事件修饰符

Vue.js 通过由点 . 表示的指令后缀来调用修饰符

.stop - 阻止单击事件冒泡
.prevent - 阻止默认事件，提交事件不再重载页面

.capture - 阻止捕获，添加事件侦听器时，使用事件捕获模式
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<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>

2.4 按键修饰符：监听键盘事件

<input v-on:keyup.enter='submit'>  
简写为： 
<input @keyup.enter='submit'>

按键别名

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

2.5 表单修饰符

2.5.1 .lazy

默认情况下， v-model 会在 input 事件中同步输入框的值与数据；如果加一个修饰符 lazy ，就会转变为在 change 事件中同步

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

2.5.2 .number

自动将用户的输入值转为 Number 类型

<input v-model.number="age" type="number">

2.5.3 .trim

如果要自动过滤用户输入的首尾空格

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