Vue学习—深入剖析v-on指令

一、v-on指令

1.使用

• v-on 指令可以监听 DOM 事件，并在触发时运行一些 JavaScript 代码
• 事件类型由参数指定

<div id="app">
    <button v-on:click='count+=1'>点击+1</button>
    <p>被点击了{{ count }}次</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0
        }
    });
</script>

• 但是很多事件处理逻辑是非常复杂的，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。所以 v-on 还可以接收一个需要调用的方法名称。

<div id="app">
    <button v-on:click='addCount'>点击+1</button>
    <p>被点击了{{ count }}次</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            addCount(){
                this.count += 1;
                console.log(e.target);
            }
        }
    });
</script>

• methods中的函数，也会直接代理给Vue实例对象，所以可以直接运行
  
• 除了直接绑定到一个方法，也可以在内联JavaScript 语句中调用方法：
• 在内联语句中使用事件对象时，可以利用特殊变量 $event:

<div id="app">
    <button v-on:click='addCount(2,$event)'>点击+1</button>
    <p>被点击了{{ count }}次</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            addCount(n,e){
                this.count += n;
                console.log(e.target);
            }
        }
    });
</script>

• 可以绑定动态事件，Vue版本需要2.6.0+

<div id="app">
    <button v-on:[event]="addCount(2)">点击，弹出1</button>
    <p>被点击了{{ count }}次</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0,
            event: 'click'
        },
        methods: {
            addCount(n) {
                this.count += n;
            }
        }
    })
</script>

• 可以不带参数绑定一个对象，Vue版本需要2.4.0+。
  { 事件名：事件执行函数 }
  使用此种方法不支持函数传参&修饰符

<div v-on="{ mousedown: doThis, mouseup: doThat }"></div>

• v-on指令简写：@

<div id="app">
    <button @click="addCount(2)">点击，弹出1</button>
    <p>被点击了{{ count }}次</p>
</div>

2.为什么在 HTML 中监听事件?

1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试
3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们

二、v-on修饰符

这里修饰符很多，不用过多记忆，保留一定印象，遇到问题时翻阅笔记即可

1.事件修饰符

1.stop

调用 event.stop，阻止事件冒泡

<div id="app">
    <div @click="alert('div')" :style="{backgroundColor: 'red'}">
        <button @click.stop="alert('button')">点击</button>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            alert(str) {
                alert(str);
            }
        }
    });
</script>

2.prevent

调用 event.preventDefault()，阻止默认事件

<div id="app">
    <form @submit.prevent="onSubmit">//提交时页面不再刷新
        <input type="submit">
    </form>
    <!-- 也可以只有修饰符 -->
    <form @submit.prevent>
        <input type="submit">
    </form>
    </div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            onSubmit() { 
                console.log('submit'); 
            }
        }
    });
</script>

3.capture

事件捕获模式

<div id="app">
    <div @click.capture="alert('div')" :style="{backgroundColor: 'red'}">
        <button @click="alert('button')">点击</button>//会先触发div
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            alert(str) {
                alert(str);
            }
        }
    });
</script>

4.self

只当事件是从侦听器绑定的元素本身触发时才触发回调

<div id="app">
    <div @click.self="alert('div')" :style="{backgroundColor: 'red'}">//冒泡时不再触发
        <button @click="alert('button')">点击</button>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            alert(str) {
                alert(str);
            }
        }
    });
</script>

5.once

只触发一次回调（2.1.4新增）

点击两次button按钮，只弹出一次button
<div id="app">
  <button @click.once="alert('button')">点击</button>
</div>

6.passive

设置 addEventListener 中的 passive 选项，能够提升移动端的性能（2.3.0新增）

//手机浏览器，如果不监听默认事件，则屏幕内容跟着手指滑动，否则等滑动结束后屏幕再滑动
<div @click.passive="handleClick" :style="{backgroundColor: 'red'}"></div>

即使在触发触摸事件时，执行了一个空的函数，也会让页面卡顿。因为浏览器不知道监听器到底会不会阻止默认事件，所以浏览器要等到执行完整个函数后，才能决定是否要滚动页面。passive事件监听器，允许开发者告诉浏览器，监听器不会阻止默认行为，从而浏览器可以放心大胆的滚动页面，这样可以大幅度提升移动端页面的性能，因为据统计只有20%的触摸事件会阻止默认事件。
.passive 会告诉浏览器你不想阻止事件的默认行为

注意

1. 使用修饰符时，顺序很重要。相应的代码会以同样的顺序产生。因此，
   v-on:click.prevent.self 会阻止所有的点击的默认事件
   v-on:click.self.prevent 只会阻止对元素自身点击的默认事件
2. 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

2.按键修饰符

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

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

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

1.按键码

使用 keyCode 特性也是允许的：

<!-- 按回车键会触发执行submit函数 -->
<input v-on:keyup.13="submit">

注意：keyCode 的事件用法已经被废弃了，并可能不会被最新的浏览器支持。

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter（回车键）
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space （空格键）
• .up （箭头上键）
• .down （箭头下键）
• .left（箭头左键）
• .right（箭头右键）

除了使用Vue提供的按键别名之外，还可以自定义按键别名：

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

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // 小驼峰 不可用
  mediaPlayPause: 179,
  // 取而代之的是 短横线分隔 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}

<input type="text" @keyup.media-play-pause="method">

3.系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态，换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

• .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 -->
<input @keyup.alt.67="clear">

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

4.exact 修饰符

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

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

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

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

5.鼠标按钮修饰符

• 仅当点击特定的鼠标按钮时会处理执行函数
• 2.2.0 +
• .left
• .right
• .middle