Vue 3.0 事件处理 【Vue3 从零开始】

这篇具有很好参考价值的文章主要介绍了Vue 3.0 事件处理 【Vue3 从零开始】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

#监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

例如:

 
  1. <div id="basic-event">
  2. <button @click="counter += 1">Add 1</button>
  3. <p>The button above has been clicked {{ counter }} times.</p>
  4. </div>
 
  1. Vue.createApp({
  2. data() {
  3. return {
  4. counter: 1
  5. }
  6. }
  7. }).mount('#basic-event')

结果: 点击此处实现

#事件处理方法

然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

例如:

 
  1. <div id="event-with-method">
  2. <!-- `greet` 在下面定义的方法名 -->
  3. <button @click="greet">Greet</button>
  4. </div>
 
  1. Vue.createApp({
  2. data() {
  3. return {
  4. name: 'Vue.js'
  5. }
  6. },
  7. methods: {
  8. greet(event) {
  9. // `this` 内部 `methods` 指向当前活动实例
  10. alert('Hello ' + this.name + '!')
  11. // `event` 是原生 DOM event
  12. if (event) {
  13. alert(event.target.tagName)
  14. }
  15. }
  16. }
  17. }).mount('#event-with-method')

结果: 点击此处实现

#内联处理器中的方法

除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:

 
  1. <div id="inline-handler">
  2. <button @click="say('hi')">Say hi</button>
  3. <button @click="say('what')">Say what</button>
  4. </div>
 
  1. Vue.createApp({
  2. methods: {
  3. say(message) {
  4. alert(message)
  5. }
  6. }
  7. }).mount('#inline-handler')

结果: 点击此处实现

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:

 
  1. <button @click="warn('Form cannot be submitted yet.', $event)">
  2. Submit
  3. </button>
 
  1. // ...
  2. methods: {
  3. warn(message, event) {
  4. // now we have access to the native event
  5. if (event) {
  6. event.preventDefault()
  7. }
  8. alert(message)
  9. }
  10. }

#多事件处理器

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

 
  1. <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
  2. <button @click="one($event), two($event)">
  3. Submit
  4. </button>
 
  1. // ...
  2. methods: {
  3. one(event) {
  4. // first handler logic...
  5. },
  6. two(event) {
  7. // second handler logic...
  8. }
  9. }

#事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
 
  1. <!-- 阻止单击事件继续传播 -->
  2. <a @click.stop="doThis"></a>
  3. <!-- 提交事件不再重载页面 -->
  4. <form @submit.prevent="onSubmit"></form>
  5. <!-- 修饰符可以串联 -->
  6. <a @click.stop.prevent="doThat"></a>
  7. <!-- 只有修饰符 -->
  8. <form @submit.prevent></form>
  9. <!-- 添加事件监听器时使用事件捕获模式 -->
  10. <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
  11. <div @click.capture="doThis">...</div>
  12. <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  13. <!-- 即事件不是从内部元素触发的 -->
  14. <div @click.self="doThat">...</div>

TIP

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

 
  1. <!-- 点击事件将只会触发一次 -->
  2. <a @click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档,现在大可不必担心。

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

 
  1. <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
  2. <!-- 而不会等待 `onScroll` 完成 -->
  3. <!-- 这其中包含 `event.preventDefault()` 的情况 -->
  4. <div @scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

TIP

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

#按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符:

 
  1. <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
  2. <input @keyup.enter="submit" />

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

 
  1. <input @keyup.page-down="onPageDown" />

在上述示例中,处理函数只会在 $event.key 等于 'PageDown' 时被调用。

#按键别名

Vue 为最常用的键提供了别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

#系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl
  • .alt
  • .shift
  • .meta

提示

注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。

例如:

 
  1. <!-- Alt + Enter -->
  2. <input @keyup.alt.enter="clear" />
  3. <!-- Ctrl + Click -->
  4. <div @click.ctrl="doSomething">Do something</div>

TIP

请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。

#.exact 修饰符

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

 
  1. <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  2. <button @click.ctrl="onClick">A</button>
  3. <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  4. <button @click.ctrl.exact="onCtrlClick">A</button>
  5. <!-- 没有任何系统修饰符被按下的时候才触发 -->
  6. <button @click.exact="onClick">A</button>

#鼠标按钮修饰符

  • .left
  • .right
  • .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

#为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 或 @ 有几个好处:文章来源地址https://www.toymoban.com/news/detail-442961.html

  1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
  2. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
  3. 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。

