Vue（七）事件处理
一、基本的事件处理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本的事件</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <!-- 基本的事件： 1.绑定事件使用v-on:XXX（例如v-on:click）指令，可以简写为@XXX的形式 2.事件的回调需要设置在methods对象上，最终会出现在vm上 3.由Vue管理的函数不要使用箭头函数 4.调用函数不传参数时带不带括号都可以，例如 v-on:click="showInfo1" 和 v-on:click="showInfo1()"是一样的； 无参函数，Vue会默认传入一个event，定义函数时 showInfo1(){} 或 showInfo1(event){} 都可以； 但是有参函数，想要传入event就需要使用 $event 传参，例如 @click="showInfo2($event, '张三')" --> <body> <div id="root"> <h1>欢迎来到{{name}}</h1> <!-- v-on:XXX指令用于事件的处理，缩写为@XXX --> <button v-on:click="showInfo1">事件一</button> <button @click="showInfo2($event, '张三')">事件二</button> </div> </body> <script> const vm = new Vue({ el: "#root", data: { name: "JMS的世界" }, methods: { showInfo1(event) { alert("你好，世界！") }, showInfo2(event, name) { alert("你好" + name) } } }) </script> </html>
二、事件的修饰符
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件的修饰符</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <style> * { padding: 10px; } .d1 { margin-top: 10px; background-color: aqua; } .d2 { background-color: antiquewhite; } .d3 { height: 100px; width: 300px; } .d4 { height: 300px; width: 300px; overflow: auto; } </style> <body> <!-- Vue中的时间修饰符： 1.prevent：阻止默认事件的发生（例如a标签的跳转事件） 2.stop：阻止事件冒泡 3.once：事件只触发一次 4.capture：使用事件的捕获模式 5.self：只有event.target是当前操作的元素才能触发事件，也就是不能被其它元素的操作触发 6.passive：默认事件立刻执行，无需事件回调执行完毕 --> <div id="root"> <h1>{{name}}</h1> <div> <!-- 这是一个普通a标签，点击会进行页面的跳转 --> <a :href="url">点我跳转百度1</a> <!-- 使用prevent阻止了默认事件的发生，这个a标签就不会再跳转了 --> <a :href="url" @click.prevent="showInfo1">点我跳转百度2</a> </div> <!-- 使用stop来阻止事件冒泡 点击按钮事件冒泡被阻止，d1和d2的事件不触发 （触发1次事件） 但是点击d2，并没有阻止事件冒泡，所以d2事件触发完成后，冒泡给d1，d1也会触发事件（触发2次事件） --> <div class="d1" @click="showInfo2"> <div class="d2" @click="showInfo2"> <button @click.stop="showInfo2">触发事件2</button> </div> </div> <div> <!-- once使得事件只触发一次，所以第一次触发后事件就失效了 --> <button @click.once="showInfo2">触发一次事件2</button> </div> <!-- 捕获阶段是由外向内 冒泡阶段是由内向外 这里设置d1的事件在捕获阶段就开始执行，所以会先触发d1的事件再触发按钮的事件 --> <div class="d1" @click.capture="showInfo3('最外层')"> <button @click="showInfo3('按钮')">捕获阶段</button> </div> <!-- 这里使用self来修饰d1 和 d2的事件，现在它们不能被事件冒泡触发事件，只有要亲自操作他们本身时，它们的事件才会触发 所以self同样可以阻止事件冒泡 --> <div class="d1" @click.self="showInfo3('最外层')"> <div class="d2" @click.self="showInfo3('中间层')"> <button @click="showInfo3('按钮')">self触发</button> </div> </div> <!-- 这里使用passive来使得默认事件立刻执行 部分事件使用，并不常用 --> <ul class="d4" @scroll.passive="showInfo4"> <li class="d3" style="background-color: antiquewhite;"></li> <li class="d3" style="background-color: aqua;"></li> <li class="d3" style="background-color: aquamarine;"></li> <li class="d3" style="background-color: blueviolet;"></li> </ul> </div> </body> <script> const vm = new Vue({ el: "#root", data: { name: "事件的修饰符", url: "https://www.baidu.com" }, methods: { showInfo1() { alert("跳转到百度") }, showInfo2() { alert("触发了事件2") }, showInfo3(who) { console.log("我是" + who) }, showInfo4() { for (let i = 0; i < 10000; i++) { console.log(i) } } } }); </script> </html>
（本文仅作个人学习记录用，如有纰漏敬请指正）
