携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

前言

vue的常用修饰符总共分为四类,分别是

1. 监听事件
2. 监听键盘
3. 监听鼠标
4. 监听表单

1.监听事件类

这个三个属于v-on指令的修饰符,我分成监听事件类和监听键盘类

1. prevent - 阻止默认行为
2. stop - 阻止事件冒泡

//1.阻止默认行为
<a href="http://www.baidu.com" @click.prevent>百度</a> 
//2.阻止冒泡 
<a href="http://www.baidu.com" @click.stop>百度</a>

2.监听键盘类

  <div>
    <!-- 1.监听所有键盘 -->
    <input type="text" @keydown="fn" />
    <!-- 2.只监听enter键 -->
    <input type="text" @keydown.enter="fn" />
    <!-- 3.只监听取消键 -->
    <input type="text" @keydown.esc="fn" />
    <!-- 4.只监听删除键和退格 -->
    <input type="text" @keydown.delete="fn" />
  </div>

3.监听鼠标类

分别是下面三个:

1. 监听鼠标中键点击───middle
2. 监听鼠标左键点击───left
3. 监听鼠标右键点击───right

4.监听表单类

下列三个都是moduel的修饰符

4.1number

将默认值转成数字类型

需要注意两个点:

1.先输入数字:只取前面数字部分

2先输入字母,number修饰符无效

<!-- 1..number将默认值转成数字类型 -->
<input v-model.number="age" type="text">

.number 的原理就是 v-model 帮我们做了一次 parseFloat

4.2trim

去除首尾空白字符

<!-- 2..trim 去除首尾空格后再同步给变量 -->
<input v-model.trim="info" type="text" />

4.3.lazy

lazy修饰符:当光标离开输入框时，v-model绑定的值value才会改变

<!-- 3.lazy 将默认的 input 事件改为了 change 事件 -->  
<!-- change 事件: 失去焦点并修改内容时才会触发 -->
<textarea v-model.lazy="intro"></textarea>