6. Vue v-on绑定监听事件的基本使用
v-on介绍
v-on命令就是相当于js中的事件绑定，例如绑定click、mouseover等等监听事件。
本篇章基于click事件作为示例，说明v-on的基本使用方法。
- 直接使用指令
v-on - 使用简化指令
@
官网说明文档
https://cn.vuejs.org/v2/api/#v-on
基本用法示例
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>示例：绑定一个自定义的click事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<div id="app">
<input type="button" value="按钮" :title="mytitle + '追加内容'" v-on:click="show">
</div>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
mytitle: 'This is mytitle!'
},
methods:{
show(){
alert("hello world");
}
}
})
</script>
</body>
</html>浏览器显示如下：
可以从上面的代码看到，在Vue示例中需要设置methods来写方法show()，而show() 其实是show:function()的简写方式。
methods:{
show:function(){
alert("hello world");
}
}可以简写为：
methods:{
show(){
alert("hello world");
}
}示例：使用v-on的简写@
为了更加快速编写，可以直接使用@符号来绑定监听事件。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
