搜索到
1
篇与
的结果
-
事件处理 1.事件的基本使用使用v-on:click="xxx" 或@click="xxx"绑定事件，xxx是事件名事件的回调需要配置在methods对象中，最终会在vm上methods中配置的函数，不要用箭头函数，this的作用域会被改变methods中配置的函数都是是被Vue所管理的函数，this的指向是vm或组件实例对象@click="xxx" 和 @click="xxx($event)" 的作用一样，后者可以传参<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> <!-- <button v-on:click="showInfo">点我提示信息</button>--> <button @click="showInfo">点我提示信息（不传参）</button> <button @click="showInfo1('孙笑川', $event)">点我提示信息1（传参）</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo() { alert("抽象！"); }, showInfo1(value, event) { console.log(value,event); alert("你好，" + value); } } }) </script> </body> </html>2.事件修饰符prevent：阻止默认事件（常用）；stop：阻止事件冒泡（常用）；once：事件只触发一次（常用）；capture：使用事件的捕获模式；self：只有event.target是当前操作的元素时才触发事件；passive：事件的默认行为立即执行，无需等待事件回调执行完毕；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件修饰符</title> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo{ height: 50px; background-color: skyblue; } .box{ padding: 5px; background-color: skyblue; } .box1{ padding: 5px; background-color: lightpink; } .list{ width: 200px; height: 200px; background-color: azure; overflow: auto; } li{ height: 100px; } </style> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> <!-- 阻止默认事件 --> <a href="https://www.wangchouchou.com" @click.prevent="showInfo">点我提示信息</a> <!-- 阻止事件冒泡 --> <div class="demo" @click="showInfo"> <button @click.prevent.stop="showInfo">点我提示信息</button> <!-- 先阻止默认事件，再阻止冒泡事件（修饰符可以连续写） --> <!---- <a @click.prevent.stop="showInfo">点我提示信息</a> --> </div> <!-- 事件只触发一次 --> <button @click.once="showInfo">点我提示信息</button> <!-- 使用事件的捕获模式 --> <div class="box" @click.capture="showMsg(1)"> div1 <div class="box1" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件 --> <div class="demo" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 --> <!-- wheel 鼠标滚轮 scroll 滚动条 --> <ul class="list" @wheel.passive="demo"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo(e) { //阻止事件默认行为，此处为点击后不跳转 //e.preventDefault(); alert("抽象！"); console.log(e.target) }, showMsg(msg) { console.log(msg) }, demo() { for (let i = 0; i < 100000; i++) { console.log('@') } console.log("循环执行完毕") } } }) </script> </body> </html>3.键盘事件常用的按键别名回车 enter删除 delete （捕获”删除“和”退格“按键）退出 esc空格 space换行 tab（必须配合keydown使用）上 up下 down左 left右 rightVue未提供别名的按键，可以使用原始的key值绑定，需转换为kebab-case（短横线命名）系统修饰键：ctrl、alt、shift、meta配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发配合keydown使用：正常触发事件可以使用keycode指定具体的按键Vue.config.keyCode.自定义键名 = 键码，可以定制按键别名<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> <!-- keydown 按下 keyup 按下松手 @keyup.ctrl.y 只有ctrl + y才触发事件 --> <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo(e) { //原始判断 // if (e.keyCode !== 13) { // return; // } else { // console.log(e.target.value) // } console.log(e.target.value) } } }) </script> </body> </html>
