vue-事件处理

2022-02-02 13:59:38 作者：互联网

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>

标签：事件处理,vue,keyup,keydown,键盘,事件,按键,回调
来源： https://blog.csdn.net/sharp0016/article/details/122769047