Vue2(笔记04) - Vue核心 - 事件处理 - 基本使用、事件修饰符、键盘事件

基本使用

Vue里的事件基本应用；

需求1，点击按钮提示信息：

<div id="root">
    <h2>welcome, {{name}}</h2>
    <button v-on:click = "showInfo">点我提示信息</button>
</div>

​​v-on:click="showInfo"​​ 是Vue绑定事件的指令语法；

意思是：当点击这个 btn 的时，调用 showInfo 函数，事件函数也叫方法，所以写在 methods 里；

const vm = new Vue({
    el: "#root",
    data: {
        name: "jack"
    },
    methods: {
        showInfo(e){
            alert('nice to meet you.');
            console.log(e);
            console.log(e.target);
            console.log(e.target.innerText);
            console.log(this);         // 此处的 this 是vm
            console.log(this === vm);  // this 指向 vm
        }
    },
});

页面效果：

点击按钮：弹框也没有问题；

原生JS里事件也会返回 event 对象，Vue也是可以，看控制台结果：

分别是：事件对象，点击对象，对象文本，this对象和this指向的 vm；

注意：

这里使用了普通函数，没有使用箭头函数，​​showInfo:(e)=>{}​​ ；

是因为箭头函数里没有自己的 this ，会指向 window ；普通函数里的 this 指向 Vue 实例对象；

所以，接受 Vue 管理的函数，一般都写成普通函数就行，​​showInfo(){}​​; 

---

需求2：点击按钮传递参数；

<div id="root">
    <h2>welcome, {{name}}</h2>
    <button @click="showInfo1">点我(不传参)</button>
    <button @click="showInfo2($event,66)">点我(传参)</button>
</div>

注意1：绑定事件函数 ​​v-on:click​​​ 可以简写成： ​​@click​​；

注意2：传递参数的时候，需要保留关键字 ​​$event​​，不写就接收不到了；其他参数写后边就行；

const vm = new Vue({
    el: "#root",
    data: {
        name: "jack"
    },
    methods: {
        showInfo1(e) {
            console.log("nice to meet you.");
        },
        showInfo2(e, index) {  // 默认接收 event 事件对象参数，和其他参数；
            console.log(e.target);
            console.log("@index:", index);
        }
    },
});

看页面效果：

分别点击按钮：

---

问题：观察vm中的数据和函数有何不同？

name 是做了数据代理，来自 _data，用来绑定数据的，是有可能会变化的；

函数是不用做数据代理的，因为函数是直接拿来使用的方法，不用修改；

---

【事件的基本使用】：

1）使用 ​​v-on:xxx​​​ 或 ​​@xxx​​ 绑定事件，其中 xxx 是事件名；

2）事件的回调需要配置在 methods 对象中，最终会在 vm 上；

3）methods 中配置的函数，不要使用箭头函数！否则 this 就不是 vm 了；

4）methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或组件实例对象；

5）​​@click="demo"​​​ 和 ​​@click="demo($event)"​​ 效果一样，但后者可以传参，其中 $event 是关键字，默认事件对象，其他参数写后面；

事件修饰符

需求1：阻止默认行为

<div id="root">
    <h2>welcome, {{name}}</h2>
    <a :href="url" @click.prevent="showInfo">{{webSite}}</a>
</div>

提示：之前讲过，绑定数据​​v-bind:​​​ 可以简写 ​​:​​；

提示：绑定事件，使用 ​​v-on:click​​​ 可以简写成 ​​@click​​；

注意： ​​prevent​​ 是阻止默认行为的关键字，用链式写法跟在绑定事件后，在这里是阻止 a 跳转；

像 prevent 这种关键字，在 Vue 里叫修饰符，共有6个，见总结；

const vm = new Vue({
    el: "#root",
    data: {
        name: "jack",
        webSite:"51CTO",
        url:"https://www.51cto.com"
    },
    methods: {
        showInfo(e) {
            // e.preventDefault();    // 原生JS里阻止默认行为的语句；
            console.log("nice to meet you.");
        },
    },
});

看下效果：

连续点击 a 标签，不会跳转，还能在控制台正常输出；

---

【Vue中的事件修饰符】：

1）prevent ：阻止默认事件（常用）；

2）stop：阻止事件冒泡（常用）；

3）once：事件只触发一次（常用）；

