Vue修饰符

一、事件修饰符

1.  vue普通点击事件

<a v-on:click="fun"></a>  <!-- 完整写法 -->
<a @click="fun"></a>    <!-- 简写 不带参数 -->
<a @click="fun(参数)"></a>    <!-- 简写 带参数 -->

2. vue修饰符：.stop 阻止事件冒泡

//点击child区域时只会执行函数sayChild，不会执行函数sayFather
<div class="father" @click="sayFather">
  <div class="child" @click.stop="sayChild">
  </div>
</div>

3. vue修饰符：.prevent 阻止事件默认行为

//阻止a标签跳转，仅执行函数f1
<a href="http://www.baidu.com" @click.prevent="f1">百度一下</a>   
//阻止表单提交，仅执行函数tf2
<form  action="/xxx"   @submit.prevent="f2">   
    <input type="submit" value="注册">
</form>

4. vue修饰符：.capture 使用事件捕获模式

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

5. vue修饰符：.self 只当在 event.target 是当前元素自身时触发处理函数

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

6. vue修饰符：.once 事件将只会触发一次

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

7. vue修饰符：.passive 告诉浏览器你不想阻止事件的默认行为

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

注意：修饰符可以串联，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

二、v-model的修饰符

<!--  .lazy ：默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步  -->
<input v-model.lazy="msg">
<!--  .number ： 自动将用户的输入值转化为数值类型  -->
<input v-model.number="msg">
<!--   .trim ： 自动过滤用户输入的首尾空格  -->
<input v-model.trim="msg">

三、键盘事件的修饰符

//按下enter时，执行方法f4，keyup后面跟的是键盘code，例如：enter是code==13的键别名
<input type="text" @keyup.enter="f4"> 等价于 <input type="text" @keyup.13="f4">
//全部按键别名
    .enter   .tab   .delete (捕获“删除”和“退格”键)   .esc   .space   
    .up   .down   .left    .right
//修饰键，可以和按键同时使用，包括：.ctrl  .alt  .shift   .meta

<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

<!-- Alt + C -->
<input @keyup.alt.67="clear">