Vue.js 事件处理器 vue如何使用事件代理

bigegpt 2024-10-11 10:54 7 浏览

事件监听可以使用 v-on 指令：

v-on

<divid="app"><buttonv-on:click="counter += 1">增加 1</button><p>这个按钮被点击了 {{ counter }} 次。</p></div><script>new Vue({ el: '#app', data: { counter: 0 }})</script>

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

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

v-on

<divid="app"><buttonv-on:click="greet">Greet</button></div><script>var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } }})// 也可以用 JavaScript 直接调用方法app.greet() // -> 'Hello Vue.js!'</script>

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

v-on

<divid="app"><buttonv-on:click="say('hi')">Say hi</button><buttonv-on:click="say('what')">Say what</button></div><script>new Vue({ el: '#app', methods: { say: function (message) { alert(message) } }})</script>

尝试一下 ?

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->

按键修饰符

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

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->

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

<!-- 同上 -->

全部的按键别名：

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

实例

<p><!-- Alt + C -->

vue阻止冒泡

上一篇：Vue3-笔记五(事件处理&修饰符)
下一篇：Vue中你知道修饰符有几种用法吗 vue修饰符有哪些

Vue.js 事件处理器 vue如何使用事件代理

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解