Vue2.0学习—事件处理和事件修饰符（三十二）
Posted 王同学要努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.0学习—事件处理和事件修饰符（三十二）相关的知识，希望对你有一定的参考价值。
【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>
以上是关于Vue2.0学习—事件处理和事件修饰符（三十二）的主要内容，如果未能解决你的问题，请参考以下文章