Vue2(十):全局事件总线、消息订阅与发布、TodoList的编辑功能、$nextTick、动画

一、全局事件总线!!

任意组件间通信

比如a想收到别的组件的数据,那么就在a里面给x绑定一个demo自定义事件,所以a里面就得有一个回调函数吧,然后我要是想让d组件给a穿数据,那就让d去触发x的自定义事件,并且传参数进去,那么触发自定义事件就也会调用回调函数,就把数据给到a了 

1.安装全局事件总线

那么x应该放到哪里呢?之前学prototype的时候说它可以让vc、vm都能找到,x放在vue的原型对象上,x写到main.js中

new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus=this},
})

注意$on、$off只有vm、vc才能用,如果把创建为一个新的vc可以实现,但是代码有点多,我们就把它创建成一个vm,有一个现成的vm让x直接等于它,写在new Vue后边呢在模版解析完之后才能赋值太晚了,所以就用钩子来赋值。(x一般写成$bus)

2.使用事件总线

a组件要绑定自定义事件

mounted(){this.$bus.$on('hello',(data)=>{console.log('我是school,我收到了',data)})}

3.提供数据

x中开始调用触发

<button @click="sendName">点我把数据传给school</button>
methods:{sendName(){this.$bus.$emit('hello',666)}}

注意:1.我们会有很多条线调用两个组件一个方法名,这些方法名不能重复

2.我们在销毁之前要把事件解绑

4.解绑事件

在哪儿绑的在哪儿解,为啥之前的自定义事件销毁之前不去解绑呢?因为之前那些组件销毁的话身上的自定义事件就一起嘎了,但是这个无论哪个组件销毁x都一直在,组件都销毁了还留着事件那x太累了

beforeDestroy(){this.$bus.$off('hello')}

5.TodoList中的孙传父

app里传给list再传给item的函数全都不要了

