【Vue】修饰符

1..stop: 等同于event.stopPropagation()

1 2	<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a>

2..prevent:等同于event.preventDefault()

1 2	<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>

3..capture:使用事件捕获模式

1
2
3

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

4..self:只当在 event.target 是当前元素自身时触发处理函数

1
2
3

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

5..once:点击事件将只会触发一次。支持自定义事件

1 2	<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>

6..passive:事件的默认行为不会被取消，提升移动端性能

1 2	<!-- the scroll event will not cancel the default scroll behavior --> <div v-on:scroll.passive="onScroll">...</div>

1.enter

2..tab

3..delete:删除和退格键

4..esc

5..space

6..up

7..down

8..left

9..right

10..left:鼠标左键

11..right:鼠标右键

12..middle:鼠标中键

1..ctrl

2..alt

3..shift

4..meta：Windows下是徽标键，Mac下是commond键

5..exact: 有且只有特定的按键被触发时，才调用函数

1 2	<!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button>

1..lazy:v-model绑定后，默认input是同步输入框数据的，使用.lazy后，只在失去焦点，或按回车后才更新

1 2	<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >

2..number:自动将用户的字符串输入值转为数值类型

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

3..trim:自动过滤用户输入的首尾空白字符