1.9 事件处理
1.9.1 事件处理的基本使用
事件的基本使用：
1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名。 2. 事件的回调需要配置在methods对象中，最终会在vm上。 3. methods中配置的函数，不要使用箭头函数，否则this就不是vm了。而是windows。 4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。 5. @click='dome' 和 @click='dome($event)' 和 @click='dome($event,number)' 效果是一样的，但是后者就可以传参。 6. $event 是固定的，不可以修改，这个代表的就是调用这个函数的DOM对象。 复制代码
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>事件处理</title> <!-- 导入Vue.js 文件 --> <script type="text/javascript" src="../../../../../js/vue.js"></script> </head> <body> <!-- 声明一个容器 --> <div id="root"> <h2>欢迎来到清华大学！</h2> <!-- 这段代码代表的函数：当点击这个按钮的时候，会出发鼠标单机事件，之后调用show1()函数--> <!-- 这里使用show1()或者是show的效果是一样的。都会触发这个事件。 但是使用show()的方式不可以在Vue的show(event)中获取到这个使用这个函数DOM对象。 因为当用户在调用的时候传递参数的话，会覆盖掉这个event对象。 而且此时show()中还没有参数，所有输出的event为undefined。 如果输出show(666)，此时输出的数据为666，但是只存在用户输入的数据，event对象消失了。 使用 show($event,666,'cyb')的方式来获取DOM对象以及用户输入的数据(多个数据)。 注意：$event这个值是固定的，不是自定义的，不可以改变，这个$event代表的就是DOM这个对象。 这个event就是这个DOM对象。 使用show的方式可以获取到DOM对象。这个event就是这个dom对象。 如果多个事件调用这个函数，那么可以获取到不同的DOM。 事件处理的时候传递的参数是data中没有的。如果是data中存在的，不用进行传递。 直接在函数中使用 this.data中的数据即课获取到data中的数据。 --> <button v-on:click="show1">Vue1(无参数)</button> <!-- v-on:click的简化写法：v-on:click <==> @click --> <button @click="show2($event,'程云博',2)">Vue2(有参数)</button> <!-- 这里使用的是普通的JavaScript的事件，使用事件句柄的方式或者是脚本块的方式 --> <!-- 在javaScript中使用事件句柄的方式调用函数。 只能使用 show1() 的形式调用，不可以使用show1的方式调用。--> <button onclick="show1()">JavaScript</button> <!-- 总结：在普通的JavaScript中使用 onclick="show()" 的形式(加括号) 在Vue中使用 v-on:click="show" 的形式 (不加括号) --> </div> <!-- 声明一个MV --> <script type="text/javascript"> Vue.config.productionTip = false; /* 注意：我们如果使用Vue的方式来获取函数执行相应的事件，需要将函数写入到Vue对象中。 * 写到这个地方只是一个普通的函数，只是没有使用Vue时纯的JavaScript函数时间处理。 * 得使用事件句柄或者是脚本块的方式来获取的函数处理事件。 * */ function show1(event){ console.log(event); alert("欢迎光临！"); } const vm = new Vue({ el:'#root', /* data用来存储数据 */ data:{ name:'清华大学', /* 我们也可以将函数不写到methods对象中，可以写到data对象中。 但是写到data对象中，vue会对这个函数做数据代理。生成getter/setter方法。 我们此时声明的是函数，只是拿过来给别人调用的，根本不涉及到修改。 所有给函数做数据代理是多余的并且还会降低浏览器的性能。 实际开发中我们就将函数写到 methods对象中，不写到 data对象中。 只有data对象中的数据，才存在数据代理以及数据劫持。 show2(event,string,number){ console.log(event.target); // <button>Vue2</button> console.log(string); // 程云博 console.log(number); // 2 alert("同学您好！"); }*/ }, /* methods用来存储函数，这些函数称为回调函数 */ methods:{ /* 这里是对象中函数的简化写法 省略了 :function*/ /* 在函数中会存在一个参数，这个参数是调用该函数HTML中的DOM对象 */ /*show:(event)=> : 这里不写箭头函数，一旦写了箭头函数，那么this就是windows，而不是Vue对象了*/ // 这个 event是自定义的，获取的是DOM对象。 show1(event){ console.log(event.target); // <button>Vue1</button> console.log(this === vm); // true。此时this是Vue对象。 alert("同学您好！"); }, /* 参数的名字都是自定义的。*/ show2(event,string,number){ console.log(event.target); // <button>Vue2</button> console.log(string); // 程云博 console.log(number); // 2 alert("同学您好！"); } } }) /* * 注意：methods中的所有函数都在vm对象中，和name属性一样。 * 但是此时发生的不是数据代理，这个是函数，是定死的内容，不涉及改变之类的。 * 只是将methods中的函数简单的复制给了 vm 对象。 * * 我们也可以将函数不写到methods对象中，可以写到data对象中。 * 但是写到data对象中，vue会对这个函数做数据代理。生成getter/setter方法。 * 我们此时声明的是函数，只是拿过来给别人调用的，根本不涉及到修改。 * 所有给函数做数据代理是多余的并且还会降低浏览器的性能。 * * 实际开发中我们就将函数写到 methods对象中，不写到 data对象中。 * * 只有data对象中的数据，才存在数据代理以及数据劫持。 * */ </script> </body> </html> 复制代码
1.9.2 事件修饰符
Vue中常见的事件修饰符：
1. prevent：阻止默认事件(常用) 2. stop：阻止事件冒泡(常用) 3. once：事件只触发一次(常用) 4. capture：使用事件的捕获模式。 5. self：只有event.target是当前操作的元素是才触发事件。 6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。 7. stop - 调用 event.stopPropagation()。 8. prevent - 调用 event.preventDefault()。 9. capture - 添加事件侦听器时使用 capture 模式。 10. self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 11. {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 12. native - 监听组件根元素的原生事件。 13. once - 只触发一次回调。 14. left - (2.2.0) 只当点击鼠标左键时触发。 15. right - (2.2.0) 只当点击鼠标右键时触发。 16. middle - (2.2.0) 只当点击鼠标中键时触发。 17. passive - (2.3.0) 以 { passive: true } 模式添加侦听器 复制代码
Vue中使用事件修饰符举例：
<div id="root"> <h2>欢迎来到{{name}}学习！</h2> <!--需求：当触发按钮事件之后，弹出提示框，但是不会跳转到指定的页面。 JavaScript中使用的方式：href="javaScript:void(0)" Vue中添加一个事件修饰符，阻止默认事件的发生。 --> <!-- 阻止默认事件 --> <a href="https://www.baidu.com" @click.prevent="show($event)">阻止默认事件</a> <div class="demo1" @click="show($event)"> <!-- 阻止事件冒泡 可以看出在按钮的外边的div盒子又调用了一次show函数，当用户点击一次按钮的时候， 会调用一次show函数，进行一次弹窗。当点击完按钮， 外边嵌套的div又会调用一次show函数，进行一次弹窗。这就是典型的事件冒泡。 此时就要阻止这个事件冒泡的发生 我们给按钮单机事件加入一个 事件修饰符 stop,就是让这个按钮调用完这个show函数之后， 嵌套这个按钮的盒子就不会在调用这个函数了，阻止函数的调用。 --> <button @click="show.stop($event)">阻止事件冒泡</button> </div> <!-- 事件只触发一次 --> <button @click.once="show($event)">事件只会触发一次</button> <!-- 修饰符可以连续调用 --> <div class="demo1" @click="show($event)"> <!-- 既阻住了网页跳转又阻止了事件冒泡。这两个修饰符谁写在前后都一样，实现的效果都是一样的。 只是调用的顺序不同。 --> <a href="https://www.baidu.com" @click.prevent.stop="show($event)">阻止默认事件和事件冒泡</a> </div> </div> <script type="text/javascript"> Vue.config.productionTip = false; // 阻止 Vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', // el用于指定当前Vue实列为哪个容器服务，值通常为css选择器字符串。 data:{ name:'清华大学' }, methods:{ show(){ alert('同学，你好！'); } } }) </script> </body> </html>
