我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。
v-on 指令可以缩写为 @ 符号。
语法格式：
v-on:click="methodName"
或
@click="methodName"看个例子：
HTML
x
26
26
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<button @click="counter += 1">增加 1</button>11
<p>这个按钮被点击了 {{ counter }} 次。</p>12
</div>13
14
<script>15
const app = {16
data() {17
return {18
counter: 019
}20
}21
}22
23
Vue.createApp(app).mount('#app')24
</script>25
</body>26
</html>通常情况下，我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。
HTML
xxxxxxxxxx1
36
36
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<!-- `greet` 是在下面定义的方法名 -->11
<button @click="greet">点我</button>12
</div>13
14
<script>15
const app = {16
data() {17
return {18
name: 'Web176'19
}20
},21
methods: {22
greet(event) {23
// `methods` 内部的 `this` 指向当前活动实例24
alert('Hello ' + this.name + '!')25
// `event` 是原生 DOM event26
if (event) {27
alert(event.target.tagName)28
}29
}30
}31
}32
33
Vue.createApp(app).mount('#app')34
</script>35
</body>36
</html>除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
HTML
xxxxxxxxxx1
29
29
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<button @click="say('hi')">Say hi</button>11
<button @click="say('what')">Say what</button>12
</div>13
14
<script>15
const app = {16
data() {17
18
},19
methods: {20
say(message) {21
alert(message)22
}23
}24
}25
26
Vue.createApp(app).mount('#app')27
</script>28
</body>29
</html>事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：
HTML
xxxxxxxxxx1
33
33
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->11
<button @click="one($event), two($event)">12
点我13
</button>14
</div>15
16
<script>17
const app = {18
data() {19
},20
methods: {21
one(event) {22
alert("第一个事件处理器逻辑...")23
},24
two(event) {25
alert("第二个事件处理器逻辑...")26
}27
}28
}29
30
Vue.createApp(app).mount('#app')31
</script>32
</body>33
</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.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>阅读剩余 87%
作者：terry，如若转载，请注明出处：https://www.web176.com/vue3/6230.html
支付宝 
微信 