事件处理及修饰符

Ciao。

已于 2022-08-14 21:28:59 修改

阅读量87

点赞数

分类专栏： vue2学习文章标签： vue.js

于 2022-08-14 21:27:28 首次发布

本文链接：https://blog.csdn.net/Alive_m/article/details/126336617

版权

vue2学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.绑定监听

事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click="demo"和 @click="demo($event)"效果一致，但后者可以传参；
```
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
```
事件对象
默认事件形参: event
隐含属性对象: $event

注意：$event 就是当前触发事件的元素，即使不传 $event，在回调函数中也可以使用 event 这个参数。

2.事件修饰符

prevent：阻止默认事件（常用）；event.preventDefault()
stop：阻止事件冒泡（常用）；event.stopPropagation()
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

注意：修饰符可以连续写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 100px;
            background-color: #196b69;
        }
        .box1{
            height: 100px;
            background-color: #91c390;
        }
        .box2{
            height: 50px;
            background-color: #90a8c3;
        }
        .list{
            height: 200px;
            width: 150px;
            overflow: auto;
            background-color: pink;
        }
        li{
            height: 100px;
        }
    </style>
    <!--    引入vue-->
    <script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>
<!--准备一个容器-->
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    
<!--   阻止默认事件 -->
    <a href="http://www.atguigu.com" @click.prevent="showInfo">点我哦</a>
    
<!--  阻止事件冒泡 -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我哦</button>
    </div>
    
<!-- 事件只触发一次 -->
    <button @click.once="showInfo">点我哦</button>
    
<!-- 使用事件的捕获模式 -->
    <div class="box1" @click.capture="showMsg(1)">
        div1
       <div class="box2" @click="showMsg(2)">
           div2
       </div>
    </div>
    
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
    <ul class="list" @wheel.passive="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

</div>

<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成提示

    const vm=new Vue({
        el:"#root",
        data:{
            name:"尚硅谷"
        },
        methods:{
            showInfo(e){
                alert("你好呀")
            },
            showMsg(Msg){
                console.log(Msg)
            },
            demo(){
                for (let i = 0; i < 100000; i++) {
                    console.log(i)
                }
                console.log("@")
            }
        }
     })
</script>
</body>
</html>