位置: IT常识 - 正文

【学Vue就跟玩一样】如何使用vue中的消息订阅与发布,如何使用vue实现动画效果(vue自学)

编辑:rootadmin
【学Vue就跟玩一样】如何使用vue中的消息订阅与发布,如何使用vue实现动画效果 一,消息订阅与发布1.什么是消息订阅与发布

推荐整理分享【学Vue就跟玩一样】如何使用vue中的消息订阅与发布,如何使用vue实现动画效果(vue自学),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:学vue用什么软件,vue学完,学vue用什么软件,vue自学,vue自学,vue自学太难了看不懂,vue学起来困难吗,vue学完,内容如对您有帮助,希望把文章链接给更多的朋友!

消息订阅与发布是一种组件间通信的方式,适用于任意组件间通信。能更好的实现组件间通信(消息订阅与发布就像是送报员一样。好比小a向报社订阅了一份报纸,然后在报社留下了自己的信息,然后送报员就按着小a留下的信息找到了小a所在的地方将报纸送给了他)

2.如何使用pubsub

1.首先我们要安装pubsub,打开vscode→打开终端→输入一下安装命令(也可以在cmd进行安装)

npm i pubsub-js

2.引入(在需要使用pubsub的组件内引入即可)

import pubsub from ' pubsub-js'

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

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

我们应该先找到想要接受数据的组件,配置一个mounted的配置项,进行消息的订阅subscribe这个单词也有订阅的意思,也就是下面这个组件就是小a的角色,他要订阅一份报纸,然后留下了自己的住址'hello',再利用回调获取数据,这里的msgName,data分别是订阅名和数据(也就是小a的家庭住址和送报员所携带的报纸)

