vue的事件绑定

    <div id="oop">
        <button v-on:click.stop="hander">点击</button>                          //stop: 阻止冒泡(修饰符)
        <button v-on:click="hander(123,456,$event)">点击2</button>
        <button @click="hander1">点击1</button>
        <a href="http://www.baidu.com" v-on:click.prevent="handle">跳转</a>     //prevent:阻止默认行为(修饰符)   禁止跳转
        <!-- 
            事件绑定-参数传递
            1.如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
            2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
         -->
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var nn = new Vue({
            el: "#oop",
            data: {                                       
                num: 0
            },
            methods: {
                hander: function (num, oo, event) {
                    console.log(num, oo, event)
                    console.log(event.target.tagName)
                    console.log(this === nn)                 //true
                    this.num++;
                },
                hander1: function (event) {
                    console.log(event.target.tagName)
                    this.num--;
                },
            }
        })

    </script>

 

posted @ 2020-08-28 17:08  缔造cool  阅读(239)  评论(0)    收藏  举报