事件处理
事件的基本使用：
1、使用v-on:XXX或@XXX绑定事件，其中XXX是事件名
2、事件的回调需要配置在methods对象中，最终会在vm身上
3、methods中配置的函数，不要使用箭头函数，使用箭头函数指向window,否则就是vm
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初识Vue</title> <!-- 引入Vue --> <script src="../js/vue.js"></script> <!-- 事件的基本使用： 1、使用v-on:XXX或@XXX绑定事件，其中XXX是事件名 2、事件的回调需要配置在methods对象中，最终会在vm身上 3、methods中配置的函数，不要使用箭头函数，使用箭头函数指向window,否则就是vm 4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象 5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参 --> </head> <body> <div id="root"> <h1>欢迎来到{{name}}</h1> <!-- <button v-on:click="showInfo">欢迎来到湖南</button> --> <button @click="showInfo1">点我提示信息1（不传参）</button> <button @click="showInfo2($event,22)">点我提示信息2(传参)</button> </div> <script type="text/javascript"> const vm = new Vue({ el: '#root', data: { //数据供el所指定的容器去使用 name: '湖南' }, methods: { showInfo1(event) { //console.log(event.target.innerText); alert('长沙欢迎你') // console.log(this) //此处的this是vm }, showInfo2(event, number) { //console.log(event.target.innerText); alert('长沙欢迎你') // console.log(this) //此处的this是vm } } }); </script> </body> </html>
Vue中的事件修饰符
1、prevent：阻止默认事件（常用） 2、stop：阻止事件冒泡（常用） 3、once：事件只触发一次（常用） 4、capture：使用事件的捕获形式 5、self：只有event.target是当前操作的元素时才是触发事件 6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <style> div { margin-top: 35px; } button { margin-top: 20px; } .demo { height: 50px; background-color: skyblue; } .div1 { background-color: skyblue; height: 100px; } .div2 { background-color: orange; height: 50px; } .light { width: 200px; height: 200px; background-color: peru; overflow: auto } li { height: 200px; } </style> </head> <!-- Vue中的事件修饰符 1、prevent：阻止默认事件（常用） 2、stop：阻止事件冒泡（常用） 3、once：事件只触发一次（常用） 4、capture：使用事件的捕获形式 5、self：只有event.target是当前操作的元素时才是触发事件 6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕 --> <body> <div id="root"> <h2>欢迎来到{{name}}</h2> <!-- 1、prevent：阻止默认事件（常用） --> <a href="http://www.baidu.com" @click.prevent="show">点我提示信息</a> <!-- 2、stop：阻止事件冒泡（常用） --> <div class="demo" @click="show"> <button @click.stop="show">点我提示信息</button> </div> <!-- 3、once：事件只触发一次（常用） --> <button @click.once="show">点我提示信息</button> <!-- 4、capture：使用事件的捕获形式 --> <div class="div1" @click="showmesg(1)"> div1 <div class="div2" @click="showmesg(2)"> div2 </div> </div> <!-- 5、self：只有event.target是当前操作的元素时才是触发事件 --> <div class="demo1" @click.self=" show"> <button @click="show">点我提示信息</button点我提示信息</button> </div> <!-- 6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕 --> <!-- 滚动条@scroll --> <!-- <ul @scroll="demo" class="light"> --> <!-- 滚轮@wheel --> <ul @wheel="demo" class="light"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script> const vm = new Vue({ el: "#root", data: { name: '北京' }, methods: { show(e) { //阻止跳转 // e.preventDefault(); alert('哈哈哈'); }, showmesg(msg) { console.log(msg); }, demo() { console.log('滚动'); } } }) </script> </body> </html>