mounted(){// this.$bus.on('checkTodo',(id)=>{//   this.checkTodo(id)// }), 不是这么写啊,这里是事件名和事件函数,我本来就是要触发那个函数,而且函数已经写好了直接用this.$bus.$on('deleteTodo',this.deleteTodo)this.$bus.$on('checkTodo',this.checkTodo)},beforeDestroy(){this.$bus.$off(['checkTodo','deleteTodo'])}

item:

methods: {handleCheck(id){this.$bus.$emit('checkTodo',id)},handleDelete(id){this.$bus.$emit('deleteTodo',id)}},

检查vue中如果sourse为root那一般就是$bus

二、消息订阅与发布(pubsub)

在vue里用的不多

在a(需要消息)组件里我们订阅了一个demo的消息,内容是test,然后c(提供数据、发布消息)一旦发布demo的消息并传参666,那么a就会立马收到

1.使用方法

需要引入pubsub-js库,可以在任何一个框架使用

安装pubsub:npm i pubsub-js
引入:import pubsub from 'pubsub-js

接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。

mounted(){// this.$bus.$on('hello',(data)=>{// 	console.log('我是school,我收到了',data)// })this.pubid=pubsub.subscribe('hello',(msgName,data)=>{console.log('dingyuele ',msgName,data)})//两个参数第一个是事件名,第二个是(事件名,数据)},beforeDestroy(){// this.$bus.$off('hello')pubsub.unsubscribe(this.pubid)//括号里面写‘hello’不对,每次订阅消息都有一个订阅id,类似定时器//上面和这里不写this找不到}

提供数据:

methods:{sendName(){pubsub.publish('hello',666)}}

2.TodoList中用pubsub

第三方Vue中不支持查看

我们来修改一下todolist 的delete方法,app:

import pubsub from 'pubsub-js'//mounted:this.pubId=pubsub.subscribe('deleteTodo',this.deleteTodo)},beforeDestroy(){//this.$bus.$off(['checkTodo'])pubsub.unsubscribe(this.pubId)}

item:

handleDelete(id){//this.$bus.$emit('deleteTodo',id)pubsub.publish('deleteTodo',id)}

然后我们之前不是说会传参过来两个吗,一个是函数名,一个是形参,但是函数名我们其实不太需要,这个里面调的是methods里面我们写好的函数,所以就用_占位一下

deleteTodo(_,id)
//传不都是传两个参数吗,用这个_占位

这里没有用箭头函数是我们的函数写在了methods里面,this(delete里的this)就是vm

(为啥要让里面函数的this指向vm?存个疑)

三、TodoList的编辑功能

1.点击获取

首先实现在每个爱好的后面再加一个按钮编辑,让文字处于input框中

在处于input框中的时候,就应该是文字在框里面,编辑完成之后又得恢复成文字样式,所以还得设置一个todo.isEdit来判断当前的todo是不是在编辑中

<span v-show="!todo.isEdit">{{todo.title}}</span><input v-show="todo.isEdit" type="text" :value="todo.title" > 

isEdit为true的时候,表单就出来,否则就隐藏,因为变换比较多的问题这里不用v-if

然后开始添加点击之后让isEdit为true

handleEdit(todo){//todo.isEdit=true 这么加只是表层加了,isEdit没有getter、setter//这样每次都追加的写法有点不好,因为你第一次编辑确实得加这个属性,但是第二次就没必要了this.$set(todo,'isEdit',true)},

但是这样会让每次点击都重新添加isEdit属性不管你以前有没有

   handleEdit(todo) {if (todo.isEdit !== undefined) {todo.isEdit = true;} else {this.$set(todo, 'isEdit', true);}},

老师讲的是hasOwnProperty方法,但是报错说我电脑没有这个我就没用

2.失去焦点

失去焦点之后,isEdit为false,表单消失,而且之前修改的内容需要改到我们的文字里面,注意传的是input表单的value而不是todo.title

<input v-show="todo.isEdit" type="text" :value="todo.title" @blur="handleBlur(todo,$event)"> 
//失去焦点真正执行修改handleBlur(todo,e){//现在的todo已经有isEdit属性了todo.isEdit=falsethis.$bus.$emit('updataTodo',todo.id,e.target.value)}

用全局事件来修改app里的数据,在item中触发updateTodo事件

app:遍历数组看谁的id和我传的一样就修改它的title

updateTodo(id,title){this.todos.forEach((todo)=>{if(todo.id==id) {todo.title=title}})},
mounted(){this.$bus.$on('updateTodo',this.updateTodo)
}
beforeDestroy() {this.$bus.$off('editTodo');
},

四、$nextTick

1、语法:this.$nextTick(回调函数)
2、作用:在下一次 DOM 更新结束,v-for循环结束后执行其指定的回调。
3、什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时(如input自动获取焦点),要在nextTick所指定的回调函数中执行。

我点击了编辑按钮之后我想让他自动获取焦点,如果直接写this.$refs.inputTitle.focus()的话,模版解析等这个函数走完了才显示在页面上,但是那个时候就focus完了,在handleEdit(todo)用$nextTick。

this.$nextTick(function (){this.$refs.inputTitle.focus()});

五、动画

1.动画效果

transition标签在html中不显示,是vue提供的,可以在style设置来去的动画,appear默认打开页面就出现 来 的动画

<button @click="isShow = !isShow">显示/隐藏</button><transition name="hello" :appear="true"><!-- appear="true"这样会报错因为人家要的是布尔值不是字符串 --><!-- :appear="true"简写为appear --><h1 v-show="isShow">你好啊</h1></transition>
.hello-enter-active{animation: atguigu 1s;
}
.hello-leave-active{animation: atguigu 1s reverse;
}
@keyframes atguigu {from{transform: translateX(-100%);}to{transform: translateX(0px);}
}

2.用过渡实现以上效果

元素进入的样式:
v-enter:进入的起点
v-enter-active:进入过程中
v-enter-to:进入的终点

元素离开的样式:
v-leave:离开的起点
v-leave-active:离开过程中
v-leave-to:离开的终点

.hello-enter,.hello-leave-to{/* 进入的起点 */transform: translateX(-100%);}
.hello-enter-to,.hello-leave{
/* 进入的终点 */
transform: translateX(0);
}
.hello-enter-active,.hello-leave-active{transition: 0.5s linear;
}

3.多个元素实现过渡

transition-group

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-group name="hello" :appear="true"><!-- appear="true"这样会报错因为人家要的是布尔值不是字符串 --><!-- :appear="true"简写为appear --><h1 v-show="isShow" key="1">你好啊</h1><h1 v-show="isShow" key="2">你好啊</h1></transition-group></div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/768055.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洛谷_P2678 [NOIP2015 提高组] 跳石头_python写法

P2678 [NOIP2015 提高组] 跳石头 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) d, n, m map(int,input().split())data [0] for i in range(n):value int(input())data.append(value) data.append(d)def check(mid):now 0cnt 0for i in range(1,n2):if abs(data[now]-da…

【课程】Nginx核心知识100讲

02.Nginx 适用于哪些场景 ?.mp4 03.Nginx 出现的历史背景.mp4 04.为什么用 Nginx : 它的 5 个主要优点mp4 05.Nginx 的四个主要组成部分.mp4 06.Nginx 的版本发布历史.mp4 07.选择哪一个 Nginx 发行版本 ?.mp4 08.编译出适合自己的 Nginx.mp4 09.Nginx 配置文件的通用语法介绍…

机器学习(27)

文章目录 文献阅读1. 题目2. abstract3. 网络架构3.1 Theoretical Results 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.3.1 数据集4.3.2 参数设置 4.4 结论 三、实现GAN1. 任务要求2. 实验结果3.实验代码3.1数据准备3.2 模型构建3.3 展示函数3.4 训练过程 小结本周内…

从0写一个问卷调查APP的第13天-1

1.今日任务 我也只是一个大学生&#xff0c;有什么思路不对的地方给我指出来哟! 分析&#xff1a;上次我们实现了任务调查的插入。但是我们插入的问卷调查只有它的标题&#xff0c;也就是这个问卷调查是什么我们告诉数据库了&#xff0c;但是现在我们还没有给它添加任何问题&…

蓝桥杯真题:幸运数字

这道题可以用 integer.string&#xff08;&#xff09;求每个进制的数&#xff0c;但这里要每一位数相加&#xff0c;所以用这个方法会比较麻烦&#xff0c;如下 import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner scan new Sc…

图像去噪与增强技术

图像去噪与增强技术是数字图像处理领域中的两个重要方面&#xff0c;它们分别关注消除图像中的噪声和改善图像的质量。 图像去噪技术的主要目的是从受噪声干扰的图像中去除不必要的随机信号&#xff0c;以恢复图像的真实内容。这对于图像的进一步分析和理解至关重要。去噪技术包…

华为OD机试真题-推荐多样性-2024年OD统一考试(C卷)

题目描述: 推荐多样性需要从多个列表中选择元素,一次性要返回N屏数据(窗口数量),每屏展示K个元素(窗口大小),选择策略: 1. 各个列表元素需要做穿插处理,即先从第一个列表中为每屏选择一个元素,再从第二个列表中为每屏选择一个元素,依次类推 2. 每个列表的元素尽量均…

spring注解驱动系列--AOP探究二

上篇中记录了AnnotationAwareAspectJAutoProxyCreator的创建以及注册&#xff0c;主要是 1、EnableAspectJAutoProxy 注解会开启AOP功能 2、然后这个注解会往容器中注册一个AnnotationAwareAspectJAutoProxyCreator组件。 3、之后在容器创建过程中&#xff0c;注册后置处理器&a…

蓝桥杯刷题_day1_回文数_水仙花数_进制转换

文章目录 特殊的回文数回文数水仙花数十六进制转八进制_n次 特殊的回文数 问题描述   123321是一个非常特殊的数&#xff0c;它从左边读和从右边读是一样的。   输入一个正整数n&#xff0c; 编程求所有这样的五位和六位十进制数&#xff0c;满足各位数字之和等于n 。 解题…

关于四篇GNN论文的阅读笔记PPT:包括GATNE,AM-GCN,HGSL和coGSL

关于四篇GNN论文的阅读笔记PPT&#xff1a;包括GATNE&#xff0c;AM-GCN&#xff0c;HGSL和coGSL 前言GATNEAM-GCNHGSLcoGSL 前言 这里的PPT主要是在跟Graph Transformer一起的&#xff1a; 【图-注意力笔记&#xff0c;篇章1】Graph Transformer&#xff1a;包括Graph Trans…

mysql基础3索引

存储引擎 存储引擎就是存储数据、建立索引、更新/查询数据等技术的实现方式 。存储引擎是基于表的&#xff0c;而不是 基于库的&#xff0c;所以存储引擎也可被称为表类型。 1). 建表时指定存储引擎 CREATE TABLE 表名(字段1 字段1类型 [ COMMENT 字段1注释 ] ,......字段n…

JAVA的学习日记DAY4

算术运算符 关系运算符&#xff08;比较运算符&#xff09; 关系运算符的结果都是boolean型&#xff0c;也就是要么是true&#xff0c;要么是false 关系表达式 经常用在if结构的条件中或循环结构的条件中 逻辑运算符 && 和 & 使用区别 &&短路与&#xff…

python学习9:python的代码中的数据类型转换

python中数据类型的转换 1.为什么需要转换类型呢&#xff1f; 数据类型之间&#xff0c;在特定的场景下&#xff0c;是可以相互转换的&#xff0c;如字符串转数字&#xff0c;数字转字符串等&#xff1b;数据类型转换&#xff0c;在以后是我们经常使用到的功能&#xff0c;例如…

五、分布式锁-redission

源码仓库地址&#xff1a;gitgitee.com:chuangchuang-liu/hm-dingping.git 1、redission介绍 目前基于redis的setnx特性实现的自定义分布式锁仍存在的问题&#xff1a; 问题描述重入问题同一个线程无法多次获取统一把锁。当方法A成功获取锁后&#xff0c;调用方法B&#xff0…

腾讯云服务器价格查询系统,2024年1年、3年和5年活动价格表

腾讯云服务器多少钱一年&#xff1f;61元一年起。2024年最新腾讯云服务器优惠价格表&#xff0c;腾讯云轻量2核2G3M服务器61元一年、2核2G4M服务器99元一年可买三年、2核4G5M服务器165元一年、3年756元、轻量4核8M12M服务器646元15个月、4核16G10M配置32元1个月、312元一年、8核…

Java生成动态图形验证码

dome /*** ClassName : VerifyCodeController* Description : 图片验证码* Author : llh* Date: 2024-03-22 10:48*/ Controller RequestMapping("/verifycode") public class VerifyCodeController {Resourceprivate StringRedisTemplate stringRedisTemplate;Get…

YOLOv8:Roboflow公开数据集训练模型

Roboflow公开数据集 Roboflow是一个提供计算机视觉数据集管理和处理工具的平台。虽然Roboflow本身并不创建或策划公开数据集&#xff0c;但它提供了一系列功能&#xff0c;帮助用户组织、预处理、增强和导出计算机视觉数据集。 官方网站&#xff1a;https://universe.roboflow…

求解完全背包问题

10.求解完全背包问题 - 蓝桥云课 (lanqiao.cn) import os import sys# 请在此输入您的代码 taotal_w,nmap(int,input().split()) w[] v[] dp[0]*(taotal_w1) #物品无限使用不用考虑 for i in range(n):wi,vimap(int,input().split())w.append(wi)v.append(vi)for i in range(n…

Java学习笔记01

1.1 Java简介 Java的前身是Oak&#xff0c;詹姆斯高斯林是java之父。 1.2 Java体系 Java是一种与平台无关的语言&#xff0c;其源代码可以被编译成一种结构中立的中间文件&#xff08;.class&#xff0c;字节码文件&#xff09;于Java虚拟机上运行。 1.2.3 专有名词 JDK提…

【课程】MyBatisPlus视频教程

MyBatis-Plus是一款非常强大的MyBatis增强工具包,只做增强不做改变. 在不用编写任何SQL语句的情况下即可以极其方便的实现单一、批量、分页等操作。 本套教程基于MyBatis-Plus新2.3版本,详细讲授&#xff1a;集成Mybatis-Plus、 通用CRUD、EntityWrapper条件构造器、ActiveRec…