Vue事件处理（事件修饰符 键盘事件）

Vue中的事件修饰符：1.prevent:阻止默认事件（常用）2.stop: 阻止事件冒泡（常用）3.once: 事件只触发一次（常用）4.capture: 使用事件的捕获模式5.self:只有event.target是当前操作的元素时才触发的事件 target：触发事件6.passsive: 事件的默认行为是立即执行，无需等待事件回调执行完毕7.修饰符也可以连用

<div id="root"><h2>欢迎来到{{name}}学习</h2><!-- .prevent阻止默认事件 --><a href="" @click.prevent="showInfo">点击我会提示</a><!-- stop: 阻止事件冒泡（常用）只能阻止在这个触发事件上的冒泡 --><div @click="showInfo"><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我阻止冒泡</button></div></div><!-- once:事件只触发一次（常用） --><button @click.once="showInfo">点我只触发一次</button><!-- capture: 使用事件的捕获模式 --><div class="demo2" @click.capture="showMsg($event,1)">div1<div class="demo3" @click="showMsg($event,2)">div2</div></div><!-- 5.self:只有event.target是当前操作的元素时才触发的事件 target：触发事件--><div class="demo2" @click.self="showMsg($event,1)">div1<div class="demo3" @click="showMsg($event,2)">div2</div></div></div></body><script>const vm = new Vue({el: "#root",data: function () {return {name: "尚硅谷",};},methods: {showInfo(e) {alert(e.target.innerText);// e.stopPropagation(); //阻止冒泡,可以阻止这个触发事件上的所有冒泡e.preventDefault(); //阻止调用回调函数后的默认事件},showMsg(e, message) {console.log(e.target);console.log(message);},},});</script>

1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。4.也可以使用keyCode去指定具体的按键（不推荐）5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名6.ctrl.y:按键可以连用，表示ctrl键+y键

<div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车键提示输入" @keyup.caps-lock="showInfo" /></div></body><script>const vm = new Vue({el: "#root",data: {name: "尚硅谷",},methods: {showInfo(e) {//通过键盘值确定鼠标点击的哪个按钮，开启鼠标事件// e.key获取键名，e.keyCode获取ASCLL码，// if (e.key !== "CapsLock") return;// else console.log(e.target.value);console.log(e.target.value);},},});</script>