从零开始学VUE之模板语法(事件监听)
从零开始学VUE之模板语法(事件监听)
彼岸舞
发布于 2021-06-07 15:10:03
发布于 2021-06-07 15:10:03
代码可运行
运行总次数：0
代码可运行
事件监听 v-on指令(缩写"@")
简单点击事件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{count}}</h1>
<!-- 表达式方法-->
<button @click="count++">+</button>
<!-- 绑定方法,应为没有餐宿,所以可以不用加小括号() -->
<button @click="decr">-</button>
</div>
</body>
<script>
// 创建vue
const vue = new Vue({
el: '#app',
data: {
count:0
},
methods: {
decr() {
this.count--;
}
}
})
</script>
</html>运行效果
传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{count}}</h1>
<!-- 传递参数-->
<button @click="decr(1)">-</button>
<!-- 在不传入参数的情况下,但是方法存在参数,vue会默认将点击事件 event对象传入,方法的第一个参数-->
<button @click="decr">-</button>
<!-- 若希望手动获取到浏览器产生的事件对象 默认写 $event 就可以-->
<button @click="getEvent('this is txt',$event)">-</button>
</div>
</body>
<script>
// 创建vue
const vue = new Vue({
el: '#app',
data: {
count:0
},
methods: {
decr(abc) {
console.log(abc);
},
getEvent(txt,event){
console.log(txt);
console.log(event);
}
}
})
</script>
</html>点击后运行效果,点了按钮
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js 通过由点.表示的指令后缀来调用修饰符。
事件 | 描述 |
|---|---|
.stop | 阻止冒泡 |
.prevent | 阻止默认事件 |
.capture | 阻止捕获 |
.self | 只监听触发该元素的事件 |
.once | 只触发一次 |
.left | 左键事件 |
.right | 右键事件 |
.middle | 中间滚轮事件 |
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>键盘事件
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 # 一般都直接写@-->
<input @keyup.enter="submit">别名 | 描述 |
|---|---|
.enter | 回车键 |
.tab | tab键 |
.delete | 删除/退格(backspace) |
.esc | esc |
.space | 空格 |
.up | 上 |
.down | 下 |
.left | 左 |
.right | 右 |
.ctrl | ctrl |
.alt | alt |
.shift | shift |
.meta | windows()/mac(commond) |
键盘Code码
组合键
<p><!-- Alt + C -->
# 通过keyup(键盘回弹).alt.67(c) 触发clear方法,实现组合键
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>作者：彼岸舞
时间：2021\05\31
内容关于：VUE
本文属于作者原创,未经允许,禁止转发
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-05-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
