Vue学习：09-事件绑定

一、事件绑定指令

我们可以使用v-on:指令 (简写为@) 来监听 DOM 事件，并在事件触发时执行对应的JavaScript

用法：v-on:click=""或 @click=""

App.vue

<script setup>

import { ref } from 'vue';

let volume = ref(5)  //音量[0,10]

//增大音量
function addVolume() {
  //如果不是最高值，则添加音量
  if(volume.value !== 10) {
    volume.value++
  }
}

//减小音量
function subVolume() {
  //如果不是最小值，则减少音量
  if(volume.value !== 0) {
    volume.value--
  }
}

//设置音量
function setVolume(value) {
  //判断音量是否在取值范围内
  if(value >= 0 && value <= 10) {
    volume.value = value
  }
}

</script>

<!-- 视图区域（view） -->
<template>
  <h3>当前音量：{{ volume }}</h3>

  <!-- v-on:事件绑定 -->
  <button v-on:click="addVolume">添加音量</button>
  <button v-on:click="subVolume">减小音量</button>

  <hr>
  <!-- @是v-on:的缩写 -->
  <button @click="setVolume(0)">静音</button>
  <button @click="setVolume(5)">适中</button>
  <button @click="setVolume(10)">最大</button>
</template>

<style>
  
</style>

二、事件修饰符

事件修饰符	说明
.prevent	阻止默认行为
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身时触发事件处理函数
.passive	向浏览器表明了不想阻止事件的默认行为

1、.prevent

.prevent：阻止该事件的默认行为

App.vue

<script setup>

import { ref } from 'vue';

//打招呼
function say(name) {
  window.alert('你好：' + name)
}


</script>

<!-- 视图区域（view） -->
<template>
 <!-- .prevent修饰符阻止了超链接的默认行为（跳转到百度页面） -->
 <a href="http://www.baidu.com" @click.prevent="say('baidu')">百度</a>
</template>

<style>
  
</style>

2、.stop

.stop：阻止事件产生的冒泡现象

App.vue

<script setup>

import { ref } from 'vue';

//打招呼
function say(name) {
 console.log('你好：' + name)
}

</script>

<!-- 视图区域（view） -->
<template>
 <div class="divArea" @click="say('DIV')">
  <!-- .stop:阻止产生冒泡事件 -->
  <button @click.stop="say('BUTTON')">冒泡按钮</button>
 </div>
</template>

<style>
  .divArea {
    padding: 30px;
    border: 2px solid blue;
  }
</style>

3、.once

.once：绑定的事件只触发1次

App.vue

<script setup>

import { ref } from 'vue';

//打招呼
function say(name) {
 console.log('你好：' + name)
}

</script>

<!-- 视图区域（view） -->
<template>
 <button @click.once="say('BUTTON')">点我试一下</button>
</template>

<style>
  
</style>

4、.self

.self：只有在event.target是当前元素自身时触发事件处理函数

App.vue

<script setup>

import { ref } from 'vue';

//打招呼
function say(name) {
 console.log('你好：' + name)
}

</script>

<!-- 视图区域（view） -->
<template>
 <div class="divArea" @click.self="say('DIV')">
  <button>我是一个普通的按钮</button>
 </div>
</template>

<style>
  .divArea {
    padding: 30px;
    border: 2px solid blue;
  }
</style>

5、.capture

.capture给元素添加一个监听器

1. 当元素事件产生冒泡时，先触发的是该修饰符的元素的事件

2. 如果有多个该修饰符，则由外向内依次触发

App.vue

<script setup>

import { ref } from 'vue';

//打招呼
function say(name) {
 console.log('你好：' + name)
}

</script>

<!-- 视图区域（view） -->
<template>
 <div class="divArea" @click.capture="say('DIV-1')">
  <div class="divArea" @click="say('DIV-2')">
    <div class="divArea" @click.capture="say('DIV-3')">
      <button>我是一个普通的按钮</button>
    </div>
  </div>
 </div>
</template>

<style>
  .divArea {
    padding: 30px;
    border: 2px solid blue;
  }
</style>

6、.passive

.passive：不阻止事件的默认行为，与.prevent不要同时使用

App.vue

<script setup>

import { ref } from 'vue';

function eventPrevent() {
  //阻止事件默认行为
  event.preventDefault()
}

</script>

<!-- 视图区域（view） -->
<template>
 <a href="http://www.baidu.com" @click.passive="eventPrevent">百度</a>
</template>

<style>
  
</style>

三、按键修饰符

1、键盘按键修饰符

按键别名：.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕获Delete和Backspace两个按键)

系统修饰符：.ctrl、.alt、.shift、.meta

准确的修饰符：.exact 允许控制触发一个事件所需的确定组合的系统按键修饰符

App.vue

<script setup>

import { ref } from 'vue';

function showMessage(message) {
  alert(message)
}

</script>

<!-- 视图区域（view） -->
<template>
 按下的键中包含Enter键：<input type="text" @keydown.enter="showMessage('你按下了Enter键！')">
 <hr>
 按下的键中包含Shift Enter键：<input type="text" @keydown.enter.shift="showMessage('你按下了Enter键和Shift键！')">
 <hr>
 按下的键只有Shift Enter键：<input type="text" @keydown.enter.shift.exact="showMessage('你只按下了Enter键和Shift键！')">
</template>

<style>
  
</style>

2、鼠标按键修饰符

按键别名：.left、.right、.middle

App.vue

<script setup>

import { ref } from 'vue';

function showMessage(message) {
  alert(message)
}

</script>

<!-- 视图区域（view） -->
<template>
  <button @mousedown.right="showMessage('按下的是鼠标右键')">鼠标右键按下</button>
  <hr>
  <button @mousedown.middle="showMessage('按下的是鼠标中键')">鼠标中键按下</button>
  <hr>
  <button @mousedown.left="showMessage('按下的是鼠标左键')">鼠标左键按下</button>
</template>

<style>
  button {
    border: none;
    padding: 15px 20px;
  }
 
</style>