加入收藏 | 设为首页 | 会员中心 | 我要投稿 银川站长网 (https://www.0951zz.com/)- 云通信、基础存储、云上网络、机器学习、视觉智能!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

Vue.js事件处理方法是啥 事件修饰符怎么用

发布时间:2023-10-11 12:53:51 所属栏目:语言 来源:
导读:这篇文章给大家分享的是Vue.js事件处理方法是什么,事件修饰符怎么用。小编觉得挺实用的,因此分享给大家做个参考,文中的介绍得很详细,而要易于理解和学习,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧

这篇文章给大家分享的是Vue.js事件处理方法是什么,事件修饰符怎么用。小编觉得挺实用的,因此分享给大家做个参考,文中的介绍得很详细,而要易于理解和学习,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。

1. v-on 事件监听

监听DOM事件使用 v-on 指令。该指令通常在模板中直接使用,在触发事件时会执行一些 JavaScript 代码。

v-on 指令的基本用法

(1)在 HTML 中使用 v-on 指令,后面可以是所有的原生事件名称。基本用法如下:

<button v-on:click="show">显示</button>

将 click 单击事件绑定到 show 方法中,单击“显示”按钮时,执行 show() 方法,show() 方法在 Vue实例中定义。

(2)在使用 v-on 指令的过程中,Vue.js 提供了 v-on 指令的简写形式 “@” ,上述代码可改写为如下:

<button @click="show">显示</button>

(3)v-on 指令的简单用法如下:

<div id="box">

<!--v-on 基本用法-->

<button v-on:click="count1++">计数</button>

<p>按钮被点击{{count1}}次</p>

<!--v-on 简单用法-->

<button @click="count2++">计数</button>

<p>按钮被点击{{count2}}次</p>

</div>

<script type="text/javascript">

var vm = new Vue({

el : '#box',

data:{

count1:0,

count2:0

}

});

</script>

在使用 v-on 指令过程中,通过 v-on 指令需要将事件和某个方法进行绑定,而绑定的方法作为事件处理器定义在 methods 选项中。示例代码参考如下:

<div id="box">

<button v-on:click="show">显示</button>

</div>

<script type="text/javascript">

var vm = new Vue({

el : '#box',

data:{

name:'晓茗',

age: 29,

occupation:'演员'

},

methods:{

show:function(){

alert('姓名:'+this.name+'年龄:'+this.age+'职业:'+this.occupation);

}

}

});

</script>

使用内联 JavaScript 语句

(1)使用 v-on 指令除了直接绑定到一个方法之外,v-on 指令也支持内联 JavaScript 语句,但前提是只可以使用一个语句。示例代码参考如下:

<div id="box">

<button v-on:click="show('明日之星')">显示</button>

</div>

<script type="text/javascript">

var vm = new Vue({

el : '#box',

methods:{

show:function(message){

alert('消息:'+message);

}

}

});

(2)在内联语句中需要获取原生的 DOM 事件对象时,可以将一个特殊变量 $event 传入方法中。示例代码如下:

<div id="box">

<a href="http://www.baidu.com" rel="external nofollow" v-on:click="show('明日之星',$event)">{{message}}</a>

</div>

<script type="text/javascript">

var vm = new Vue({

el : '#box',

data:{

message:'你好'

},

methods:{

show:function(message1,e){

e.preventDefault();

alert(message1);

}

}

});

</script>

除了向 show() 方法传递一个值外,还传递了一个特殊变量 $event,该变量的作用是当点击超链接时,对原生 DOM 事件进行处理,应用 preventDefault() 方法阻止该超链接的跳转行为。

2. 事件处理修饰符

所谓修饰符,就是以半角句点符号指明的特殊后缀。Vue.js 为 v-on 指令提供了多个修饰符,包括事件修饰符和按键修饰符。

在事件处理程序中经常会调用 preventDefault() 或 stopPropagation() 方法来实现特定的功能。为处理这些 DOM 事件细节,Vue.js 为 v-on 指令提供了事件修饰符。

修饰符可以串联使用,而且可以只使用修饰符,而不绑定事件处理方法。事件修饰符的使用方式如下:

<!-- 阻止单击事件继续传播-->

<a v-on:click.stop="doSomething"></a>

<!-- 阻止表单默认提交事件-->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 只有当事件从当前元素本身触发时才调用处理函数-->

<div v-on:click.self="doSomething"></div>

<!-- 修饰符串联,阻止表单默认提交事件且阻止冒泡-->

<a v-on:click.stop.prevent="doSomething"></a>

<!-- 只有修饰符,而不绑定事件-->

<form v-on:submit.prevent></form>

应用一个 .stop 修饰符阻止事件冒泡的示例代码如下:

<div id="box">

<div v-on:click="show('div事件触发')">

<button v-on:click.stop="show('按钮的事件触发')">显示</button>

</div>

</div>

<script type="text/javascript">

var vm = new Vue({

el : '#box',

methods:{

show:function(message){

alert(message);

}

}

});

</script>

当单击”显示“按钮时,只会触发该按钮的单击事件。如果在按钮中未使用 .stop 修饰符,当单击”显示“按钮时,不但会触发该按钮的单击事件,还会触发 div 的单击事件,会弹出两个对话框。

除事件修饰符之外,Vue.js 还为 v-on 指令提供了按键修饰符,以便监听键盘事件中的按键。当触发键盘事件时需要检测按键的 keyCode值,代码如下:

<input v-on:keyup.13="submit">

应用 v-on 指令监听键盘的 keyup 事件,键盘中回车键的 keyCode 值是13,所以,在文本框输入内容后,单击回车键时就会调用 submit()方法。

对上述所示的代码,可以使用其别名的方式,回车键别名为 Enter ,代码如下:

<input v-on:keyup.enter="submit">

关于“Vue.js事件处理方法是什么,事件修饰符怎么用”就介绍到这了,如果大家觉得不错可以参考了解看看,如果想要了解更多,小编每天都会为大家更新不同的知识。

(编辑:银川站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章