vue中的v-on等一些知识点

最新推荐文章于 2025-02-03 21:04:38 发布

原创最新推荐文章于 2025-02-03 21:04:38 发布 · 410 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Vue中的事件处理，包括v-on用于绑定事件，以及v-on的事件修饰符如.stop、.prevent、.capture、.self和.once的用法。通过示例展示了如何阻止事件冒泡、防止默认行为、使用事件捕获模式以及限制事件处理函数的触发次数。

Vue中离不开事件，而事件还有一些事件修饰符来约束事件的触发
在网上结合一些别人的知识梳理一下。

（1）v-bind

首先简单实例化一下

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            mytitle:"This is a title!"
        },
    })
</script>

html代码：

<input type="button" value="按钮" title="mytitle">

我们都知道如果不加v-bind的话mytitle只会被当做一个普通字符串，不会再vue实例上寻找对应的属性
我们改成这样就可以成功调用vue实例中的属性：

<input type="button" value="按钮" v-bind:title="mytitle">

v-bind的语法糖可以简写成冒号：

<input type="button" value="按钮" :title="mytitle">

（2）v-on

v-on绑定事件
vue不想jQuery那样操作真实DOM，
以往我们触发事件需要这样操作：

<input type="button" value="按钮" id="btn">

document.getElementById("btn").onclick=function()
{
      alert("Hello!")
}

而vue提供了v-on类似于jQuery的on( )方法
v-on可以绑定事件，后面跟要触发的事件类型

<input type="button" value="按钮" v-on:click="sayHello">

<script>
	var vm=new Vue({
	            el:"#app",
	            data:{
	            },
	            methods:{ // 在methods属性中定义了当前Vue实例所有可用的方法
	                sayHello:function()
	                {
	                    alert("Hello!")
	                }
	            }
	        })
</script>

当然除了click事件之外其它常用事件都可以定义：

<input type="button" value="按钮" v-on:mouseover="sayHello">

v-on也有它的语法糖可以省略写成@
我们可以改写成：

<input type="button" value="按钮1" @click="sayHello">
<input type="button" value="按钮2" @mouseover="sayHello">

（3）v-on的事件修饰符

v-on提供了一些事件修饰符：

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身时触发时才会触发回调
.once 事件只触发一次

.stop

在触发冒泡的标签上添加.stop修饰符即可：
这样即可阻止该事件的冒泡

<div id="app">
	<div class="inner" @click="divHandler">
		<!-- .stop阻止冒泡 -->
		<input type="button" value="click me" @click.stop="btnHandler">
	</div>
</div>

.prevent

<!-- .prevent阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>

能阻止默认事件例如a标签的href 表单的submit等

.capture

添加事件侦听器默认采用的是冒泡模式在添加.capture后使用捕获模式
即默认从里到外添加该修饰符后变为从外到里
注：该修饰符是加在外层div上的

<!-- .capture事件捕获模式 -->
<div class="inner" @click.capture="divHandler">
	<input type="button" value="click me" @click="btnHandler">
</div>

.self

只有事件是元素本身触发时才回调
除此之外都不会被触发
该修饰符加在要实现此效果的元素标签上

<div class="inner" @click.self="divHandler">
	<input type="button" value="click me" @click="btnHandler">
</div>

.once

只触发一次事件处理函数
(事件处理函数可以串联)

<!-- .once该事件只会被触发一次 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>

因此上述代码的效果是第一次a标签是不会跳转的(因为加了.prevent 阻止默认行为) 但在除了第一次之外都会正常跳转(因为加了.once)

关于.stop和.self的区别
.stop是阻止所有的冒泡
而.self只是阻止当前元素上的冒泡行为并不阻止它里面或外面的元素的冒泡

<div class="outer" @click="divoHandler">
	<div class="inner" @click.self="divHandler">
		<input type="button" value="click me" @click.stop="btnHandler">
	</div>
</div>