3vue

阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，
    如果事件绑定函数调用，那么事件对象必须作为最后一个参数$event显示传递 -->
    <div id = "app1">
        <div v-text="num"></div>
        <div v-on:click="handle0" >
            <button v-on:click="handle1">点击</button>
        </div>
        
    </div>
    <script src="vue.js"></script>
    <script>
        var vue1 = new Vue({
            el: '#app1',
            data:{
                num:0
            },
            methods:{
                handle0:function(){
                    this.num++;
                },
                handle1:function(event){
                    // event.stopPropagation();
                },
                
            }
        })
    </script>
</body>
</html>
将<button v-on:click="handle1">点击</button>改成
<button v-on:click.stop="handle1">点击</button>
就能等效上述阻止冒泡

阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，
    如果事件绑定函数调用，那么事件对象必须作为最后一个参数$event显示传递 -->
    <div id = "app1">
        <div>
            <a href="http://www.baidu.com" v-on:click.prevent="handle1">百度</a>
        </div>
        
    </div>
    <script src="vue.js"></script>
    <script>
        var vue1 = new Vue({
            el: '#app1',
            data:{
                num:0
            },
            methods:{
                handle1:function(event){
                    // event.preventDefault();
                },
                
            }
        })
    </script>
</body>
</html>

 按键修饰符

v-on:keyup.enter='handleSubmit'

v-on:keyup.delete='clearContent'

posted on 2020-08-01 15:33  知否知否，  阅读(168)  评论(0)  编辑  收藏  举报