【Vue】基础系列（六）事件处理 - 绑定监听 - 事件修饰符 - 按键修饰符
事件处理
在 Vue.js 中，事件处理是响应用户交互的核心功能之一。通过绑定事件监听器、使用事件修饰符和按键修饰符，可以轻松实现灵活的交互逻辑。
绑定监听
在 Vue 中，通过 v-on 指令或其缩写 @ 来绑定事件监听器。例如：
<button @click="handleClick">点击我</button>
在这个例子中，当用户点击按钮时，会触发 handleClick 方法。
methods: {
handleClick() {
alert('按钮被点击了');
}
}
事件的基本使用：
- 使用
v-on:xxx或@xxx绑定事件，其中xxx是事件名；
例如：v-on:click 或 @click
事件的回调需要配置在
methods对象中，最终会在vm上methods中配置的函数，不要用箭头函数！否则this就不是vm了methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或 组件实例对象；@click="demo"和@click="demo($event)"效果一致，但后者可以传参；
事件对象 默认事件形参: event 隐含属性对象: $event
$event就是当前触发事件的元素，即使不传$event，在回调函数中也可以使用event这个参数。
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
示例代码
<body>
<div id="demo">
<h1>1. 绑定监听</h1>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3">test3</button>
<button @click="test4(123, $event)">test4</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {},
methods: {
test1() {
alert("hahah");
},
test2(msg) {
alert(msg);
},
test3(event) {
alert(event.target.innerHTML);
},
test4(number, event) {
alert(number + '—' + event.target.innerHTML);
}
}
})
</script>
</body>
事件修饰符
事件修饰符允许你修改事件处理程序的默认行为。这些修饰符包括 .stop, .prevent, .capture, .self, .once 等。
prevent：阻止默认事件（常用）；event.preventDefault()stop：阻止事件冒泡（常用）；event.stopPropagation()once：事件只触发一次（常用）；capture：使用事件的捕获模式；self：只有event.target是当前操作的元素时才触发事件；passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件修饰符</title>
<!– 引入Vue –>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<!–
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
–>
<!– 准备好一个容器–>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!– 阻止默认事件（常用） –>
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡（常用） 这将阻止点击事件冒泡到父元素。-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!-- 修饰符可以连续写 -->
<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时才触发事件； -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'super'
},
methods:{
showInfo(e){
alert('同学你好！')
// console.log(e.target)
},
showMsg(msg){
console.log(msg)
},
demo(){
for (let i = 0; i < 100000; i++) {
console.log('#')
}
console.log('累坏了')
}
}
})
</script>
</html>
按键修饰符
Vue 提供了按键修饰符，用于监听键盘事件，并指定响应的按键。这些修饰符包括 .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right 等。
Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta
配合
keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。配合
keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
<!– 任何按键按下都会触发回调函数 –>
<textarea @keyup="testKeyup"></textarea>
<!– 下面的两种写法效果是一致的 –>
<!– 使用按键码，回车键的keyCode是13 –>
<textarea @keyup.13="testKeyup"></textarea>
<!– 使用按键修饰符，因为回车键比较常用，所以vue为他设置了名称，可以直接使用enter来代替 –>
<textarea @keyup.enter="testKeyup"></textarea>
示例代码
<body>
<div id="demo">
<h1>3. 按键修饰符</h1>
<input type="text" @keyup.13="test8">
<input type="text" @keyup.enter="test8">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {},
methods: {
test8(event) {
// if(event.keyCode===13){ // 原来的做法
// alert(event.target.value);
// }
alert(event.target.value);
}
}
})
</script>
</body>