4）capture：使用事件的捕获模式；

5）self：只有 event.target 是当前操作的元素时才触发事件；

6）passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

---

需求2：阻止事件冒泡

<div id="root">
    <h2>hi, {{name}}</h2>
    <div class="demo" @click="showInfo">
        <button @click.stop="showInfo">点击欢迎</button>
    </div>
</div>

外层 div 加了点样式，在这里省略了；

提示：button 和 外层的 div 都有绑定事件，点击按钮会触发冒泡；

注意：在绑定事件​​ @click​​ 后，跟 ​​stop​​ 修饰符，可阻止按钮冒泡；

const vm = new Vue({
    el: "#root",
    data: {
        name: "jack",
    },
    methods: {
        showInfo(e) {
            // e.stopPropagation();  // 原生JS阻止冒泡
            console.log("nice to meet you.");
        },
    },
});

看下效果：

---

需求3：事件只触发一次

有时，点了一次，事件触发，再点一次就不希望再触发了；

<div id="root">
    <h2>hi, {{name}}</h2>
    <div class="demo" @click="showInfo">
        <button @click.once="showInfo">点击欢迎</button>
    </div>
</div>

直接使用上面的代码，只需要修改 修饰符 为 ​​once​​即可；

---

需求4：使用事件的捕获模式

事件的捕获是由外向内，事件的冒泡是由内向外，事件的触发顺序是先捕获后冒泡；

事件的默认模式是冒泡，要修改事件的默认模式，就需要添加 修饰符；

<div id="root">
    <h2>hi, {{name}}</h2>
    <div class="box1" @click="showMsg('div1')">div1
        <div class="box2" @click="showMsg('div2')">div2</div>
    </div>
</div>

提示：当前是两个嵌套的 div ，都绑定了事件，再没做修饰符的情况下，事件是冒泡模式；

const vm = new Vue({
    el: "#root",
    data: {
        name: "jack",
    },
    methods: {
        showMsg(msg) {
            console.log(msg);
        },
    },
});

在未加 修饰符 的情况下，点击 div2 会如何？

看效果和结果：

冒泡模式，由内向外；点击 div2 ，那 div2 先触发，冒泡到 div1 ，所以输出顺序是如结果所示；

现在，加个事件捕获模式的修饰符：

<div id="root">
    <h2>hi, {{name}}</h2>
    <div class="box1" @click.capture="showMsg('div1')">div1
        <div class="box2" @click="showMsg('div2')">div2</div>
    </div>
</div>

注意：给 div1 加上了 开启事件捕获 模式的修饰符 ​​capture​​ 后，那 div1 就变成了捕获模式；

这时，再点击 div2 会如何？

看效果和结果：

虽然点击的是 div2 ，但因为 div1 开启了捕获模式，所以由外向内先触发，之后才是 div2 的冒泡模式被触发；

---

需求5：只有 event.target 是当前操作的元素时才触发事件

<div id="root">
    <h2>hi, {{name}}</h2>
    <div class="demo" @click="showInfo">
        <button @click="showInfo">欢迎你</button>
    </div>
</div>

没有绑定修饰符，点击按钮会触发事件冒泡。

const vm = new Vue({
    el: "#root",
    data: {
        name: "jack",
    },
    methods: {
        showInfo(e) {
            console.log(e.target);
        },
    },
});

看效果：

点的是按钮，加上冒泡，就会输出两次 ​​e.target​​；

要的是 e.target 的触发事件，那不是 e.target 的就不会触发了，所以把 ​​selft​​ 修饰符绑给外层 div。

<div id="root">
    <h2>hi, {{name}}</h2>
    <div class="demo" @click.self="showInfo">
        <button @click="showInfo">欢迎你</button>
    </div>
</div>

绑给外层 div ，点击按钮后，执行 showInfo ，冒泡到上层 div ，div 一看，不是当前 e.target ，所以算了，不触发了；

键盘事件

给按键绑定监听；Vue 键盘事件两个： ​​@keyup​​​ 和 ​​@keydown​​；

@keyup：表示键盘按下并抬起时触发；

@keydown：表示键盘按下时触发；

按键别名：捕获常用的按键；

​​enter​​​(回车)，​​delete​​​(删除，捕获“删除”和“退格”两个键)，​​esc​​​(退出)；

