Vue 事件修饰符和按键修饰符用法总结
本篇文章主要介绍了 Vue 事件修饰符和按键修饰符的用法总结，旨在帮助开发者更好地理解和使用这些修饰符，以提高开发效率和代码质量。
一、事件修饰符
事件修饰符是 Vue.js 提供的一种机制，用于简化事件处理程序中的代码。通过在 v-on 指令后添加一个点（.）和修饰符名称，可以在事件处理程序中调用修饰符。常见的事件修饰符有：
* .prevent：阻止事件的默认行为
* .stop：阻止事件冒泡
* .capture：捕获事件
* .self：事件只触发在当前元素上
* .once：事件只触发一次
例如：<div @click.prevent="doThis">点击父元素 <a v-on:click.stop="doThis">点击子元素 </a> </div>
在上面的代码中，点击父元素时，执行 doThis 函数，并阻止事件的默认行为；点击子元素时，执行 doThis 函数，并阻止事件冒泡。
二、按键修饰符
按键修饰符是 Vue.js 提供的一种机制，用于简化键盘事件的监听。通过在 v-on 指令后添加一个点（.）和按键名称，可以在键盘事件中调用按键修饰符。常见的按键修饰符有：
* .enter：回车键
* .tab：制表键
* .delete：删除键
* .esc：退出键
* .space：空格键
* .up：上箭头键
* .down：下箭头键
* .left：左箭头键
* .right：右箭头键
例如：<input v-on:keyup.enter="submit"> 或 <input @keyup.enter="submit">
在上面的代码中，回车键被按下时，执行 submit 函数。
三、自定义按键修饰符
Vue.js 允许开发者自定义按键修饰符别名。通过在 Vue.config.keyCodes 对象中添加按键修饰符别名，可以扩展 Vue.js 的按键修饰符功能。
例如：Vue.config.keyCodes.f1 = 112
四、鼠标或键盘事件监听修饰符
Vue.js 2.1.0 及更高版本中，添加了新的修饰符，用于开启鼠标或键盘事件监听，使在按键按下时发生响应。这些修饰符包括：
* .ctrl
* .alt
* .shift
* .meta
例如：<input @keyup.alt.67="clear"> 或 <div @click.ctrl="doSomething">Do something</div>
在上面的代码中，Alt + C 键被按下时，执行 clear 函数；Ctrl + 点击时，执行 doSomething 函数。
Vue 事件修饰符和按键修饰符是 Vue.js 提供的一种强大且灵活的机制，旨在帮助开发者更好地处理事件和键盘事件，提高开发效率和代码质量。
