Vue学习笔记(7)-事件绑定v-on

事件绑定

事件绑定就是在HTML元素中，通过v-on绑定事件的。事件代码可以直接放到v-on后面，也可以写成一个函数。示例代码如下：

<div id="app">
    <p>{{count}}</p>
    <button v-on:click="count+=1">加</button>
    <button v-on:click="subtract(10)">减10</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
            subtract: function(value){
                this.count -= value;
            }
        }
    });
</script>

v-on的快捷方式：v-on:事件名 可以简写为 @事件名

传入event参数：

如果在事件处理函数中，想要获取原生的DOM事件，那么在html代码中，调用的时候，可以传递一个$event参数。示例代码如下：

<button v-on:click="subtract(10,$event)">减10</button>
...
<script>
...
methods: {
    subtract: function(value,event){
        this.count -= value;
        console.log(event);
    }
}
...
</script>

事件修饰符：

有时候事件发生，我们可能需要做一些操作。比如针对这个事件要他的默认行为。那么我们可能通过以下代码来实现：

<div id="app">
    <a href="https://www.baidu.com/" v-on:click="gotoWebsite($event)">百度</a>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
            gotoWebsite: function(event){
                event.preventDefault();
                window.location = "https://www.360.cn/"
            }
        }
    });
</script>

• 那个阻止默认事件执行的代码，我们可以通过click.prevent来实现。示例代码如下：

<a href="https://www.baidu.com/" v-on:click.prevent="gotoWebsite($event)">百度</a>

常见的修饰符还有以下：

• .stop：event.stopPropagation，阻止事件冒泡。
• .capture：事件捕获。
• .once：这个事件只执行一次。
• .self：代表当前这个被点击的元素自身。
• .passive：在页面滚动的时候告诉浏览器不会阻止默认的行为，从而让滚动更加顺畅。