Vue3.0基础教程：Vue事件监听；v-on指令；事件修饰符；按键修饰符；系统修饰符

Vue3.0 学习笔记 5

监听事件

v-on指令

v-on指令可以用来监听DOM事件，写法如下：

<button v-on:click="young()">young</button><!--标准写法-->
<button @click="young()">young</button><!--简略写法-->

v-on的表达式值是一个可执行的函数，如yong()函数

data(){
    return {
        age:18
    }
},
methods:{
    young(){
        this.age=this.age>0? this.age-1:this.age;
    }
}

传入原始event事件

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

methods: {
  warn(message, event) {
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

v-on指令的参数可以有多个方法

<button @click="young(),youngMore()">young</button>

方法之间通过“,”逗号分隔

事件修饰符

冒泡：后面会涉及到这个概念。所谓的冒泡可以这样理解，一个DOM元素可以嵌套另一个DOM元素，当内层的DOM事件触发时会逐渐向他的父级DOM传递事件，父级又会向他的父级DOM传递事件，这个现象类似于冒泡现象，因此称为冒泡。

.stop

阻止冒泡：即阻止事件向上级DOM元素传递

<div style="width: 200px; height: 200px; background-color: #7CFC00;" @click="one">
  <div style="width: 100px; height: 100px; background-color: cyan;" @click.stop="two"></div>
</div>

methods:{
    one(){
        console.log("one");
    },
    two(){
        console.log("two");
    }
}

点击子div

点击父div

如果不设置stop修饰符点击内层div将会触发父div的事件

.prevent

阻止默认事件的发生，默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。

. capture

捕获冒泡：即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自 然顺序执行触发的事件。

. self

避免自己受到冒泡事件的影响，只有事件作用于自己才会触发。

. once

设置一种事件只能触发一次

. passive

对DOM的默认事件进行性能优化

Vue的事件修饰符支持串联使用，但在使用过程中一定要注意顺序

<a @click.stop.prevent="doThat"></a>

按键修饰符

通过按键修饰符我们可以监听特定的按键，Vue仍然使用v-on或@来实现

<!--监听enter按键事件-->
<input @keyup.enter="submit" />

常用按键别名

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

系统修饰符

/*系统修饰键*/
.ctrl
.alt
.shift
.meta//win对应⊞，Mac对应⌘，meta对应◆

注意修饰键和其他按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。

<input @keyup.ctrl.enter="submit" />

如上，必须按住Ctrl键不放再按enter键后释放才能触发事件

.exact修饰符

允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>


<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>


<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

.left
.right
.middle