事件的绑定

v-on:事件类型="方法名 / 表达式 / 简单语句"，缩写为 @事件类型="方法名 / 表达式 / 简单语句"

<div id="app">
    <input type="text" v-model="num">
    <button @click="removes">-</button>
    <button @click="add">+</button>
</div>

let app = new Vue({
    el: '#app',
    data: {
        num: 100
    },
    methods: { // methods 里存放方法，this 指向当前 vue 实例
        removes() {
            this.num--;
        },
        add() {
            this.num++;
        }
    }
});

• 无参数时，不用写 ()，写上 () 就是调用函数
• 如果想调用事件函数时传递参数，可以在绑定事件时直接调用方法并传入参数

<input type="text" v-model="num">
<button @click="removes(2)">-2</button>
<button @click="add(2)">+2</button>

let app = new Vue({
    el: '#app',
    data: {
        num: 100
    },
    methods: { // methods 里存放方法，this 指向当前 vue 实例
        removes(val) {
            this.num -= val;
        },
        add(val) {
            this.num += val;
        }
    }
});

<button @click="fun1(), fun2()">绑定多个函数</button>
<!-- 注意：这里的函数名后有 () -->

let vm = new Vue({
    el: "#app",
    methods: {
        fun1() {
            console.log("first");
        },
        fun2() {
            console.log("second");
        }
    }
});

<button @click="num--">-</button>
<input type="text" v-model="num">
<button @click="num++">+</button>

let app = new Vue({
    el: '#app',
    data: {
        num: 100
    }
});

事件对象

<div id="app"> <button @click="fun">事件对象</button> </div>

let vm = new Vue({
    el: "#app",
    methods: {
        fun(event) {
            console.log("事件对象", event);
        }
    }
});

<button @click="fun(1, $event)">事件对象</button>

let vm = new Vue({
    el: "#app",
    methods: {
        fun(a, ev) {
            console.log(a, ev);
        }
    }
});

事件修饰符

<a href="https://www.baidu.com" @click.prevent="fun">百度链接（阻止默认事件）</a>

fun() {
    console.log("默认事件已被阻止！");
}

<div @click.once="fun">once 的使用</div>

fun() {
    console.log("事件只触发一次！");
}

<div class="father" @click="funFa">
    点击 father，则触发 funFa
    <div class="son" @click="funSon">点击 son，则先触发 funSon 然后触发 funFa</div>
</div>

<!-- 通过 stop 阻止冒泡 -->
<div class="father" @click="funFa">
    点击 father，则触发 funFa
    <div class="son" @click.stop="funSon">点击 son，则只触发 funSon</div>
</div>

funFa() {
    console.log("father");
},
funSon() {
    console.log("son");
}

<div class="father" @click="funFa">
    点击 father，则触发 funFa
    <div class="son" @click="funSon">点击 son，则先触发 funSon 然后触发 funFa</div>
</div>

<!-- 通过 capture 在捕获阶段触发事件 -->
<div class="father" @click.capture="funFa">
    点击 father，则触发 funFa
    <p class="son" @click="funSon">点击 son，则先触发 funFa 然后触发 funSon</p>
</div>

<div class="father" @click="funFa">
    点击 father，则触发 funFa
    <div class="son" @click="funSon">点击 son，则先触发 funSon 然后触发 funFa</div>
</div>

<!-- 通过 self 设置事件的触发 -->
<div class="father" @click.self="funFa">
    点击 father，则触发 funFa
    <p class="son" @click="funSon">点击 son，则触发 funSon</p>
</div>

一般配合滚动使用：

• scroll 滚动条滚动时触发
• wheel 滚轮滚动时触发

默认情况下，后续相同事件的触发，会在回调函数执行完毕之后

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

不要将 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为

<div class="wrap" @contextmenu.once.prevent="fun">
    阻止右键一次默认事件
</div>

fun() {
    console.log("右键默认事件已被阻止");
}

注意：使用顺序不同，达到的效果也不同

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

可指定 event.key = Enter (event.keyCode = 13) 时触发

<input type="text" @keyup.enter="fun" placeholder="enter">

类似的还有 .delete-退格/删除、.esc-返回、.space-空格、.up-上箭头、.down-下箭头、.left-左箭头、.right-右箭头

注意：event.key 值类似 PageDown 的，需要写成小写字母，单词之间用 - 连接

<!-- 松开 PageDown 键则触发 -->
<input type="text" @keyup.page-down="fun" placeholder="page-down">

tab 键用于切换焦点，需要配合 keydown 事件使用（不能配合 keyup 使用，因为还没触发 keyup，焦点就转移了）

<!-- 松开 tab 键不触发 -->
<input type="text" @keyup.tab="fun" placeholder="keyupTab">
<!-- 按下 tab 键才会触发 -->
<input type="text" @keydown.tab="fun" placeholder="keydownTab">

.ctrl、.alt、.shift、.meta-windows键，这些键都需要配合 keydown 事件使用

<!-- 系统修饰符 按下触发-->
<input type="text" @keydown.ctrl="fun" placeholder="keydownCtrl">
<!-- 系统修饰符 抬起不会触发-->
<input type="text" @keyup.ctrl="fun" placeholder="keyupCtrl">

也可以和非键盘事件一起使用

<button @click.alt="fun">按下 alt 键的同时点击</button>

对于一般键：按下任意键即可触发

<!-- 松开 q / w 键则触发 -->
<input type="text" @keyup.q.w="fun" placeholder=".q.w">

对于系统键：需要同时按下才会触发（组合键）

<!-- 按下 ctrl & enter 键才触发 -->
<input type="text" @keydown.ctrl.enter="fun" placeholder="ctrl.enter">
<!-- 按下 ctrl & a 键才触发 -->
<input type="text" @keydown.ctrl.a="fun" placeholder="ctrl.a">

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

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

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

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

• .left
• .right
• .middle