**
vue-事件处理
**
一般使用v-on来进行事件监听，在监听DOM事件时会触发一部分的js代码。
-
使用v-on:xxx或@xxx绑定事件，xxx指 事件名。 事件的回调要写在methods对象中，最终会放在vm上。
2. 中的函数由Vue管理，函数中的this指向vm或组件实例。
3. methods中的函数一定不要写成箭头函数，一旦写成箭头函数，函数中的this就不再是vm了。
@click="showInfo"click="showInfo($event)"效果一致，但后者可以传参。
事件修饰符
-
prevent，阻止默认事件，同event.preventDefault()。
-
stop，阻止事件冒泡，同event.stopPropagation()。
-
once，事件只会触发一次。
-
capture，捕获阶段触发事件。
-
self，event.target是当前操作元素时才会触发事件，即event.target ==
event.currentTarget返回true时。
-
passive，事件的默认行为会立即执行，无需等待事件回调执行完毕。
滚轮事件（不加修饰符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>demo1</title>
<script src="../js/vue.js"></script>
<style>
.list{
width: 200px;
height: 200px;
background: peru;
overflow: scroll;
}
.item{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<ul class="list" @wheel="showInfo">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
methods:{
showInfo(){
for (let index = 0; index < 100000; index++) {
console.log("#");
}
}
}
});
</script>
</body>
</html>
向下滚动滚轮触发事件，执行回调showInfo，showInfo执行完后，滚动条才会往下滑动。
滚轮事件（加修饰符passive）
<div id="root">
<ul class="list" @wheel.passive="showInfo">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
@wheel.passive时，滚动滚轮触发事件，滚动条会立即滑动，不用等回调showInfo执行完。
键盘修饰符
- enter。如 @keyup.enter，键盘事件keyup发生且按键是回车键shagn（Enter）时，执行回调。
- .delete。如@keyup.delete，键盘事件keyup发生且按键是删除键（Delete或Backspace）时，执行回调
- .esc。如@keyup.esc，键盘事件keyup发生且按键是退出键（Esc）时，执行回调。
- .space。如@keyup.space，键盘事件keyup发生且按键是空格键时，执行回调。
- .up。如 @keyup.up，键盘事件keyup发生且按键是向上键（↑）时，执行回调。
- .down。如@keyup.down，键盘事件keyup发生且按键是向下键（↓）时，执行回调。
- .left。如@keyup.left，键盘事件keyup发生且按键是向左键（←）时，执行回调。
- .right。如@keyup.right，键盘事件keyup发生且按键是向右键（→）时，执行回调。
- .tab。如@keydown.tab，键盘事件keydown发生且按键是tab键时，执行回调。
系统修饰符 - ctrl。如，@keydown.ctrl，键盘事件keydown发生且按键是ctrl键（Ctrl）时，执行回调。
- shift。如，@keydown.shift，键盘事件keydown发生且按键是Shift键（Shift）时，执行回调。
- alt。如，@keydown.alt，键盘事件keydown发生且按键是alt键（Alt时，执行回调。
- meta。如，@keydown.meta，键盘事件keydown发生且按键是meta键（⊞）时，执行回调。
多个修饰符 - .stop.prevent，先阻止冒泡，再阻止默认行为。
<!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>demo1</title>
<script src="../js/vue.js"></script>
<style>
.container{
background-color: skyblue;
width: 200px;
height: 100px;
}
.content{
padding-top: 50px;
}
</style>
</head>
<body>
<div id="root">
<div class="container" @click="showInfo">
<div class="content">
<a href="http://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a>
</div>
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
methods:{
showInfo(){
alert("Hello");
}
}
});
</script>
</body>
</html>
- .ctrl.y。如@keyup.ctrl.y，键盘事件keyup发生且按键同时有Ctrl键和Y键时，执行回调。
<!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>demo1</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" @keyup.ctrl.y="showInfo">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
methods:{
showInfo(e){
console.log(e.target.value);
}
}
});
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
