监听事件v-on
我们可以使用 v-on
指令(通常缩写为@
) 来监听DOM
事件, 并在触发事件时执行一些JavaScript
。
用法为 v-on:click="methodName"
或者使用缩写 :click="methodName"
- 绑定事件, 简单的逻辑, 可以直接通过js代码进行处理
- 绑定事件,如果需要事件对象, 没有传递参数的情况下, 直接方法中用event获取时间对象; 如果传递参数了, 模版中, 需要通过
$event
把当前的事件对象传过去 - 一个事件绑定多个处理函数,这些方法用逗号运算符分隔
示例
<script>
export default {
data () {
return {
count:0,
age:18
}
},
methods: {
addCount(){
this.count++
},
addParamsCount(number){
this.count+=number
},
addParamsObj(event){
// 方法中没有传参数, 直接用event表示事件对象
this.count++
console.log('点击能拿到这个事件对象, 鼠标点击事件',event)
},
addObj(event,num){
// 方法中传递参数了, 需要模板中传入$event事件对象, 方法中接收就可以
this.count+=num
console.log('点击能拿到这个事件对象, 鼠标点击事件',event)
},
addAge(num){
this.age += num
}
},
computed: {
},
watch:{
}
}
</script>
<template>
<div>
<p>{{ count }} -- {{ age }}</p>
<!-- 绑定事件, 直接通过js代码进行处理 -->
<button @click="count++">js表达式处理</button>
<!-- 绑定事件, 没有传递参数 -->
<button @click="addCount">通过函数进行处理</button>
<!-- 绑定事件, 传递参数 -->
<button @click="addParamsCount(5)">传参数监听事件</button>
<button @click="addParamsObj">事件对象,没有传参的情况下,
方法里面写一个event,就是事件对象
</button>
<!-- 在内联语句处理中访问原始的DOM事件, 可以用特殊变量 $event, 把它传入方法 -->
<!-- 绑定事件, 即传递参数, 也要有事件对象,需要通过$event把当前的事件对象传过去 -->
<button @click="addObj($event,5)">有参数的事件对象</button>
<!-- 一个事件绑定多个处理函数,这些方法用逗号运算符分隔 -->
<button @click="addCount(),addAge(5)">一个事件绑定多个处理函数</button>
</div>
</template>
<style>
</style
事件修饰符
Vue.js
为 v-on
指令提供了事件修饰符, 修饰符是有点开头
的指令后缀
来表示的。
.stop阻止事件冒泡
事件冒泡
: 指的是, 当子元素
和父元素
同时都有一个点击事件时, 当子元素点击事件执行了,
就会冒泡到父元素上面, 继续执行父元素的点击事件
事件冒泡示例
<div @click="divClick">
<button @click.stop="butClick">按钮</button>
</div>
说明
:
- 当点击
button
按钮时, 执行了butClick
这个事件后, 就会冒泡到父元素div
上面, 继续执行divClick
这个点击事件; - 很多时候这样是不符合需要的, 要求只执行
butClick
事件, 这个时候就需要使用到.stop
修饰符, 阻止事件冒泡
阻止事件冒泡示例
<script>
export default {
data () {
return {
count:0
}
},
methods: {
divClick(){
console.log('父元素的展示')
},
butClick(){
console.log('子元素的展示')
}
},
computed: {
},
watch:{
}
}
</script>
<template>
<div>
<!-- 事件修饰符 -->
<!--
事件冒泡: 指的是, 当子元素和父元素同时都有一个点击事件时, 当子元素点击事件执行了,
就会冒泡到父元素上面, 继续执行父元素的点击事件
.stop 阻止事件冒泡
-->
<div @click="divClick">
<!-- 我们的需求是, 只执行子元素的点击事件, 不要冒泡到父元素上面, 我们只要加.stop修饰符,
阻止冒泡就可以了-->
<button @click.stop="butClick">按钮</button>
</div>
</div>
</template>
<style>
</style>
.prevent 阻止默认行为
比如, form
表单提交中, 点击提交了, 我们就会跳转 form
表单的action
对应的地址; 但往往我们有自己的业务逻辑判断, 不想要使用form
默认的提交方式, 这个时候就需要使用到.prevent
, 阻止默认行为 。
示例
<script>
export default {
data () {
return {
count:0
}
},
methods: {
submitClick(){
console.log('我自己通过逻辑判断去提交')
}
},
computed: {
},
watch:{
}
}
</script>
<template>
<div>
<!-- 事件修饰符 -->
<!-- .prevent 阻止默认行为
-->
<form action="">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
</div>
</template>
<style>
</style>
.once 只触发一次回调
页面很多事件操作中, 要求我们只能触发一次
, 不能重复触发很多次; 除非重新进入这个页面,才能再次触发一次。
示例
<script>
export default {
data () {
return {
count:10
}
},
methods: {
},
computed: {
},
watch:{
}
}
</script>
<template>
<div>
<!-- 事件修饰符 -->
<!-- .once 只触发一次回调
-->
<button @click.once="count += 100">只触发一次once --- {{ count }}</button>
</div>
</template>
<style>
</style>
按键修饰符
在监听键盘事件时, 我们经常需要检查特定的按键。 Vue
允许我们为 v-on
或者 @
在监听键盘事件时添加按键修饰符。
示例
<script>
export default {
data () {
return {
count:10
}
},
methods: {
keyUp(){
console.log('回车键被按下, 数据提交成功')
}
},
computed: {
},
watch:{
}
}
</script>
<template>
<div>
<!-- 按键修饰符
.{keyCode(键盘编码) | keyAlias (键盘的简写)} 监听键盘的某个键帽
-->
<!--
当前键盘输入回车键时,提交数据到方法
-->
<input type="text" @keyup.enter="keyUp">
</div>
</template>
<style>
</style>