​​space​​​(空格)，​​tab​​(换行，此键按下后跳走了，可以和 ​@keydown​ 用)；

​​up​​​(上)，​​down​​​(下)，​​left​​​(左)，​​right​​(右)；

系统修饰键：相对特殊些；

​​ctrl​​​ ，​​alt​​​ ，​​shift​​​ ，​​meta​​ 

1）配合 ​​@keyup​​ 使用：按下修饰键的同时(ctrl)，再按下其他键(x)，随后释放键，事件才被触发；

2）配合 ​​@keydown​​ 使用：正常触发事件；

---

需求1：按下回车提示输入

<div id="root">
    <h2>welcome, {{name}}</h2>
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>

提示：绑定了键盘事件 ​​@keyup​​​ ，又加了一个回车别名 ​​enter​​；

const vm = new Vue({
    el: "#root",
    data: {
        name: "jack",
    },
    methods: {
        showInfo(e) {
            //if(e.keyCode !== 13) return   // 除了回车，都中断
            console.log(e.target.value);  // 输出键盘的输入
        },
    },
});

以前可以使用 e.keyCode 来判断键盘对应的键值数字的方法来确定按键，此功能已被废弃；

如果没有这个判断，每敲一次键盘就会触发一次键盘事件，显示不满足需求；​

看效果：

控制台显示，在文本框中输入内容后，敲回车键，显示完整结果；

其他常用键的用法类似：​​@keyup.xxx="showInfo"​​

可以分别使用 ​​delete​​ ，​​esc​​​，​​space​​ 等挨个试一下，都是可以的；

---

其他按键怎么用？

除了一些常用的按键外，还想使用其他按键，怎么办？

键盘上，任何一个按键都有自己的名字和编码，可以用 ​​console.log(e.key,e.keyCode)​​ 查看；

键名绑定

字母键：（a,65）,（b,66）,（c,67）；

数字键：（1,49）,（2,50）,（3,51）；

方向键：（ArrowUp, 38）,（ArrowDown, 40）,（ArrowLeft, 37）,（ArrowRight, 39）

其他键：（Enter 13）,（Delete 46）,（Backspace 8）,（Escape 27）,（Control 17）,（Shift 16）,（Alt 18）,（CapsLock 20）,（Control 17）,（Tab 9）

​绑定按键别名时，使用 ​​@keyup.xxx="showInfo"​​​ 格式就行，如：​​@keyup.Delete="showInfo"​​

键名组合词绑定

有些是组合单词，像 ArrowUp 或 CapsLock 这种大驼峰命名的，就要拆开来写(首字母大小写都行)：

​​@keyup.Caps-Lock="showInfo"​​​ 或 ​​@keyup.caps-lock="showInfo"​​ 

键值绑定（不推荐）

​这种方式已经不推荐使用了，因为各类键盘的键值可能不同，而且 e.keyCode 方法被废弃了；

​​@keyup.13="showInfo"​​​  和 ​​@keyup.enter="showInfo"​​ 一样的；

自定义别名（不推荐）

​​Vue.config.keyCodes.huiche = 13 ​​

这种，给回车的键值，又取了个自定义别名： huiche ；不推荐，我感觉这么做是闲的；

---

事件总结

修饰符链式使用

<div id="root">
    <div class="demo" @click="showInfo">
        <a href="http://www.51cto.com" @click.prevent.stop="showInfo">51CTO</a>
    </div>
</div>

提示：要阻止默认行为，还要阻止冒泡，就可以使用链式修饰符；

注意：​@click.prevent.stop​ 或 ​@click.stop.prevent​ 效果一样，但先后有别；

new Vue({
    el:'#root',
    methods: {
        showInfo(e){
            console.log(e.target.innerText);
        }
    },
});

键盘事件中的小技巧

<div id="root">
    <h2>welcome, {{name}}</h2>
    <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.x="showInfo">
</div>

提示：特殊键绑定 ​​@keyup​​时，配合其他键组合使用，比如：ctrl+x 就可以写成 ​@keyup.ctrl.x​

const vm = new Vue({
    el: "#root",
    data: {
        name: "jack",
    },
    methods: {
        showInfo(e) {
            //if(e.keyCode !== 13) return   // 除了回车，都中断
            console.log(e.target.value);  // 输出键盘的输入
        },
    },
});