本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正.

vue官网上指出:
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
event.preventdefault():阻止默认事件发生,例如:a标签默认会刷新,表单的提交。
event.stopPropagation():终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。即不会再产生捕获和冒泡事件。
这里写图片描述
如图所示:嵌套div,每一个div都有click事件,点击目标事件,先走捕获->目标->冒泡 即捕获:从外到内依次执行click事件,冒泡:从内到外依次执行click事件

vue事件修饰符:
(1).stop // 阻止事件继续传播 即阻止它的捕获和冒泡过程
实例:如下点击内部点击,阻止了冒泡过程,即只执行tz这个方法,如果不加.stop,讲先执行方法,后执行gett方法。即通过了冒泡这个过程。

<div v-on:click="gett">外部点击
            <div  v-on:click.stop="tz">内部点击</div>
</div>

(2).prevent //阻止默认事件发生 即event.preventdefault():
实例: 阻止了a标签的默认刷新
<a href="" v-on:click.prevent>点击</a>

(3).capture // 添加事件监听器时使用事件捕获模式,即在捕获模式下触发
实例:在点击最里层的点击6时,gett方法先执行,因为gett方法在捕获模式执行的,先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。

<div v-on:click.capture="gett">外部点击5
    <div  v-on:click="tz">内部点击5
        <div  v-on:click="set">点击6</div>
    </div>
</div>

(4).self //当前元素自身时触发处理函数时才会触发函数,原理:是根据event.target确定是否当前元素本身,来决定是否触发的事件/函数
实例:如果点击内部点击2,冒泡不会执行gett方法,因为event.target指的是内部点击2的dom元素,不是外部点击1的,所以不会触发自己的点击事件

<div v-on:click.self="gett">外部点击1
<div  v-on:click="tz">内部点击2</div>
</div>

(5).once //只触发一次
实例:

<div  v-on:click.once="tz">once</div>

全部代码

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="app">
        <button v-on:click="gett" >点击</button>
        <input type="text" v-on:keyup.13="gett" />
        <div v-on:click="gett">外部点击
            <div  v-on:click.stop="tz">内部点击</div>
        </div>
        <a href="" v-on:click.prevent>dsfs</a>
        <div v-on:click.self="gett">外部点击1
            <div  v-on:click="tz">内部点击2</div>
        </div>
        <div v-on:click.capture="gett">外部点击5
            <div  v-on:click="tz">内部点击5
                <div  v-on:click="set">点击6</div>
            </div>
        </div>
        <div  v-on:click.once="tz">once</div>
        </div>

        <div id='a'>外部点击3
            <div  id='b'>内部点击4</div>
        </div>

        <script src="js/mui.min.js"></script>
        <script src="js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
        <script type="application/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    name:'张三'
                },
                methods:{
                    gett:function(e){
                        alert("111");
                        console.log(e.target);
                        this.name='李四';

                    },
                    tz:function(e){
                        console.log(e.target);
                        alert(222)
                    },
                    set:function(e){
                        console.log(e.target);
                        alert(333)
                    }
                }
            })
            document.getElementById('a').addEventListener('click',function(e){
                console.log(e.target);
                alert('aaaa')
            },true)
            document.getElementById('b').addEventListener('click',function(e){
                console.log(e.target);
                alert('bbbb')
            },true)
        </script>
    </body>

</html>
Logo

前往低代码交流专区

更多推荐