import pubsub from "pubsub-js";export default {name: "School",data() {return {name: "山鱼特效屋",address: "南京北城区"};},mounted() {this.pubId = pubsub.subscribe("hello", (msgName, data) => {console.log("该消息已经发布", msgName, data);});},//使用完之后销毁该绑定事件避免后期错误使用beforeDestroy() {pubsub.unsubscribe();}};

提供数据

pubsub. publish( ' xxx' ,数据)

publish方法的第一个参数'hello'为订阅名,第二个参(this.name)为想要传递的数据。

import pubsub from "pubsub-js";export default {name: "Student",data() {return {name: "张三",sex: "男"};},// 配置一个methods项methods: {snedStudentName() {// 选择给谁提供数据pubsub.publish("hello", this.name);}}};

最好在beforeDestroy钩子中去取消订阅。

beforeDestroy() {pubsub.unsubscribe();}3.nextTick

1.语法:this. $nextTick(回调函数)

【学Vue就跟玩一样】如何使用vue中的消息订阅与发布,如何使用vue实现动画效果(vue自学)

2.作用:放在$nextTick 当中的操作不会立即执行,而是等数据更新,DOM更新完成之后再执行

3.使用时机:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

二,Vue封装的过度与动画1.作用

在插入,更新,移除DOM元素时,在合适的时候给元素添加样式类名。

2.写法

准备好样式:元素进入的样式

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

需要先有这个animate.css哦

npm i animate.css

1.v-enter:进入的起点

2.v-enter-active:进入过程中

3.v-enter-to:进入的终点

<template><div><button @click="isShow = !isShow">隐藏展示</button><transition-group name="shanyu" appear><h1 v-show="isShow" key = '1'>隐藏展示</h1><h1 v-show="isShow" key = '2'>隐藏展示</h1></transition-group></div></template><script>export default {name: "Test2",data() {return {isShow: true};}};</script><style scoped>h1 {background-color: rgb(139, 37, 255);}/* 进入的起点,离开的起点 */.shanyu-enter,.shanyu-leave-to {transform: translateX(-100%);}.shanyu-enter-active,.shanyu-leave-active{transition: .5s linear;}/* 进入的终点离开的终点 */.shanyu-enter-to,.shanyu-leave {transform: translateX(0);}</style>

元素离开的样式:

1.V-leave:离开的起点

2.V-leave-active:离开过程中

3.V-leave-to:离开的终点

4.使用<transition>包裹要过度的元素,并配置name属性

<transitionname="hello"><h1v-show=" isShow">你好啊! </h1></transition>

备注:若有多个元素需要过度,则需要使用: <transition-group>, 且每个元素都要指定key值。

<transition-group name="shanyu" appear><h1 v-show="isShow" key = '1'>隐藏展示</h1><h1 v-show="isShow" key = '2'>隐藏展示</h1></transition-group>
本文链接地址:https://www.jiuchutong.com/zhishi/300375.html 转载请保留说明!

上一篇:JS 数组中的 filter 方法(js 数组中的重数)

下一篇:TypeScript详解十六:类型声明(declare)(typescriptlang)

  • 漂流伞怎么取消自动续费(如何取消漂流伞连续订阅)

    漂流伞怎么取消自动续费(如何取消漂流伞连续订阅)

  • 稳定版升级开发版会清除数据吗(稳定版升级开发版需要解锁吗)

    稳定版升级开发版会清除数据吗(稳定版升级开发版需要解锁吗)

  • 读卡器插在电脑上怎么显示不出来怎么办(读卡器插在电脑上不显示怎么办)

    读卡器插在电脑上怎么显示不出来怎么办(读卡器插在电脑上不显示怎么办)

  • 荣耀9x悬浮窗怎么打开?(荣耀9x悬浮按钮)

    荣耀9x悬浮窗怎么打开?(荣耀9x悬浮按钮)

  • 快手注销后可以再申请吗(快手注销后可以马上再申请吗)

    快手注销后可以再申请吗(快手注销后可以马上再申请吗)

  • 硬盘数据线2.0和3.0区别(硬盘数据线2.0和3.0外观区别)

    硬盘数据线2.0和3.0区别(硬盘数据线2.0和3.0外观区别)

  • 抖音每天直播多长时间(抖音每天直播多少个小时能挣钱)

    抖音每天直播多长时间(抖音每天直播多少个小时能挣钱)

  • 华为手机里的大文件能删吗(华为手机里的大视频怎么传到电脑)

    华为手机里的大文件能删吗(华为手机里的大视频怎么传到电脑)

  • 电信卡hd啥意思(电信卡上hd什么意思)

    电信卡hd啥意思(电信卡上hd什么意思)

  • iphone每天定时开关机(苹果手机定时打开)

    iphone每天定时开关机(苹果手机定时打开)

  • 微信转账自动收款怎么弄(微信转出的钱怎么收回来)

    微信转账自动收款怎么弄(微信转出的钱怎么收回来)

  • wish是什么意思(wishes是什么意思英语)

    wish是什么意思(wishes是什么意思英语)

  • vue怎么调整字幕时长(vue怎么调字体颜色)

    vue怎么调整字幕时长(vue怎么调字体颜色)

  • 华为9x指纹解锁在哪(华为9x指纹解锁怎么没有了)

    华为9x指纹解锁在哪(华为9x指纹解锁怎么没有了)

  • 抖音小程序怎么添加(抖音小程序怎么退出登录)

    抖音小程序怎么添加(抖音小程序怎么退出登录)

  • 魅族怎么锁定桌面布局(魅族怎么锁定桌面软件)

    魅族怎么锁定桌面布局(魅族怎么锁定桌面软件)

  • 手机远程管理怎么用(手机远程管理怎么弄)

    手机远程管理怎么用(手机远程管理怎么弄)

  • 苹果手机怎么使用章鱼输入法(苹果手机怎么使用)

    苹果手机怎么使用章鱼输入法(苹果手机怎么使用)

  • 如何取消拼多浮窗(拼多多如何取消浮窗设置)

    如何取消拼多浮窗(拼多多如何取消浮窗设置)

  • word怎么把表格放在一页(word怎么把表格缩小)

    word怎么把表格放在一页(word怎么把表格缩小)

  • 亚马逊会员怎么取消(亚马逊会员怎么买)

    亚马逊会员怎么取消(亚马逊会员怎么买)

  • linux GTK、KDE、Gnome、XWindows 图形界面区别介绍

    linux GTK、KDE、Gnome、XWindows 图形界面区别介绍

  • pytorch 自编码器实现图像的降噪(pytorch自动编码器)

    pytorch 自编码器实现图像的降噪(pytorch自动编码器)

  • 微擎框架破解版v2.7.25去授权一键安装纯净商业版(微擎纯净框架,无任何限制)-电脑学习网(微擎框架是开源的吗)

    微擎框架破解版v2.7.25去授权一键安装纯净商业版(微擎纯净框架,无任何限制)-电脑学习网(微擎框架是开源的吗)

  • Java实现邮件发送(java 邮件)

    Java实现邮件发送(java 邮件)

  • 企业合并债权如何处理
  • 纳税属于什么会计科目
  • 企业工商年报填写须知
  • 转让不动产取得的收入
  • 加计扣除和研发费不一致
  • 个人挂靠利润如何提取
  • 企业为什么要进行环境分析
  • 税收减免备案分录怎么写
  • 企业处置固定资产
  • 食堂收支情况
  • 残保金上年在职工资总额
  • 收到外国客户的祝福怎么回复
  • 滞销款的最好销售办法
  • 会计档案的概念和内容
  • 认证抵扣完的发票怎么处理
  • 环境保护税即将施行 有哪些点需要关注?
  • 工会有纳税号吗
  • 长期挂账的其他应收款如何处理
  • 统一社会信用代码在哪里可以查询
  • 待摊费用属于什么费用
  • 应交税费 减免税款
  • 按年缴纳年金的企业缴费部分,应按照全年一次性奖金
  • 房地产商铺增值税税率是多少
  • 普通发票没有进账怎么办
  • 推荐几个优秀的电影
  • 残保金通过什么科目核算
  • php字符串操作函数
  • 补缴增值税怎么做账
  • 企业购入的专利权属于什么
  • 小规模旅游业的会计分录怎么写
  • pcfile.dll是什么意思
  • 帝国cms移动端
  • 研发费用加计扣除政策指引2.0
  • 发票已认证当月未申报怎么办
  • 企业股权投资收益缴纳什么税
  • laravel 日志配置
  • 现金折扣的会计分录处理
  • 酒吧送酒的人叫什么
  • thinkphp框架入门
  • 小程序开发公司十大排名
  • 商品交换包括
  • 所得税汇算清缴前取得跨年发票
  • 删除python包
  • 代收收款收据证明范本
  • SQL SERVER 2008 CTE生成结点的FullPath
  • 开个分公司有啥好处
  • 库存现金月末是怎么样结账的
  • 公对公转账在手机上怎么操作
  • 公司缴纳养老保险最低标准
  • 跨年取得的费用票怎么做账
  • 机床上的配件计入什么费用
  • 设计费勘察费计入固定资产吗
  • 工程外管核销报告范本
  • 被收购企业账务怎么处理
  • 成本分配表是实际成本吗
  • 购买农产品进行销售要交税吗
  • 加权净资产收益率越高越好吗
  • 会计凭证传递的基本要求
  • 新旧收入准则对比区别表
  • 商业零售企业商品进销差价
  • sqlserver怎么用
  • sqlserver 创建索引与使用
  • 在win7操作系统中通过什么可以查看计算机的配置
  • linux批处理文件怎么写
  • centos查看inode
  • pdoors.exe
  • win7旗舰版64位系统开机时软件设置自动启动详细图文教程
  • Win10 Mobile RedStone预览版14267.1004更新内容汇总(持续更新)
  • unity ondestroy
  • 如何做批处理命令
  • bat批处理命令运行程序
  • unity3d怎么做游戏
  • unix linux
  • [置顶]游戏名 TentacleLocker
  • SQLite之SQLiteStatement
  • javascript整数类型
  • 陕西国税电子税务局端还可以登录吗
  • 云税票管家是什么软件
  • 会计基础工作规范2024
  • 困难减免土地使用税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设