Vue3学习笔记：Day6 事件处理

使用v-on（简写为@）指令绑定组件事件，触发一些JavaScript的函数或者语句

绑定事件

绑定单个事件

在Vue中绑定事件语法是@click="JavaScript语句或方法"，在可以将事件绑定为任意的方法或者在其中绑定任意的JavaScript语句，虽然在JavaScript语句中也可以使用方法，但区别是：直接调用方法的时候不用写括号，使用JavaScript语句时候需要加上括号

直接绑定方法，greet是定义在methods内的方法

<div id="event-with-method">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">Greet</button>
</div>

使用JavaScript内联方法，say也是定义在methods内的方法

<div id="inline-handler">
  <button @click="say('hi')">Say hi</button>
  <button @click="say('what')">Say what</button>
</div>

使用第二种方法可以传入参数，如果在处理时需要访问原始ＤＯＭ事件，可以将特殊变量$event当作变量传入方法

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

绑定多个事件

多个事件中间使用,分隔

<button @click="one($event), two($event)">
  Submit
</button>

修饰符

事件修饰符

Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop ：阻止事件冒泡，子结点事件触发后，不再触发父节点事件
• .prevent ：阻止事件发生，点击表单或链接后不触发
• .capture ：如果事件处于冒泡队列时，将修饰的事件提升到第一个
• .self ：绑定事件到自身，不参与事件的冒泡
• .once ：事件只触发一次
• .passive ：在滚动时，先执行滚动操作在执行JavaScript代码，防止滚动时的卡顿

详情

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止元素本身及其子元素的点击的默认行为，而 @click.self.prevent 只会阻止对元素自身的点击的默认行为。

按键修饰符

好像只能使用在表单元素上

使用@keyup绑定键盘按下的事件，通过修饰符.some-key来修饰按下的按键，some-key是KeyboardEvent事件中key属性的短横线式命名法

查看KeyboardEvent事件中key属性可以将事件传入函数中打印出来

<input type="text" @keyup="getInput($event)">

methods: {
    getInput(e){
        console.log(e);
    }
}

可以在控制台中看到

KeyBoardEvent{
    code: "KeyA",
    keyCode: 65,
    key: "a"
}

所以要选中只触发这个按键，可以使用.a修饰符

按键别名

Vue 为最常用的键提供了别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统修饰键

• .ctrl
• .alt
• .shift
• .meta

meta 键在windows键盘上为win键，mac键盘上为command键

系统修饰键不仅仅可以使用在按键keyup事件上，也可以和其他事件一起使用

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

但是在使用时存在缺陷，如第二个例子中使用Ctrl+Left可以触发，同样使用Ctrl+Shift+Left 也可以触发，所以可以使用.exact修饰符精确的控制触发事件的条件

鼠标按钮修饰符

• .left
• .right
• .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。