我们可以使用 v-on 指令来监听 DOM 事件,从而执行 JavaScript 代码。
v-on 指令可以缩写为 @ 符号。
语法格式:
v-on:click="methodName"
或
@click="methodName"
实例:
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
const app = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
通常情况下,我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet">点我</button>
</div>
<script>
const app = {
data() {
return {
name: 'Runoob'
}
},
methods: {
greet(event) {
// `methods` 内部的 `this` 指向当前活动实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
除了直接绑定到一个方法,也可以用内联 JavaScript 语句:
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
</div>
<script>
const app = {
data() {
},
methods: {
say(message) {
alert(message)
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
事件处理程序中可以有多个方法,这些方法由逗号运算符分隔:
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
点我
</button>
</div>
<script>
const app = {
data() {
},
methods: {
one(event) {
alert("第一个事件处理器逻辑...")
},
two(event) {
alert("第二个事件处理器逻辑...")
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
事件修饰符
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
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
系统修饰键:
- .ctrl
- .alt
- .shift
- .meta
鼠标按钮修饰符:
- .left
- .right
- .middle
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
.exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
其实v-on后面跟的不止是click事件也可以是其他的事件,用法均相似。比如:v-on:click/mouseout/mouseover/mousedown...
以下click为例
注意:所有的v-on都可以简写为@,比如说v-on:click可以简写为@click
监听事件
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。通常来讲就是监听dom触发一些操作,这些操作(比如点击)触发后执行的动作(js)可有直接写在后面
v-on:click="item+=1"
实例:
<template>
<div >
<input type="button" value="clickme" v-on:click="item+=1"/>
<div>{{item}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
item:1
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
运行结果如下所示:
可以看见每点击一次绑定的值就增加1.也就是说可以吧js的操作放在事件触发的后面。但是有时候逻辑太复杂的时候写在里面就会造成混乱,视图和逻辑混淆。所以click后面可以接一个方法,把所有处理逻辑的方法封装在一个函数里面click的时候调用
事件处理方法
v-on:click="greet"
实例:
<template>
<div >
<input type="button" value="clickme" v-on:click="greet"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function () {
// `this` 在方法里指向当前 Vue 实例
this.res='Hello ' + this.name + '!';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
运行结果:
可以看见点击之后执行了greet方法里面js逻辑
带参数的时间绑定方法
同上,唯一区别是携带了参数
v-on:click="greet(name)"
<template>
<div >
<input type="button" value="clickme" v-on:click="greet(name)"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function (reccept) {
// `this` 在方法里指向当前 Vue 实例
this.res='Hello ' + reccept+1 + '!';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果一致。对方法的调用同样可以一个方法多处多次的调用
内联处理器中的方法
也就是说在方法里面调用其他的方法,这里的其他方法可以是js原生的方法比如阻止冒泡呀等等,也可以是自定义的方法
v-on:click="greet(name,$event)"
<template>
<div >
<input type="button" value="clickme" v-on:click="greet(name,$event)"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function (reccept,event) {
if (reccept===1) this.say()
},
say:function () {
this.res="我调用了"
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
事件对象
$event 拿到当前点击事件的事件对象,比如click就是拿到当前点击事件的对象信息
v-on:click="greet($event)"
实例:
<template>
<div >
<input type="button" value="clickme" v-on:click="greet($event)"/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
greet: function (ev) {
alert(ev.clientX)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
运行效果:
事件冒泡
当不阻止事件冒泡的时候会弹两次
实例:
<template>
<div >
<div @click="show1($event)">
<div @click="show2($event)">点击我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function (ev) {
alert(1)
},
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
但阻止冒泡后就只会弹一次
eg:原生js阻止冒泡
ev1.cancelBubble=true
实例:
<template>
<div >
<div @click="show1($event)">
<div @click="show2($event)">点击我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function (ev) {
alert(1)
},
show2: function (ev1) {
ev1.cancelBubble=true
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
那么vue自己封装的阻止冒泡方法呢?
@click.stop="show2()"
实例:
<template>
<div >
<div @click="show1()">
<div @click.stop="show2()">点击我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function () {
alert(1)
},
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
阻止默认行为
比如:按下右键之后会将默认的菜单带出来
<template>
<div >
<div>
<div @contextmenu="show2()">右键点击我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
运行效果如下:
那么就有了阻止默认行为
ev1.preventDefault();
实例:
<template>
<div >
<div>
<div @contextmenu="show2($event)">右键点击我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
ev1.preventDefault();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
点击后默认菜单将不会显示(在360浏览器右键无效)
vue里面的封装的阻止默认行为的方法:
@contextmenu.prevent="show2()"
实例:
<template>
<div >
<div>
<div @contextmenu.prevent="show2()">右键点击我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>