Vue.js--v-on方法及修饰符

最新推荐文章于 2024-05-21 14:54:17 发布

原创最新推荐文章于 2024-05-21 14:54:17 发布 · 878 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #修饰符

Vue.js 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了Vue.js中事件处理的基本用法，包括如何使用v-on指令绑定事件，直接在HTML元素上监听事件，以及如何使用修饰符如.stop、.prevent、.capture、.self、.once来更精细地控制事件的触发方式。

v-on基本用法

示例：计数器，点击一次按钮计数器+1

<div id="app">
    点击次数：{{counter}}
    <button @click="counter++">+1</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    });
</script>

@click的表达式可以直接使用JavaScript语句，也可以是一个在Vue实例中methods选项内的函数名，比如对上面的例子进行扩展，再增加一个按钮，点击一次，计数器+10：

<div id="app">
    点击次数：{{counter}}
    <button @click="counter++">+1</button>
    <button @click="handleAdd(10)">+10</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            handleAdd: function (value) {
                this.counter += 10;
            }
        }
    });
</script>

在methods中定义了我们需要的方法供@click调用，需要注意的是，@click调用的方法名后可以不跟括号“（）”。此时，如果该方法有参数，默认会将原生事件对象event传入，可以尝试修改为@click=“handleAdd”，然后再handleAdd内部打印出count参数看看。在大部分业务场景中，如果方法不需要传入参数，为了简便可以不写括号。

这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原则，实则刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑与DOM解耦，便于维护。重要的是，当ViewModel销毁时，所有的事件处理器都会自动删除，无须自己清理。

Vue提供了一个特殊变量$event，用于访问原生DOM事件。

示例：阻止连接打开：

<div id="app">
    <a href="http://www.baidu.com" @click="handleClick('禁止打开',$event)">打开链接</a>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            handleClick: function (message, event) {
                event.preventDefault();
                window.alert(message);
            }
        }
    });
</script>

修饰符

在上面的示例使用event.preventDefault()阻止默认事件。也可以使用Vue事件的修饰符来实现，在@绑定的事件后面加小圆点 “ . ” ，再跟一个后缀来使用修饰符。Vue支持一下修饰符：

.stop
.prevent
.capture
.self
.once

具体用法如下：

<!--阻止单机事件冒泡-->
<a @click.stop="handle"></a>

<!--提交时间不再重载页面-->
<form @submit.prevent="handle"></form>

<!--修饰符可以串联-->
<a @click.stop.prevent="handle"></a>

<!--只有修饰符-->
<form @submit.prevent></form>

<!--添加事件侦听器时使用事件捕获模式-->
<div @click.capture="handle">...</div>

<!--只当时间在该元素本身（而不是子元素）触发时触发回调-->
<div @click.self="handle">...</div>

<!--只触发一次，组件同样适用-->
<div @click.once="handle">...</div>