第一章 Vue核心 第七节 事件处理
7.1 事件的基本使用
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
4.@click="demo" 和 @click="demo($event)" 效果一致，但是后者可以传参。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的基本使用</title> <!--引入Vue--> <script src="../lib/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <h1>姓名：{{name}}</h1> <h1>年龄：{{age}}</h1> <!--下面两个效果相同--> <button v-on:click="showInfo">点我1</button> <button @click="showInfo">点我2</button> <!--传递参数--> <button @click="showInfoPrams($event,66)">传参</button> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ name:'retrace', age:21 }, methods:{ showInfo(event){//此处的this是vm console.log(event.target); }, showInfoPrams(event,prams){ console.log('传参：'+prams); } } }); </script> </body> </html>
7.2 事件修饰符
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"> <title>事件修饰符</title> <!--引入Vue--> <script src="../lib/vue.js"></script> <style type="text/css"> *{ margin: 20px; } .demo1{ width: 150px; height: 100px; background: antiquewhite; } .box1{ padding: 10px; background: aquamarine; } .box2{ padding: 10px; background: orange; } .list{ width: 200px; height: 200px; background: beige; overflow: auto; } .list li{ height: 100px; } </style> </head> <body> <!--准备好一个容器--> <div id="root"> <h1>姓名：{{name}}</h1> <h1>年龄：{{age}}</h1> <!--阻止默认事件（常用）--> <a href="https://www.baidu.com" @click.prevent="showInfo">点我去百度搜索</a> <!--阻止事件冒泡（常用）--> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息</button> <!--修饰符可以连续写--> <a href="https://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a><!--先阻止冒泡再阻止事件--> <a href="https://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a><!--先阻止事件再阻止冒泡--> </div> <!--事件只触发一次（常用）--> <button @click.once="showInfo">只有第一次点我才会提示哦</button> <!--使用事件的捕获模式--> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!--只有event.target是当前操作元素时才触发事件--> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> <!--事件的默认行为立即执行，无需等待事件回调执行完毕--> <ul @wheel.passive="demo" class="list"> <!--scroll 监听滚动条 wheel 监听鼠标滚轮--> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ name:'retrace', age:21 }, methods:{ showInfo(event){//此处的this是vm //event.preventDefault(); 阻止默认事件 alert(event.target); }, showMsg(msg){ console.log(msg); }, demo(e){ for (let i = 0; i < 1000; i++) { console.log('工作'); } console.log('累坏了！') } } }); </script> </body> </html>
7.3 键盘事件
1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown使用)
上 => up
下 => down
左 => left
右 => right
//切换大小写 caps-lock
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case （短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时再按下其他键，随后释放其他键，事件才触发
(2).配合keydown使用：正常触发
4.也可以使用keyCode去指定具体的按键（不推荐） #keyup.13 => 回车
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件</title> <!--引入Vue--> <script src="../lib/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <h1>姓名：{{name}}</h1> <h1>年龄：{{age}}</h1> <input type="text" placeholder="按下回车提示输入..." @keyup.enter="showInfo"/> <input type="text" placeholder="按下Ctrl+Y提示输入..." @keyup.ctrl.y="showInfo"/><!--按下Ctrl+y触发--> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ name:'retrace', age:21 }, methods:{ showInfo(e){//此处的this是vm //if(e.keyCode === 13) console.log(e.target.value); } } }); </script> </body> </html>
浙公网安备 33010602011771号