当前位置：首页 > news >正文

Vue事件

news 来源：原创 2024/5/19 11:47:49

1、写法及事件绑定

写法：在methods中写方法,供事件或者别的方法内部调用（es5、es6的方法都可以）。

绑定事件的指令：1、v-on 2、@，两种方法后面都跟事件类型,值就是methds中的方法,可以加小括号也可以不加
   <div id="app">
      <button v-on:click="fn1()">{{aa}}</button>
      <button @click="fn2">{{aa}}</button>
      <button @mouseenter="fn3" v-on:mouseout="fn4()">{{aa}}</button>
   </div>
         var fn4=function(){
            console.log(4444)
         }
    

        new Vue(
            {
            el:"#app",
            data:{
                aa:"点击一下"
            },
            methods: {
                fn1:function(){
                    console.log(1111)
                },
                fn2(){
                    console.log(2222)
                },
                fn3:()=>{
                    console.log(3333)
                },
                fn4

            },
        }
        )
点击第一个按钮控制台会打印1111

点击第二个按钮控制台会打印2222

鼠标进入第三个按钮控制台会打印3333

鼠标移出第三个按钮控制台会打印4444

2.事件修饰符

.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为

.prevent 阻止默认事件(静默)

.capture 添加事件侦听器时让事件在捕获阶段触发

.self 触发对象只能是自己才会发生，捕获和冒泡都不能触发（但依然该对象在事件链里）

.once 事件只触发一次,触发完之后,事件就解绑
多修饰符一起使用:连点
<style>
    .aa {
        width: 300px;
        height: 300px;
        background-color: rgb(211, 172, 172);
    }

    .bb {
        width: 200px;
        height: 200px;
        background-color: rgb(117, 206, 114);
    }

    .cc {
        width: 100px;
        height: 100px;
        background-color: rgb(131, 160, 223);
    }
</style>

    <div class="app">
        <div class="aa" v-on:click="fn1()">3
            <div class="bb" @click="fn2">2
                <div class="cc" @click="fn3">1</div>
            </div>
        </div>
    </div>
        new Vue({
            el: ".app",
            data: {


            },
            methods: {
                fn1() {
                    console.log(3333)
                },
                fn3: () => {
                    console.log(1111)
                },
                fn2:function(){
                    console.log(2222)
                }
            },
        })
界面如图：

修改以下代码时：



<div class="cc" @click.stop="fn3">1</div>

点击1处时，只会打印1111



<div class="bb" @click.self="fn2">2</div>

点击2时，只会打印2222，且点击其他地方，无论冒泡还是捕获都无法获取到2222



<div class="bb" @click.once="fn2">2

点击2时，会打印2222，3333，之后再点击时只会打印3333