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>
事件触发后的页面效果：
