v-on: 事件处理简写@，及修饰符

news2024/11/16 7:50:46

v-on 是 Vue中用于绑定事件的指令。它可以绑定许多不同的事件，如：

click：鼠标点击事件
input：输入框内容变化事件
keydown：按键按下事件
keyup：按键松开事件
submit：表单提交事件
mouseover：鼠标悬浮事件
mouseout：鼠标移出事件
change：输入框内容改变事件
focus：获得焦点事件
blur：失去焦点事件
scroll：滚动事件

等，v-on:可以简写为@

1. 绑定监听的方式:

v-on:xxx="fun"

@xx事件名="fun"

@x事件名="fun(参数)"

默认事件形参: event

隐含属性对象: $event

2. 事件修饰符:

.prevent : 阻止事件的默认行为 event.preventDefault()

.stop : 停止事件冒泡 event.stopPropagation()

.once: 事件响应一次

3. 按键修饰符

.keycode : 操作的是某个keycode值的健

.enter : 操作的是enter键

<template>
  <div style="font-size: 14px">
    <h2>1. 绑定监听</h2>
    <button @click="handleClick1">测试点击自带的event</button>
    <button @click="handleClick2('click事件1')">测试点击传入的参数</button>
    <button @click="handleClick3('click事件+$event', $event)">测试点击传入的$event参数</button>   
    <span>测试多个事件</span>
    <input type="text" v-model="msg"
    @mouseover="handleMouseover"
    @mouseout="handleMouseout"
    @change="handleChange"
    @keyup="handleClickKeyup"
    @focus="handleFocus"
    @blur="handleBlur"
    >
    <br>

    <h2>2. 事件修饰符</h2>
    <!-- 
      停止事件冒泡
      阻止事件的默认行为
      事件监听只响应一次
    -->
    <div style="width: 200px; height: 200px; background: red;" @click="handleClick4">
      <div style="width: 100px; height: 100px; background: green;" @click.stop="handleClickStop"></div>
    </div>

    <a href="http://www.baidu.com" @click.prevent="handleClickPrevent">百度一下</a>
    <button @click.once="handleClickOnce">只响应一次点击</button>

    <h2>3. 按键修饰符</h2>
    <!-- vue2.0版本语法 可以使用 @keyup.13 代替@keyup.enter -->
    <span>按下回车触发</span>
    <input type="text" v-model="msg2" @keyup.enter="handleClickKeyupEnter">
  </div>
</template>

<script lang="ts">
// vue3.0版本语法
import { defineComponent , ref} from "vue";
export default defineComponent({
  name: "组件名",
  setup() {
    const msg = ref('');
    const msg2 = ref('');
    // click事件
    const handleClick1 = (event) => {
      console.log(event.target.innerHTML)
    }
    const handleClick2 = (text) => {
      console.log('测试点击传入的参数',text);
    };
    const handleClick3 = (text, event) => {
      console.log('测试点击传入的参数$event',text, event);
    };
    // -   `mouseover`：鼠标移入事件
    // -   `mouseout`：鼠标移出事件
    const handleMouseover = () => {
      console.log('鼠标移入');
    };
    const handleMouseout = () => {
      console.log('鼠标移出');
    };
    // -   `change`：输入框内容改变事件
    const handleChange = () => {
      console.log('输入框内容改变');
    };
    // -   `focus`：获得焦点事件
    const handleFocus = () => {
      console.log('获得焦点');
    };
    // -   `blur`：失去焦点事件
    const handleBlur = () => {
      console.log('失去焦点');
    };

    // 事件修饰符
    const handleClick4 = () => {
      console.log('测试点击触发了 外层');
    };
    const handleClickStop = () => {
      console.log('测试点击触发了stop修饰符');
    };
    const handleClickPrevent = () => {
      console.log('测试点击触发了prevent修饰符');
    };
    const handleClickOnce = () => {
      console.log('测试点击触发了once修饰符');
    };

    // 按键修饰符
    const handleClickKeyup = (key) => {
      console.log('按键触发了Keyup',key);
    };
    const handleClickKeyupEnter = () => {
      console.log('按键触发了Enter');
    };

    return {
      msg,msg2,
      handleClick1,handleClick2,handleClick3,
      handleClick4,handleClickStop,handleClickPrevent,
      handleClickOnce,handleClickKeyup,handleClickKeyupEnter,
      handleMouseover,handleMouseout,handleChange,handleFocus,handleBlur
    };
  },
});
</script>