到了这里,关于Vue 3.0 事件处理 【Vue3 从零开始】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3实现父组件向子组件传值并监听props改变触发事件

    1. 父组件 向子组件 loginPhone 传递 tel 参数  phone 是在 reactive 定义的变量也可是是 ref 定义的变量 2. 子组件

    2024年02月05日
    浏览(43)
  • vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件

    1、背景 项目中有涉及视频播放的需求,并且UI设计了样式,与原生的视频video组件有差异,所以使用了vue-video-player插件,并对vue-video-player进行样式改造,自定义播放暂停按钮、全屏按钮、时间进度条样式等,自动播放设置、设置一开始全屏播放视频、监听全屏事件等。 2、效

    2024年02月08日
    浏览(58)
  • vue3 事件处理 @click

    vue3 事件处理 @click 传入多个函数,函数需要带上括号() 无stop:会触发 btnClick,再触发divClick 有stop:只触发btnClick 按下对应按钮,会触发对应事件 常用的按键 按键 解释 enter 回车 tab 切换 delete 删除 esc 退出 space 空格 up 向上 down 向下 left 向左 right 向右

    2024年02月12日
    浏览(49)
  • 从零开始Vue3+Element Plus的后台管理系统(二)——Layout页面布局的实现

    项目搭建好之后,开始写基本的布局。后台管理系统的布局3大元素:头部、侧栏、主要内容,各种布局结构相差不大,我选择了下图所示的布局,其中头部、侧栏、页签在页面中是固定的,只有主要内容容器会跟随页面滚动。 Layout布局的目录结构 代码就不贴了,仓库有😄

    2024年02月16日
    浏览(43)
  • Vue3封装全局WebSocket;全局可监听、可发送、心跳处理等;

    操作如下 可以在多个页面多个组件中进行监听/发送 代码简介 方便; 首先安装 tools-javascript 以及 tools-vue3 根据你的业务需求初始化 ws 在你的任何文件中直接调用即可 附加篇(也可不读 直接看文档 )

    2024年02月11日
    浏览(42)
  • 从零开始Vue3+Element Plus后台管理系统(六)——状态管理Pinia和持久化

    官网:https://pinia.vuejs.org/zh/ Pinia 是 Vue 的专属状态管理库,相比Vuex更好用,优点不多了说官网有,用起来最重要! 在应用的根部注入创建的 pinia 定义store,拿用户登录举个简单例子 在src目录新建文件夹store,然后新建文件user.ts 在Vue页面中使用Pinia 如果我们把登录用户的信息

    2024年02月05日
    浏览(46)
  • 从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier

    项目git地址, 欢迎修改提交,不足地方还请补充批评指正! 项目git地址 ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具,其目标是使代码更加一致并避免错误。 ESLint 是完全插件化的。每条规则都是一个插件,你可以在运行时添加更多。你还可以添

    2024年04月09日
    浏览(77)
  • 从零开始Vue3+Element Plus的后台管理系统(五)——尝试多种图标ICON方案iconify

    iconfont是过去使用较多的图标方案,后来更倾向于使用SVG,因为SVG更灵活兼容性更好。在最近的几个Vue2项目中,因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。 Element Plus的图标库相对Element UI更加丰富,然而对于喜欢折腾的人还是远远不够的,在我折腾的

    2024年02月04日
    浏览(42)
  • 从 Uber 数据泄露事件我们可以学到什么?

    Uber 数据泄露始于一名黑客从暗网市场购买属于一名 Uber 员工的被盗凭证。最初尝试使用这些凭据连接到 Uber 的网络失败,因为该帐户受 MFA 保护。为了克服这一安全障碍,黑客通过 What’s App 联系了 Uber 员工,并假装是 Uber 的安全人员,要求该员工批准将 MFA 通知发送到他们

    2024年02月04日
    浏览(47)
  • 《从零开始读懂Web3》读后感 之 Web 3.0的前世今生

    介绍 什么是 Web 3.0 (Web3)? 网络的演变 为什么 Web 3.0 很重要? Web 3.0 将如何运作? Web 3.0 的主要功能和技术 Web 3.0 用例和应用程序 Web 3.0 的潜在好处是什么? Web 3.0 的潜在挑战是什么? Web 3.0 何时发布? 如何为 Web 3.0 做好准备? 更多 Web 3.0 常见问题解答 《从零开始读懂

    2024年01月16日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包