【Vue2.0学习】—事件处理和事件修饰符（三十二）
事件处理
事件的基本使用：
1、使用v-on:XXX或@XXX绑定事件，其中XXX是事件名
2、事件的回调需要配置在methods对象中，最终会在vm身上
3、methods中配置的函数，不要使用箭头函数，使用箭头函数指向window,否则就是vm
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参
<!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>初识Vue</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
<!--
事件的基本使用：
1、使用v-on:XXX或@XXX绑定事件，其中XXX是事件名
2、事件的回调需要配置在methods对象中，最终会在vm身上
3、methods中配置的函数，不要使用箭头函数，使用箭头函数指向window,否则就是vm
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参
-->
</head>
<body>
<div id="root">
<h1>欢迎来到{{name}}</h1>
<!-- <button v-on:click="showInfo">欢迎来到湖南</button> -->
<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,22)">点我提示信息2(传参)</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: { //数据供el所指定的容器去使用
name: '湖南'
},
methods: {
showInfo1(event) {
//console.log(event.target.innerText);
alert('长沙欢迎你')
// console.log(this) //此处的this是vm
},
showInfo2(event, number) {
//console.log(event.target.innerText);
alert('长沙欢迎你')
// console.log(this) //此处的this是vm
}
}
});
</script>
</body>
</html>
Vue中的事件修饰符
1、prevent：阻止默认事件（常用）
2、stop：阻止事件冒泡（常用）
3、once：事件只触发一次（常用）
4、capture：使用事件的捕获形式
5、self：只有event.target是当前操作的元素时才是触发事件
6、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>
<script src="../js/vue.js"></script>
<style>
div {
margin-top: 35px;
}
button {
margin-top: 20px;
}
.demo {
height: 50px;
background-color: skyblue;
}
.div1 {
background-color: skyblue;
height: 100px;
}
.div2 {
background-color: orange;
height: 50px;
}
.light {
width: 200px;
height: 200px;
background-color: peru;
overflow: auto
}
li {
height: 200px;
}
</style>
</head>
<!--
Vue中的事件修饰符
1、prevent：阻止默认事件（常用）
2、stop：阻止事件冒泡（常用）
3、once：事件只触发一次（常用）
4、capture：使用事件的捕获形式
5、self：只有event.target是当前操作的元素时才是触发事件
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
-->
<body>
<div id="root">
<h2>欢迎来到{{name}}</h2>
<!-- 1、prevent：阻止默认事件（常用） -->
<a href="http://www.baidu.com" @click.prevent="show">点我提示信息</a>
<!-- 2、stop：阻止事件冒泡（常用） -->
<div class="demo" @click="show">
<button @click.stop="show">点我提示信息</button>
</div>
<!-- 3、once：事件只触发一次（常用） -->
<button @click.once="show">点我提示信息</button>
<!-- 4、capture：使用事件的捕获形式 -->
<div class="div1" @click="showmesg(1)">
div1
<div class="div2" @click="showmesg(2)">
div2
</div>
</div>
<!-- 5、self：只有event.target是当前操作的元素时才是触发事件
-->
<div class="demo1" @click.self=" show">
<button @click="show">点我提示信息</button点我提示信息</button>
</div>
<!--
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
-->
<!-- 滚动条@scroll -->
<!-- <ul @scroll="demo" class="light"> -->
<!-- 滚轮@wheel -->
<ul @wheel="demo" class="light">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
name: '北京'
},
methods: {
show(e) {
//阻止跳转
// e.preventDefault();
alert('哈哈哈');
},
showmesg(msg) {
console.log(msg);
},
demo() {
console.log('滚动');
}
}
})
</script>
</body>
</html>
