常用的事件修饰符(对事件的触发进行控制)
- .prevent 阻止默认行为(如：阻止a链接的跳转、阻止表单的提交等)
- .stop 阻止事件冒泡( 相当于event.stopPropagation )
- .capture 以捕获模式触发当前的事件处理函数
- .once 绑定的事件只触发一次（等同于$once方法）
- .self 只有在event.target是当前元素自身时触发事件处理函数
- .passive 事件的默认行为立即执行，不用等待事件的回调函数执行完毕
- 阻止事件触发时的默认行为，原生js用的是事件对象e的e.preventDefault( )
<div id="app"> <a href="https://www.baidu.com/" @click="show">跳转到百度首页</a> </div>
const vm = new vue({ el: '#app', methods: { show(e){ // 在点击a链接后会跳转到百度首页，我们要阻止这个默认行为，可以用e.preventDefault() e.preventDefault() // 原生js的方式 console.log('点击了a链接') } } })
<div id="app"> <!-- vue的事件修饰符，在给a链接绑定click事件的同时又阻止了a链接默认的跳转行为 --> <a href="https://www.baidu.com/" @click.prevent="show">跳转到百度首页</a> </div>
补充：
- 事件修饰符是可以叠加连写的。如：既要阻止冒泡，又要阻止默认行为，则可以写成<a href="www.baidu.com" @click.stop.prevent="show">点我展示信息
键盘事件
键盘事件有两个，按下按键弹起时触发的keyup( )和按键按下时触发的keydown( )
若要求按下某一个按键才触发事件，则有以下两种方法：
- 在事件处理函数中，通过事件对象获取到触发事件的按键编码(e.keyCode)，然后执行判断，当按键编码e.keyCode不是我想设置的按键编码时，直接return结束这个函数；当e.keyCode等于设置的按键编码，才执行事件处理函数
注意：e.key是获取到按键的名字，e.keyCode是获取到按键的编码
- 通过键盘按键修饰符来实现
在监听键盘事件时，我们经常要判断详细的按键。此时，可以为键盘相关事件添加按键修饰符
<!-- 例子 --> <!-- @keyup绑定键盘事件 --> <!-- 只有在key是Enter时才调用vm.submit() --> <input type="text" @keyup.enter="submit"> <!-- 在输入框中，按下esc键清空输入框内容 --> <!-- 只有在key是esc时才调用vm.clearInput() --> <input type="text" @keyup.esc="clearInput">
const vm = new Vue({ el: '#app', methods: { clearInput(e){ e.target.value = '' // 清空输入框内容 }, submit(){ } } })
补充：
按键修饰符是可以组合着写的，如：<input type="text" @keyup.ctrl.y="show"> 只有当ctrl和y一起按的时候才会触发事件
