Vue【十】vue修饰符

文章目录

Vue【十】vue修饰符
前言
一、事件修饰符
二、v-model修饰符
三、按键修饰符
四、系统修饰键
- `.exact`修饰符
- 鼠标按钮修饰符
五、element的修饰符（面试加分）

前言

vue修饰符大致分为事件修饰符，v-model修饰符，按键修饰符，系统修饰符，鼠标按钮修饰符，还有一个我们在使用框架的时候经常使用的，比如element的修饰符.native。

一、事件修饰符

修饰符	作用
.stop	阻止单击事件继续传播
.prevent	提交事件不再重载页面
.capture	添加事件监听器时使用事件捕获模式
.self	只当在 event.target 是当前元素自身时触发处理函数
.once	点击事件将只会触发一次
.passive	滚动事件的默认行为 (即滚动行为) 将会立即触发

.stop修饰符

<!-- 阻止单击事件继续传播(简单理解就是阻止冒泡) -->
<a v-on:click.stop="doThis"></a>

.prevent修饰符

<!-- 提交事件不再重载页面（阻止默认行为） -->
<form v-on:submit.prevent="onSubmit"></form>

.capture修饰符

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

.self修饰符

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

.once修饰符

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

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
6. .passive修饰符
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

修饰符的串联

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

二、v-model修饰符

`.lazy`修饰符

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

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

简单理解就是在表单输入的时候不会更新msg，而是等到输入完成也就是值发生改变（change）的时候。

`.number` 修饰符

默认情况下输入框输入的值为字符串，.number可以使输入框输入的值为数值类型。

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

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

`.trim`修饰符

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

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

三、按键修饰符

1.在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

2.现在按键修饰符用的都是别名，也有按键码的写法，这种方法已经废弃了。例如：

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

13代表enter（回车键）

3.Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

四、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：

<!-- Alt + C （67是c的按键码）-->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。

`.exact`修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

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

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符

.left左键
.right右键
.middle中间键
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

五、element的修饰符（面试加分）

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。

	<el-button
        class="loginBtn"
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="handleLogin"
      >登录</el-button>

native修饰符可以让父组件接收到原生事件(click), 否则只能接收自定义事件(通过子组件$emit触发)
native修饰符只能用在组件上, 不能用在原生标签上