Vue3 事件处理

相关文章推荐

健壮的火腿肠 · 点击菜单拉取消息时的事件推送 | 微信开放文档· 1 月前 ·

完美的馒头 · python QTreeWidget ...· 1 月前 ·

聪明的冰棍 · can't access source ...· 2 周前 ·

坐怀不乱的丝瓜 · mongo复杂数据增删查改 - 知乎· 1 年前 ·

有情有义的汉堡包 · matlab画图时怎样设置x轴显示日期时间- ...· 1 年前 ·

快乐的马克杯 · Java中对XML文件的校验 - JJ急吧 ...· 1 年前 ·

< 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 >

尝试一下 »

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

< div id = " app " >  < 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 >

尝试一下 »

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

< 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 >

尝试一下 »

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

< div id = " app " >  < 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 >

尝试一下 »

事件修饰符

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>  <a v-on:click.once="doThis"></a>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<input v-on:keyup.enter="submit">  <input @keyup.enter="submit">

全部的按键别名：


    .enter


    .delete

(捕获 "删除" 和 "退格" 键)


    .space


    .down


    .left


    .right

系统修饰键：

.ctrl
.shift
.meta

鼠标按钮修饰符:

.right
.middle

< p > 
< input @keyup. alt .67 = "clear" >

< div @click.ctrl = "doSomething" > Do something < / div >

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

< button @click.ctrl = "onClick" > A < / button >

< button @click.ctrl.exact = "onCtrlClick" > A < / button >

< button @click.exact = "onClick" > A < / button >