目录
一、事件
1. 绑定事件
2. event事件对象
3. 修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 捕获阶段触发
.self 只在自身(ev.target)触发事件,
.once 只执行一次
.passive 默认行为立即触发,不需等待函数执行完毕 => 感觉不成功(不怎么用)
滚动事件,滚动条执行是等待事件函数执行完毕之后会触发
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 300px;
overflow: auto;
}
p {
height: 150px;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @scroll.passive="handlewhell">
<p>{
{name}}</p>
<p>{
{age}}</p>
<div @click.once="handl">
<p>1523</p>
<button @click="handleClick">点击触发</button>
</div>
</div>
</div>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
// 存储数据位置
data: {
name: "pxr",
age: 18,
sex: "nba"
},
// 存储函数位置
methods: {
handleClick(ev) {
console.log(ev);
},
// 父级事件
handl(ev) {
console.log(ev.target);
},
// 滚轮事件
handlewhell(){