(九)、事件处理(v-on)
1.⭐JS原生按钮事件的获取⭐
这里我们发现，当我们点击按钮事件的时候。我们的数据会调用一个箭头函数，这个函数会自带一个event事件的这个函数。我们可以通过这个函数获取点击按钮的value值信息。
- 存在 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>Document</title> </head> <body> <button id="btn">点我</button> <script type="text/javascript"> var bttn=document.getElementById('btn'); bttn.onclick=(event)=>{ //当我们点击按钮的时候会带用这个箭头函数 console.log(event); } </script> </body> </html>
2.七大常用事件处理
- 标准事件 (v-on)
- 简写事件 ( : )
- 传递参数 (event,数据)
- 阻止默认行为 （@click.prevent）
- 阻止冒泡 (@click.stop)
- 阻止默认行为+阻止冒泡 (@click.stop.prevent)
- 键盘事件 (@keyup.enter)
标准事件 (v-on)⭐ - 我们这里不能用箭头函数 否则会导致this转变
- 绑定的函数 show() 可以加括号
<!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> </head> <body> <div id="root"> <h1>欢迎来找{{msg}}玩耍</h1> <!-- 绑定事件 ---标准方式 --> <button v-on:click="show1()">点我打印信息1 (v-on)</button> <!-- 这里我们可以写为 show1() 或则 show1 都可以进行调用 --> <br><br> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { msg: '吉士先生' }, methods: { // 用于配置Vue的方法 show1: function (event) { // 这里千万不要用 箭头函数 show1:()=>{}, 因为假如我们使用箭头函数，那么我们的this会变成window alert('信息1'); console.log(this); // 这里的this 是指 Vue的实列，vm } </script> </body> </html>
简写事件⭐
- 我们可以使用@ 代替 v-on:
- 暗藏着一个事件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>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>欢迎来找{{msg}}玩耍</h1> <!-- 绑定事件 ---简写方式 --> <button @click="show2">点我打印信息1 (@)</button> <br><br> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { msg: '吉士先生' }, methods: { // 用于配置Vue的方法 show2(event){ alert('信息2'); console.log(event.target.innerText); //我们可以使用这个event的这些方法，通过这些方法我们可以进行打印出来button的value值 }); </script> </body> </html>
传递参数⭐
- 传递参数我们需要在绑定事件处添加($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>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>欢迎来找{{msg}}玩耍</h1> <!-- 绑定事件 --- 传递参数 --> <button @click="show3($event,654)">点我打印信息2 + 传递的参数</button> <!-- 我们传递参数的时候，需要在前面保证event,能够传递进去。所以我们要进行$event --> <br><br> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { msg: '吉士先生' }, methods: { // 用于配置Vue的方法 show3(event,number){ console.log(event); // 打印看看是否存在event这个事件 alert('信息3---'+number); } }); </script> </body> </html>
阻止默认行为⭐
- 我们可以添加修饰符.pervent进行阻止
<!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> </head> <body> <div id="root"> <h1>欢迎来找{{msg}}玩耍</h1> <!-- 绑定事件 --- 阻止默认行为 prevent 叫事件修饰符--> <a href="https://www.baidu.com" @click.prevent="show4">点我打印信息4 (阻止默认行为)</a> <br><br> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { msg: '吉士先生' }, methods: { // 用于配置Vue的方法 show4(event){ // event.preventDefault(); //靠程序员进行手动阻止默认行为 alert('信息4'); } }); </script> </body> </html>
阻止冒泡⭐
- 我们可以使用stop进行阻止冒泡
<!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> </head> <body> <div id="root"> <h1>欢迎来找{{msg}}玩耍</h1> <div @click="show5"> <button @click.stop="show5">点我打印信息5 (阻止冒泡)</button> </div> <br> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { msg: '吉士先生' }, methods: { // 用于配置Vue的方法 show5(event){ event.stopPropagation(); //靠程序员进行手动阻止冒泡 alert('信息5'); } }); </script> </body> </html>
阻止冒泡+阻止默认行为⭐
- @click.pervent.stop
<!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> </head> <body> <div id="root"> <h1>欢迎来找{{msg}}玩耍</h1> <!-- 绑定事件 ---阻止冒泡及默认行为 事件修饰符都可以连写 并且顺序可以乱写--> <div @click="show6"> <a href="https://www.baidu.com" @click.stop.prevent="show5">点我打印信息6 (阻止冒泡及默认行为)</a> </div><br> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { msg: '吉士先生' }, methods: { // 用于配置Vue的方法 show6(event){ alert('信息6'); //进行阻止冒泡+默认行为 } }); </script> </body> </html>
键盘事件⭐
- 我们可以的使用@keyup.entry/编码
<!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> </head> <body> <div id="root"> <h1>欢迎来找{{msg}}玩耍</h1> <!-- 绑定事件 ---标准方式 --> <button v-on:click="show1()">点我打印信息1 (v-on)</button> <!-- 这里我们可以写为 show1() 或则 show1 都可以进行调用 --> <br><br> <!-- 绑定事件 ---简写方式 --> <button @click="show2">点我打印信息1 (@)</button> <br><br> <!-- 绑定事件 --- 传递参数 --> <button @click="show3($event,654)">点我打印信息2 + 传递的参数</button> <!-- 我们传递参数的时候，需要在前面保证event,能够传递进去。所以我们要进行$event --> <br><br> <!-- 绑定事件 --- 阻止默认行为 prevent 叫事件修饰符--> <a href="https://www.baidu.com" @click.prevent="show4">点我打印信息4 (阻止默认行为)</a> <br><br> <!-- 绑定事件 ---阻止冒泡 stop 叫做事件修饰符--> <div @click="show5"> <button @click.stop="show5">点我打印信息5 (阻止冒泡)</button> </div> <br> <!-- 绑定事件 ---阻止冒泡及默认行为 事件修饰符都可以连写 并且顺序可以乱写--> <div @click="show6"> <a href="https://www.baidu.com" @click.stop.prevent="show5">点我打印信息6 (阻止冒泡及默认行为)</a> </div><br> <!-- 键盘事件 @keyup.键值/keyCode编码。编码兼容性强，尽量用编码 --> <input type="text" placeholder="按下回车提示数据7" @keyup.enter="show7"> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { msg: '吉士先生' }, methods: { // 用于配置Vue的方法 show1: function (event) { // 这里千万不要用 箭头函数 show1:()=>{}, 因为假如我们使用箭头函数，那么我们的this会变成window alert('信息1'); console.log(this); // 这里的this 是指 Vue的实列，vm }, show2(event){ alert('信息2'); console.log(event.target.innerText); //我们可以使用这个event的这些方法，通过这些方法我们可以进行打印出来button的value值 }, show3(event,number){ console.log(event); // 打印看看是否存在event这个事件 alert('信息3---'+number); }, show4(event){ // event.preventDefault(); //靠程序员进行手动阻止默认行为 alert('信息4'); }, show5(event){ event.stopPropagation(); //靠程序员进行手动阻止冒泡 alert('信息5'); }, show6(event){ alert('信息6'); //进行阻止冒泡+默认行为 }, show7(event){ // 程序员需要自己判断按键 // if (event.keyCode !==13){ //event.keyCode 是指按键的编码，编码13是回车键 // return; // }else{ // alert(event.target.value); //展示文本框中的数据 // } alert(event.keyCode); //查看按键的编码 } } }); </script> </body> </html>
