【Vue】修饰符

标签：head   mod   监听   code   cancel   orm   值类型   点击事件   space   

一、事件修饰符

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

大专栏  【Vue】修饰符ass="line"><!-- 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>

四、表单v-model修饰符

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:自动过滤用户输入的首尾空白字符

【Vue】修饰符

标签：head   mod   监听   code   cancel   orm   值类型   点击事件   space   

原文地址：https://www.cnblogs.com/dajunjun/p/11694140.html