三，事件绑定
事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名”
事件名可以是原生也可以是自定义的。注意函数的定义也要在Vue中，采用methods属性
3.1，在事件对应的方法中获取到事件对象
加括号，加括号一般是需要有额外参数的情况。
<!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>vue2</title> </head> <body> <div id="app"> <form action=""> <div> <table border="1"> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr> <tr v-for="(stu,index) in person.studentArray"> <td>{{index+1}}</td> <td>{{stu.name}}</td> <td>{{stu.age}}</td> <td><button type="button" @click="fun1($event,stu.name)">修改</button></td> </tr> </table> </div> </form> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { person:{ studentArray:[ {name:"小豪",age:"18"}, {name:"导哥",age:"20"} ], }, } }, methods:{ // 声明了一个叫fun1的方法 fun1(event,name){ console.log("事件对象",event); console.log(name); }, } }) </script> </html>
3.1，事件修饰符-阻止冒泡
冒泡发生的情景：子元素和父元素绑定了相同的事件，然后点击了子元素，父元素也触发了该事件
使用原生js阻止冒泡
<!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>vue2</title> </head> <body> <div id="app"> <div @click="fun3"> 外层div <div @click="fun3">里层div</div> </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 methods:{ fun3(event){ console.log("sss"); event.stopPropagation(); // 使用原生js阻止冒泡 }, } }) </script> </html>
使用vue事件的修饰符阻止冒泡
<!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>vue2</title> </head> <body> <div id="app"> <div @click="fun3"> 外层div <div @click.stop="fun3">里层div</div> </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 methods:{ fun3(event){ console.log("sss"); // event.stopPropagation(); // 使用原生js阻止冒泡 }, } }) </script> </html>
3.2，事件修饰符-阻止默认行为
有些标签是由默认行为的，比如a标签，有个默认的页面跳转。
使用原生js阻止默认行为
<!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>vue2</title> </head> <body> <div id="app"> <a href="http://www.baidu.com" @click="fun5">百度</a> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 methods:{ fun5(event){ alert("不可跳转！") event.preventDefault(); // 使用原生js阻止默认行为 }, } }) </script> </html>
使用vue的事件修饰符阻止默认行为
<!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>vue2</title> </head> <body> <div id="app"> <a href.prevent="http://www.baidu.com" @click="fun5">百度</a> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 methods:{ fun5(event){ alert("不可跳转！") // event.preventDefault(); // 使用原生js阻止默认行为 }, } }) </script> </html>
3.3，一次事件
此事件只会执行一次，第二次点击无效
<!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>vue2</title> </head> <body> <div id="app"> <div @click.once="fun7">一次事件</div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 methods:{ fun7(event){ console.log("sss"); }, } }) </script> </html>
3.3，键盘事件修饰符
键盘事件修饰符，主要筛选输入特定字符才触发。
<!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>vue2</title> </head> <body> <div id="app"> <!-- 13表示是输入enter，起的keycode值可以查询 --> <input type="text" @keyup.13="change"> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 methods:{ change(event){ console.log(event.key,event.keyCode); } } }) </script> </html>
