Vue2中的绑定事件和事件修饰符

一枕槐安1

已于 2023-05-01 14:36:32 修改

阅读量1.4k

点赞数

分类专栏：前端文章标签：前端 java javascript

于 2022-07-13 11:14:00 首次发布

本文链接：https://blog.csdn.net/weixin_64770583/article/details/125759199

版权

前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

一：绑定事件

事件的基本使用

1.使用v-on:xxx或者@xxx （@等同于v-on）例如绑定一个点击事件v-on:click(@click)

2.事件的回调需要配置在methods对象中，最终会在实例对象上

3.methods中的配置的函数，不要使用箭头函数（不然this指向会出现问题）

4.methods中的函数都是Vue管理的，函数中的this指向vm或者组件实力对象

5.@click = "demo"和@click ="demo($event, 实参)"

代码如下

<body>
  <div class="box">
        <h3>欢迎来到{{name}}</h3>
        <!-- 绑定事件 v-on:click -->
        <button v-on:click="showInfo1">点我提示信息</button>
        <!-- 简写 @click -->
        <button @click="showInfo2($event,66)">点我提示信息</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '.box',
        data: {
            name: '尚硅谷',
            address: '北京'
        },
        methods: {
            showInfo1() {
                alert('同学你好!');
            },
            showInfo2(e, num) {
                alert('同学你好!!' + num);
                console.log(e.target);
            }
        }
    })
</script>

绑定点击事件调用的函数都写在methods属性里面，模板代码才可以调用

！！！注意当使用到event事件时，需要在函数参数中写$event占位

二：事件修饰符

Vue中的事件修饰符

1.prevent: 阻止默认事件

2.stop: 阻止事件冒泡

3.once: 事件只触发一次

4.capture: 使用事件的捕获模式

5.self: 只有event.target是当前操作的元素时才触发事件

6.passive: 事件的默认行为立即执行，无需等待事件回调执行完毕

！！！修饰符可以连续写 .prevent.stop //先阻止默认事件后阻止冒泡

例

<body>
    <div class="box">
        <a href="http://www.csdn.net" @click="link()">跳转</a>
        <a href="http://www.csdn.net" @click.prevent="link()">阻止默认跳转</a>
        <div @click="maopao()">
            <button @click="maopao()">点击</button>
        </div>
        <div @click="maopao()">
            <button @click.stop="maopao">阻止冒泡</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '.box',
        data: {},
        methods: {
            maopao() {
                alert('点击事件');
            },
            link() {
                alert('跳转');
            }
        }
    });
</script>