Vue之动态事件绑定

最新推荐文章于 2024-11-28 09:49:05 发布

snakeZix

最新推荐文章于 2024-11-28 09:49:05 发布

阅读量4.3k

点赞数

分类专栏：打开Vue的正确姿势文章标签： vue javascript

本文链接：https://blog.csdn.net/wucan111/article/details/107665125

版权

本文探讨了Vue.js中动态事件绑定的概念，包括使用$on、$off和$once方法进行事件监听与解除。特别提到了$once在减少代码冗余和提高可维护性方面的优势。此外，还介绍了Vue.nextTick()的用途，它用于在DOM更新后的下一个tick中执行回调，确保数据变化与DOM更新的同步。这是一个理解Vue响应式数据更新流程的关键API。

摘要由CSDN通过智能技术生成

什么都有动态的，动态的值，动态的属性，动态响应数据，自然少不了动态的事件绑定
什么是静态的呢？在模板语法中template的标签绑定v-on:eventName-“method”

$on

this.$on(eventName, eventHandler) 绑定组件，动态侦听事件

{
   
  created() {
   
    this.$on('gg', this.gg) 
    //注意这个this.gg 它只是一个函数，但是有意思的是，在$on的內部的回调里 this.gg.call(this) 是这么执行的
    //你或许会说这可能是VM在其中绑定option.methods到vm上做的，但是你可以直接this.$on('gg', ()=>{console.log(this)}) 试试
  },
  methods: {
   
    gg() {
   
      console.log('打印出gg')
    }
  }
}

$off

this.$off(eventName, eventHandler) 解绑组件，接触事件侦听

{
   
  created() {
   
    this.$on('gg', this.gg

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

snakeZix

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue之事件绑定（初识Vue事件）

百赢出品，必属精品

04-19

2146

Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。

vue动态生成dom并且自动绑定事件

08-30

本篇文章主要介绍了vue动态生成dom并且自动绑定事件，具有一定的参考价值，有兴趣的可以了解一下。

1 条评论您还未登录，请先登录后发表或查看评论

动态绑定属性

qq_33879627的博客

09-21

3348

（四）动态绑定属性 4.1 v-bind的基本使用某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:sr

如何实现Vue组件的动态绑定？

最新发布

有我更精彩的博客

11-28

1040

Vue.js 是一个渐进式框架，用于构建用户界面。在开发过程中，我们经常需要根据不同的条件动态显示组件。了解如何实现Vue组件的动态绑定对于提高我们开发的灵活性和效率至关重要。在本文中，我将详细介绍如何实现Vue组件的动态绑定，提供示例代码，以帮助你更深入地理解这个概念。

Vue中绑定动态事件

qq_44741577的博客

03-22

1769

有些情况我们需要根据情况不同绑定不同的事件，比如：当这个元素为button的时候我需要绑定click事件，当为input的时候，我需要绑定change事件。

vue3动态绑定事件

weixin_45631367的博客

12-04

1033

使用v-on进行动态绑定事件。

vue中的事件绑定

ead_gbe的博客

06-27

5945

按钮1</button><button class="btn" v-on:click = "showInfo2(66)">按钮2

详解Vue 动态组件与全局事件绑定总结

10-17

本文将详细介绍如何在Vue项目中实现动态组件的切换，并通过全局事件来控制组件的行为，以及在组件销毁时如何清理全局事件的绑定，确保内存的合理使用。 ### 动态组件的实现在Vue.js中，使用`...

vue实现动态数据绑定

08-30

Vue 实现动态数据绑定 Vue.js 是一个流行的前端框架，它提供了许多强大的功能来帮助开发者快速构建复杂的 Web 应用程序。其中，动态数据绑定是 Vue.js 中一个非常重要的概念，它允许开发者将数据模型与用户界面...

Vue动态事件绑定

kbdmy的博客

10-14

2606

class与style事件绑定有三种:分别为(1)对象(2)数组(3)表达式 class 对象事件绑定如何来使用的呢看如下代码 .isi{ height: 100px; width: 100px; background: red; } 写了一个样式用来绑定下面看data data:{ ...

Vue.JS 基础

weixin_44546855的博客

06-08

351

AngularJS是Vue早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。 [8] Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 [] 。 Vue.js

【Vue知识体系总结 2，95%Java开发者已收藏的十大开源库

m0_60666209的博客

08-08

248

IDE使用WebStorm。四、Vue入门语法 1、使用Vue实现hello world <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{message}}</div&gt..

Vue3.0学习笔记-动态属性与事件绑定

petit_wu的专栏

03-03

3045

模板动态参数 v-on简写 <h2 v-on:click="hanldClick">{{message}}</h2> <h2 @click="hanldClick">{{message}}</h2> v-bind简写 <h2 v-bind:title="message">{{message}}</h2> <h2 :title="message">{{message}}</h2> 动态属性事件动态绑定

vue3 通过props动态绑定事件以及class

m0_74382023的博客

01-26

1164

今天在封装组件的时，涉及到了对插槽和props的使用，因为该组件涉及到多处使用到了，有些使用处需要绑定一些事件，有的则不用（固然全部都绑上，不监听不就完了嘛，但是我们实际上可以通过props来控制该事件的绑定）

vue指令v-on：绑定事件

m0_65027670的博客

09-06

352

vue绑定事件v-on

vue2动态组件动态绑定事件；component标签动态绑定事件；component组件动态绑定事件

lys20000913的博客

07-04

4588

vue2动态组件动态绑定事件；组件通过 component动态生成，基于v-bind绑定事件时事件不生效。因为是动态绑定所以不确定会在未来绑定多少事件，所以直接预定绑定n个事件，我预制了六个基本同一个组件也不会超过六个事件了如果在需要就在继续加即可。例如需要绑定 @click 则将 schema.events.a0.name 赋值为 click 并将对应事件函数绑定给 schema.events.a0.fun。存在小问题：可能我只需要绑定一个clic ...

vue动态绑定事件、传递参数

m0_51431448的博客

08-15

289

vue动态传递不确定个数的参数到子组件这个还是经常用的，动态绑定不确定个数的事件就不太常用了，写这篇也是因为自己没有好好看官方文档，所以来记录一下。下面的代码示例就采用vue2了，vue3也是一样的。相信大家对vue的父传子已经很熟悉了。假设子组件接受下面三个参数：那我们父组件可以单独传递：也可以一块儿通过v-bind直接传递整个对象，相当于将对象中的进行结构全部传递，官网也有写：https://cn.vuejs.org/api/built-in-directives.html#v-bind

Vue——动态绑定点击事件、样式

qq_43201350的博客

09-21

1156

// 绑定样式 <div :[name]="d1"></div> // 绑定点击事件 <div @[eventName]="myClick"></div> data () { return { d1: 'class', // id eventName: 'click' } } <style> #d1 { color: red; } .d1 { color: green; }

vue3 动态绑定dom事件

08-28

- *1* *2* [Vue之事件绑定](https://blog.csdn.net/zxj2589/article/details/129221594)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...