Vue的事件修饰符

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

1. 事件修饰符

• 在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation()  是非常常见的需求。因此, vue 提供了事件修饰符的概念,来辅助程序员更方便的对事件的触发进行控制。常见的5个事件修饰符如下：

事件修饰符	说明
.prevent	阻止默认行为(例如：阻止 a 链接的跳转、阻止表单的提交等)
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发 1 次
.self	只有在 event.target 是当前元素自身时触发事件处理函数

语法格式如下：

<!-- 触发 click 点击事件时,阻止 a 链接的默认跳转行为 -->
<a href="https://www.baidu.com" $click.prevent="onLinkClick">百度首页</a>

2. 按键修饰符

在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加</font color="red">按键修饰符,例如：

<!-- 只有在 key 是 enter 时调用 vm.submit() -->
<input @keyup.enter="submit">
​
<!-- 只有在 key 是 esc 时调用 vm.clearInput() -->
<input @keyup.esc="clearInput">

3. 双向绑定事件

vue提供了v-model双向数据绑定命令,用来辅助开发者不操作DOM 的前提下,快速获取表单的数据

<p>用户名是:{{ username }}</p>
<input type="text" v-model="username">
​
<p>选中的省份是:{{province}}</p>
<select v-model="province">
   <option value="">请选择</option>
   <option value="1">北京</option>
   <option value="2">河北</option>
   <option value="3">黑龙江</option>
</select>

4. v-model指令的修饰符

为了方便对用户输入的内容进行处理,vue为v-model 指令提供了 3个修饰符,分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型
.trim	自动过滤用户输入的首尾空白字符
.lazy	在"change"时而非"input"时更新

<input type="text" v-model.number="n1">
<input type="text" v-model.number="n2">
<span>{{n1 + n2 }}</span>