Vue.js事件处理与修饰符详解-优快云博客

本文链接：https://blog.youkuaiyun.com/W1103168475/article/details/120522758

我和我的VUE

1.V-ON

在这里插入图片描述这里的键盘码事件删除delete事件不知道为什么他就直接点击不了
所以无奈只能换名字

1.1事件冒泡

如第一个事件冒泡一样，就是在当前的事件，先触发当前的时间，就是子时间，然后再触发父事件，如下图所示
在这里插入图片描述
但是当我们使用v-on:click.stop
阻止时间冒泡之后我们再次点击事件就只是触发子事件了，就如下了
Tips:v-on:click.stop只能用在内层中，不能用在外层

1.2.prevent,.captures事件

.prevent事件可以使跳转到百度的链接失效

.capture事件对冒泡事件的一种反制
冒泡事件：先执行子元素，再执行父元素
事件捕获：先执行父元素是再执行子元素

1.3.self事件

在这里插入图片描述
self只有元素本身才会被触发事件，冒泡的事件不会被触发
所以点击b的时候只有b会执行，a不会执行

所以.self加在doThis上面就没有用了
点击d之后向上冒泡依然存在，点击d之后c执行

.once事件

<!-- .once事件 -->
            <button v-on:click.once="doThis">只能点一次</button>

.once事件在使用过一次之后就不会再被使用
.once事件可以在一些点了一次之后按钮变灰的场景使用

话不多说，上源码

<!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>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button v-on:click="sayHi">点你哥</button>
        <button @click="sayhelllo('morning')">早上好</button>
        <br>
        <button v-on:click="count+=Math.random()">随机数</button>

        <p>{{count}}</p>
        <button @click="countAdd">加1</button>
        <button @click="dimish">减一</button>


<!-- v-on:的键盘码的事件 -->
        <p>
            <input type="text" v-model="giegie" v-on:keyup.enter="submit">
            <br>
            <input type="text" v-model="giegie" v-on:keyup.delete="remove">
            <!-- 方法名delete好像不能用 -->
            
        </p>
<!-- 事件修饰符 -->
        <div v-on:click="doParent">
            <button v-on:click="doThis">事件冒泡</button>
            <!-- 点击当前按钮当前元素触发，外面的事件也触发 -->
            <button v-on:click.stop="doThis">阻止事件冒泡</button>
        </div>

    </div>
    

    <!-- <script src="vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!-- <script src="https://getbootstrap.com/docs/3.3/javascript/"></script> -->

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"hello",
                count:0,
                giegie:"geigie好"
                
            },
            methods:{
                sayHi:function(event){
                    alert(this.msg)
                },
                sayhelllo:function(params){
                    alert(params),
                    this.msg="haha"
                },
                countAdd:function(count){
                    this.count++
                    // alert(count)

                    //this.count=count++;
                },
                dimish:function(){
                    this.count--
                },
                submit:function(){
                    this.giegie="giegie好",
                   alert("哥哥好")
                // this.giegie='',
                //     alert("哥哥好")

                },
                remove:function(){
                    this.giegie='',
                    alert("哥哥好")
                },
                doParent(){
                    console.log("我是父元素")
                },
                doThis(){
                    console.log("我是孩子元素")
                }
            
            }
          
        })

    </script>

</body>
</html>