vue-事件处理

2022-02-02 13:59:38 阅读：210 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-事件处理

vue-事件处理