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="; @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>

事件触发后的页面效果：