当前位置: 首页 > news >正文

学习day55

消息订阅与发布

  1. 消息订阅与发布是一种组件间通信的方式,适用于任意组件间通信

  2. 使用步骤:

    1. 安装pubsub:npm i pubsub-js

    2. 引入:import pubsub from 'pubsub-js'

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

      export default {methods(){demo(data){...}}...mounted() {this.pid = pubsub.subscribe('xxx',this.demo)}
      }

    4. 提供数据:pubsub.publish('xxx',data)

    5. 最好在beforeDestroy钩子中,使用pubsub.unsubscribe(pid)取消订阅

School.vue

<template><div class="school"><h2>学校名称:{{name}}</h2><h2>学校地址:{{adress}}</h2></div>
</template><script>
import pubsub from 'pubsub-js'export default {name:'School',data(){return{name:'尚硅谷',adress:'北京昌平'  }},methods:{demo(msgName,data){console.log('有人发布了hello消息,hello消息的回调执行了',data)}},mounted(){this.pubId=pubsub.subscribe('hello',this.demo// console.log('有人发布了hello消息,hello消息的回调执行了',b))},beforeDestroy(){pubsub.unsubscribe(this.pubId)}}
</script>
<style scoped>
.school{background-color: skyblue;
}
</style>

Student.vue

<template><div class="student"><h2>学生姓名:{{name}}</h2><h2>学生性别:{{sex}}</h2><button @click="sendStudentName">把学生名给School组件</button></div>
</template><script>
import pubsub from 'pubsub-js'export default {name:'Student',data(){return{name:'张三',sex:'男', }},methods:{sendStudentName(){pubsub.publish('hello',666)}},}
</script>
<style scoped>.student{background-color: pink;}
</style>

$nextTick

  1. 语法:this.$nextTick(回调函数)
  2. 作用:在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

myItem.vue

<template><li><label><input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/><span v-show="!todo.isEdit">{{todo.title}}</span><input v-show="todo.isEdit" type="text" :value="todo.list" @blur="handleBlur(todo,$event)" ref="inputTitle"></label><button class="btn btn-danger" @click="handleDelete(todo.id,todo.title)">删除</button><button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button></li>
</template><script>import pubsub from 'pubsub-js'export default {name:'MyItem',props:['todo'],methods:{handleCheck(id){this.$bus.$emit('checkTodo',id)},handleDelete(id,title){if(confirm("确定删除任务:"+title+"吗?")){//this.$bus.$emit('deleteTodo',id)pubsub.publish('deleteTodo',id)}},//编辑handleEdit(todo){if(todo.hasOwnProperty('isEdit')){todo.isEdit=true}else{this.$set(todo,'isEdit',true)}this.$nextTick(function(){this.$refs.inputTitle.focus()})},//失去焦点回调(真正执行修改函数)handleBlur(todo,e){todo.isEdit=falsethis.$bus.$emit('updateTodo',todo.id,e.target.value)}}}
</script><style scoped>li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover {background-color: #eee;}li:hover button{display: block;}
</style>

过度与动画

  1. 准备好样式:

    • 元素进入的样式:
      1. v-enter:进入的起点
      2. v-enter-active:进入过程中
      3. v-enter-to:进入的终点
    • 元素离开的样式:
      1. v-leave:离开的起点
      2. v-leave-active:离开过程中
      3. v-leave-to:离开的终点
  2. 使用<transition>包裹要过度的元素,并配置name属性:

    <transition name="hello"><h1 v-show="isShow">你好啊!</h1>
    </transition>
  3. 备注:若有多个元素需要过度,则需要使用:<transition-group>,且每个元素都要指定key

App.vue

<template><div><TestVue></TestVue><Test2Vue></Test2Vue><Test3Vue></Test3Vue></div>
</template><script>
import TestVue from './components/Test.vue'
import Test2Vue from './components/Test2.vue'
import Test3Vue from './components/Test3.vue'export default {name:'App',components: { TestVue,Test2Vue,Test3Vue },}
</script>

Test.vue

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition name="hello"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name:'Test',data(){return{isShow:true}}}
</script><style scoped>
h1{background-color: orange;
}.hello-enter-active{animation: atguigu 1s;}.hello-leave-active{animation: atguigu 1s reverse;}@keyframes atguigu {from{transform:translateX(-100%);}to{transform: translateX(0px);}}</style>>

Test2.vue

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-group name="hello" appear><h1 v-show="!isShow" key="1">你好啊</h1><h1 v-show="isShow" key="2">尚硅谷</h1></transition-group></div>
</template><script>
export default {name:'Test',data(){return{isShow:true}}}
</script><style scoped>
h1{background-color: orange;}/**进入的起点 离开的终点 */.hello-enter,.hello-leave-to{transform: translateX(-100%);}.hello-enter-active,.hello-leave.active{transition: 0.5s linear;}/*进入的终点  离开的起点*/.hello-enter-to,.hello-leave{transform: translateX(0);}</style>>

Test3.vue

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-groupappearname="animate__animated animate__bounce"enter-active-class="animate_swing"leave-active-class="animate_backOutUp"><h1 v-show="!isShow" key="1">你好啊</h1><h1 v-show="isShow" key="2">尚硅谷</h1></transition-group></div>
</template><script>
import 'animate.css'export default {name:'Test',data(){return{isShow:true}}}
</script><style scoped>
h1{background-color: orange;}  </style>>

相关文章:

学习day55

消息订阅与发布 消息订阅与发布是一种组件间通信的方式&#xff0c;适用于任意组件间通信 使用步骤&#xff1a; 安装pubsub&#xff1a;npm i pubsub-js 引入&#xff1a;import pubsub from pubsub-js 接收数据&#xff1a;A组件想接收数据&#xff0c;则在A组件中订阅消息…...

C++-Rust-一次性掌握两门语言

C-Rust-一次性掌握两门语言 简介特色数据类型声明常量、变量判断与循环函数抽象化的对象&#xff1a;类与接口枚举模板与泛型Lambda匿名函数表达式 简介 本文主要是通过介绍C和Rust的基础语法达成极速入门两门开发语言。 C是在C语言的基础之上添加了面向对象的类、重载、模板等…...

汇编调用C语言定义的全局变量

在threadx移植中&#xff0c;系统的systick通过了宏定义的方式定义&#xff0c;很难对接库函数的时钟频率&#xff0c;不太利于进行维护 所以在C文件中自己定义了一个systick_Div的变量&#xff0c;通过宏定义方式设定systick的时钟频率 在汇编下要加载这个systick分频系数 …...

WEB 文件包含 /伪协议

首先谈谈什么是文件包含 WEB入门——文件包含漏洞与PHP伪协议_文件包含php伪协议_HasntStartIsOver的博客-CSDN博客 文件包含 程序员在编写的时候 可能写了自己的 函数 如果想多次调用 那么就需要 重新写在源代码中 太过于麻烦了只需要写入 funcation.php然后在需要引用的地…...

ComPDFKit PDF SDK库(支持Windows、Web、Android、iOS、Mac等平台)

ComPDFKit提供专业、全平台支持的PDF开发库&#xff0c;包括Windows、Mac、Linux、Android、iOS、Web平台。开发者可以快速、灵活整合PDF功能到各开发平台的软件、程序、系统中。丰富的功能&#xff0c;多种开发语言&#xff0c;灵活的部署方案可供选择&#xff0c;满足您对PDF…...

微服务契约测试框架-Pact

契约测试 契约测试的思想就是将原本的 Consumer 与 Provider 间同步的集成测试&#xff0c;通过契约进行解耦&#xff0c;变成 Consumer 与 Provider 端两个各自独立的、异步的单元测试。 契约测试的优点&#xff1a; 契约测试与单元测试以及其它测试之间没有重复&#xff0c…...

LightGlue论文翻译

LightGlue:光速下的局部特征匹配 摘要 - 我们介绍 LightGlue&#xff0c;一个深度神经网络&#xff0c;学习匹配图像中的局部特征。我们重新审视 SuperGlue 的多重设计决策&#xff0c;稀疏匹配的最新技术&#xff0c;并得出简单而有效的改进。累积起来&#xff0c;它们使 Lig…...

iOS开发-CAShapeLayer与UIBezierPath实现微信首页的下拉菜单效果

iOS开发-CAShapeLayer与UIBezierPath实现微信首页的下拉菜单效果 之前开发中遇到需要使用实现微信首页的下拉菜单效果。用到了CAShapeLayer与UIBezierPath绘制菜单外框。 一、效果图 二、CAShapeLayer与UIBezierPath 2.1、CAShapeLayer是什么&#xff1f; CAShapeLayer继承自…...

《Elasticsearch 源码解析与优化实战》第5章:选主流程

《Elasticsearch 源码解析与优化实战》第5章&#xff1a;选主流程 - 墨天轮 一、简介 Discovery 模块负责发现集群中的节点&#xff0c;以及选择主节点。ES 支持多种不同 Discovery 类型选择&#xff0c;内置的实现称为Zen Discovery ,其他的包括公有云平台亚马逊的EC2、谷歌…...

Spring Cloud Alibaba - Nacos源码分析(三)

目录 一、Nacos客户端服务订阅的事件机制 1、监听事件的注册 2、ServiceInfo处理 serviceInfoHolder.processServiceInfo 一、Nacos客户端服务订阅的事件机制 Nacos客户端订阅的核心流程&#xff1a;Nacos客户端通过一个定时任务&#xff0c;每6秒从注册中心获取实例列表&…...

DOCKER镜像和容器

1.前言 ​ 初见DOCKER&#xff0c;感觉和我们常用的虚拟机&#xff08;VMware&#xff0c;viurebox&#xff09;类似&#xff0c;是一个独立于宿主机的模块&#xff0c;可以解决程序在各个系统间的移植&#xff0c;但它真的仅仅是这样嘛&#xff1f; 2.容器的优缺点 1.1.容器…...

探索网页原型设计:构建出色的用户体验

在当今数字化时代&#xff0c;用户对网页体验的要求日益提高。在网页设计过程中&#xff0c;扮演着至关重要的角色。通过网页原型设计&#xff0c;产品经理能够更好地展示和传达网页的整体布局、导航结构、元素位置和交互效果&#xff0c;从而使团队成员更清晰地了解设计意图&a…...

48,排序算法merge

功能描述&#xff1a; 两个容器元素合并&#xff0c;并储存到另一容器中 函数原型&#xff1a; merge(iterator beg1,iterator end1,iterator beg2,iterator end2,iterator dest); //容器元素合并&#xff0c;并存储到另一个容器中 //注意&#xff1a;两个容器必须是有序的…...

【MySQL】复合查询

复合查询目录 一、基本查询二、多表查询三、自连接四、子查询4.1 单行子查询4.2 多行子查询4.3 多列子查询4.4 在from子句中使用子查询4.5 合并查询4.5.1 union4.5.2 union all 五、实战OJ 一、基本查询 --查询工资高于500或岗位为MANAGER的雇员&#xff0c;同时还要满足他们的…...

JavaScript中的this指向及绑定规则

在JavaScript中&#xff0c;this是一个特殊的关键字&#xff0c;用于表示函数执行的上下文对象&#xff0c;也就是当前函数被调用时所在的对象。由于JavaScript的函数调用方式多种多样&#xff0c;this的指向也因此而变化。本文将介绍JavaScript中this的指向及绑定规则&#xf…...

css中预编译理解,它们之间区别

css预编译&#xff1f; css预编译器用一种专门的编程语言&#xff0c;它可以对web页面样式然后再编译成正常css文件&#xff0c;可以更加方便和高效的编写css代表。主要作用就是为css提供了变量&#xff0c;函数&#xff0c;嵌套&#xff0c;继承&#xff0c;混合等功能&#…...

如何使用Java处理JSON数据?

在Java中&#xff0c;您可以使用许多库来处理JSON数据。以下是使用一种常见的库 Gson 的示例&#xff1a; 首先&#xff0c;确保您已经将 Gson 库添加到您的项目中。您可以在 Maven 中添加以下依赖项&#xff1a; <dependency><groupId>com.google.code.gson<…...

java设计模式-观察者模式

什么是观察者模式 观察者模式&#xff08;Observer&#xff09;是软件设计中的一种行为模式。 它定义了对象之间的一对多关系&#xff0c;其中如果一个对象改变了状态&#xff0c;所有依赖它的对象都会自动被通知并更新。 这种模式包含了两种主要的角色&#xff0c;即被观察…...

HiveSQL SparkSQL中常用知识点记录

目录 0. 相关文章链接 1. hive中多表full join主键重复问题 2. Hive中选出最新一个分区中新增和变化的数据 3. Hive中使用sort_array函数解决collet_list列表排序混乱问题 4. SQL中对小数位数很多的数值转换成文本的时候不使用科学计数法 5. HiveSQL & SparkSQL中炸裂…...

mac不识别移动硬盘导致无法拷贝资源

背景 硬盘插入到Mac电脑上之后&#xff0c;mac不识别移动硬盘导致无法拷贝资源。 移动硬盘在Mac上无法被识别的原因可能有很多&#xff0c;多数情况下&#xff0c;是硬盘的格式与Mac电脑不兼容。 文件系统格式不兼容 macOS使用的文件系统是HFS或APFS&#xff0c;如果移动硬盘是…...

洛谷-入门4-数组3

P2141 [NOIP 2014 普及组] 珠心算测验 题目背景 NOIP2014 普及 T1 题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术。珠心算训练&#xff0c;既能够开发智力&#xff0c;又能够为日常生活带来很多便利&#xff0c;因而在很多学校得到普及。 某学…...

人工智能入门全景图:Nanbeige 4.1-3B带你梳理AI核心概念与技术栈

人工智能入门全景图&#xff1a;Nanbeige 4.1-3B带你梳理AI核心概念与技术栈 你是不是也对人工智能充满好奇&#xff0c;但一看到那些复杂的术语和庞大的技术栈就感到无从下手&#xff1f;机器学习、深度学习、神经网络、NLP、CV……这些词听起来很酷&#xff0c;但它们到底是…...

JIT编译延迟高达2.3秒?紧急修复Python 3.14.0b3中`--jit-threshold=0`参数失效Bug的3种绕行方案(含补丁级patch)

第一章&#xff1a;JIT编译延迟高达2.3秒&#xff1f;紧急修复Python 3.14.0b3中--jit-threshold0参数失效Bug的3种绕行方案&#xff08;含补丁级patch&#xff09; Python 3.14.0b3 引入的自适应JIT编译器在启用 --jit-threshold0 时未能立即触发热路径编译&#xff0c;导致首…...

【CTF | pwn篇】从栈溢出到ROP:ctfshow pwn实战技巧精讲

1. 栈溢出基础&#xff1a;从零开始理解漏洞利用 栈溢出是PWN领域最经典的漏洞类型之一&#xff0c;也是CTF比赛中出现频率最高的题型。我们先从一个最简单的例子开始&#xff0c;看看如何利用栈溢出漏洞控制程序执行流程。 1.1 栈的结构与函数调用 当程序调用函数时&#xff0…...

5分钟搞定AI超清画质增强:镜像部署与使用全攻略

5分钟搞定AI超清画质增强&#xff1a;镜像部署与使用全攻略 1. 引言&#xff1a;为什么需要AI画质增强 1.1 低清图像的普遍困扰 我们每天都会遇到各种低质量图片&#xff1a;模糊的老照片、压缩过度的网络图片、分辨率不足的截图。传统放大方法就像简单拉伸橡皮筋&#xff0…...

Glyph镜像实测分享:低质量图片文字识别,效果出乎意料

Glyph镜像实测分享&#xff1a;低质量图片文字识别&#xff0c;效果出乎意料 1. 引言&#xff1a;低质量图片文字识别的挑战 在日常工作和生活中&#xff0c;我们经常会遇到需要从低质量图片中提取文字的场景。无论是模糊的扫描件、低分辨率的截图&#xff0c;还是光线不佳的…...

Qwen2.5-7B-Instruct入门指南:7B模型对输入token长度的鲁棒性压力测试

Qwen2.5-7B-Instruct入门指南&#xff1a;7B模型对输入token长度的鲁棒性压力测试 1. 项目概述 Qwen2.5-7B-Instruct是阿里通义千问系列的旗舰级大模型&#xff0c;相比1.5B和3B轻量版本&#xff0c;7B参数规模带来了质的飞跃。这个模型在逻辑推理、长文本创作、复杂代码编写…...

Tina Linux 适配 RTL8733bs WIFI 模块:从设备树到网络连接全流程解析

1. 硬件接口配置与设备树修改 第一次接触RTL8733bs这个Wi-Fi/蓝牙二合一模块时&#xff0c;我花了两天时间才搞明白硬件连接和设备树配置的关系。这个模块通过SDIO接口与全志V853主控通信&#xff0c;蓝牙部分则使用UART接口。下面我就把踩过的坑和验证过的正确配置分享给大家。…...

新手零压力入门:借助快马ai互动教程轻松搞定node.js安装与环境搭建

最近在学前端开发&#xff0c;发现很多教程都提到要安装Node.js。作为一个纯小白&#xff0c;第一次看到"环境变量"、"包管理器"这些词简直一头雾水。好在发现了InsCode(快马)平台&#xff0c;它把复杂的安装过程变成了可以边学边做的互动教程&#xff0c;…...

突破原厂限制:用开源相机工具解锁Sony相机7大隐藏功能

突破原厂限制&#xff1a;用开源相机工具解锁Sony相机7大隐藏功能 【免费下载链接】Sony-PMCA-RE Reverse Engineering Sony Digital Cameras 项目地址: https://gitcode.com/gh_mirrors/so/Sony-PMCA-RE 作为一名摄影爱好者&#xff0c;我一直梦想能充分掌控我的Sony相…...