学习Vue时候随手写的东西-2
本文最后更新于:2023年6月25日 晚上
事件绑定
事件修饰符
为了使用方便,Vue 为v-on
提供了事件修饰符。修饰符是用.
表示的指令后缀,包含以下这些:
.stop
//event.stopPropagation()
.prevent
//event.preventDefault()
.self
.capture
.once
.passive
1 |
|
使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。
因此使用@click.prevent.self
会阻止元素及其子元素的所有点击事件的默认行为而@click.self.prevent
则只会阻止对元素本身的点击事件的默认行为。
.capture
、.once
和.passive
修饰符与原生addEventListener
事件相对应:
1 |
|
.passive
修饰符一般用于触摸事件的监听器,可以用来改善移动端设备的滚屏性能。
请勿同时使用.passive
和.prevent
,因为.passive
已经向浏览器表明了你不想阻止事件的默认行为。
如果你这么做了,则.prevent
会被忽略,并且浏览器会抛出警告。
按键修饰符
在监听键盘事件时,我们经常需要检查特定的按键。Vue允许在v-on
或@
监听按键事件时添加按键修饰符。
1 |
|
Vue 为一些常用的按键提供了别名:
.enter
.tab
.delete
(捕获“Delete”和“Backspace”两个按键).esc
.space
.up
.down
.left
.right
你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。.ctrl
.alt
.shift
.meta
请注意,系统按键修饰符和常规按键不同。与keyup
事件一起使用时,该按键必须在事件发出时处于按下状态。
换句话说,keyup.ctrl
只会在你仍然按住ctrl
但松开了另一个键时被触发。若你单独松开ctrl
键将不会触发。
.exact
修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。
1 |
|
侦听器
侦听数据源类型
watch
的第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性)、一个响应式对象、一个getter
函数、或多个数据源组成的数组:
1 |
|
希望本文章能够帮到您~