位置: 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)

  • windows任务管理器在哪(windows任务管理器怎么打开)

    windows任务管理器在哪(windows任务管理器怎么打开)

  • 投影仪怎么使用(投影仪怎么连接手机)

    投影仪怎么使用(投影仪怎么连接手机)

  • 剪映识别不到人声(剪映识别不到人脸怎么P头发)

    剪映识别不到人声(剪映识别不到人脸怎么P头发)

  • mate304g和5g手机壳通用吗(华为mate304g和5g的区别大不大)

    mate304g和5g手机壳通用吗(华为mate304g和5g的区别大不大)

  • 华为系统鸿蒙什么时候出(华为鸿蒙系统怎么样了)

    华为系统鸿蒙什么时候出(华为鸿蒙系统怎么样了)

  • 咕咕机可以打印彩色相片吗(咕咕机可以打印不干胶贴纸吗)

    咕咕机可以打印彩色相片吗(咕咕机可以打印不干胶贴纸吗)

  • 小米蓝牙鼠标无法连接(小米蓝牙鼠标无法进入蓝牙配对模式)

    小米蓝牙鼠标无法连接(小米蓝牙鼠标无法进入蓝牙配对模式)

  • 网络一直断断续续的怎么回事(网络一直断断续续掉线)

    网络一直断断续续的怎么回事(网络一直断断续续掉线)

  • 主机没反应怎么回事(主机没反应怎么办)

    主机没反应怎么回事(主机没反应怎么办)

  • 微信表情旺柴什么意思(微信表情旺柴是什么)

    微信表情旺柴什么意思(微信表情旺柴是什么)

  • ipadair2有笔吗(ipadair2有手写笔吗)

    ipadair2有笔吗(ipadair2有手写笔吗)

  • 华为lldtl10是什么型号(华为lld-tl10)

    华为lldtl10是什么型号(华为lld-tl10)

  • ipad主板坏了的表现(ipad 主板坏了)

    ipad主板坏了的表现(ipad 主板坏了)

  • 华为mate30有耳机孔么(华为mate30有耳机返听)

    华为mate30有耳机孔么(华为mate30有耳机返听)

  • 拼多多评价什么时候出来(拼多多评价什么时候消失)

    拼多多评价什么时候出来(拼多多评价什么时候消失)

  • 抖音怎么发三分钟长视频(抖音怎么发三分钟的歌曲)

    抖音怎么发三分钟长视频(抖音怎么发三分钟的歌曲)

  • icloud登陆一直转圈(icloud登陆不上一直转)

    icloud登陆一直转圈(icloud登陆不上一直转)

  • 小米8打电话黑屏(小米8打电话黑屏怎么办)

    小米8打电话黑屏(小米8打电话黑屏怎么办)

  • oppoa9截图在哪里(oppoa9如何截屏手机屏幕截图)

    oppoa9截图在哪里(oppoa9如何截屏手机屏幕截图)

  • win10 20H2如何关闭微软自带杀毒软件Defender 简单快速的关闭方法(w10关闭)

    win10 20H2如何关闭微软自带杀毒软件Defender 简单快速的关闭方法(w10关闭)

  • 修改默认输入法(苹果手机怎么修改默认输入法)

    修改默认输入法(苹果手机怎么修改默认输入法)

  • 为什么Win10系统激活失败会提示错误代码0xc004f074 ?(为什么WIN10系统打在画面进不去)

    为什么Win10系统激活失败会提示错误代码0xc004f074 ?(为什么WIN10系统打在画面进不去)

  • 蜻蜓翅膀特写 (© Azwar Thaufeeq/500px/Getty Images)(蜻蜓翅膀特写怎么画)

    蜻蜓翅膀特写 (© Azwar Thaufeeq/500px/Getty Images)(蜻蜓翅膀特写怎么画)

  • PHPCMS 后台访问特别慢的原因?(cms访问出错)

    PHPCMS 后台访问特别慢的原因?(cms访问出错)

  • 生产用天然气如何入账
  • 企业所得税固定资产
  • 入资款印花税怎么计算
  • 电子承兑汇票怎么做账
  • 什么叫发票分割单
  • 发票右上角打印缺数字
  • 设备配件定义
  • 小规模纳税人开票税率
  • 珠宝属于什么行业领域
  • 其他综合收益税后净额影响净利润吗
  • 工程项目立项前的安全评估
  • 预付房租发票未到分录
  • 开外管证再省外预缴税收要怎么报税?
  • 国有资产无偿划转管理办法
  • 财务申报工资和实际发工资
  • 出纳长短款项应按日结清,但不需要计算
  • 以前年度留抵用完 不能抵欠税
  • 个税提前预缴怎么入账?
  • 企业所得说季报是季报填还是年底填?
  • 一般纳税人企业所得税计算公式
  • 双倍余额折旧法
  • 如何返还股东的出资款
  • 进口发票怎么认证
  • 代收房租费
  • 被强制升为一般纳税人的条件
  • 财政返还额度会计分录
  • 推荐几个优秀的电影
  • win11怎么取消开机启动项
  • 优酷路由宝是什么东西
  • 计提坏账准备的比例
  • 个税申报的人数比工资表少了怎么办
  • Win10 (21H1)Build 19043.1266更新补丁KB5005611正式版发布:附修复更新内容
  • 单位银行结算账户属于活期存款账户
  • 服务费的进项发票怎么做
  • 软件和集成电路杂志官网
  • 会计准则长期待摊费用开始计提摊销的时间
  • php模板引擎类
  • 蓝色向日葵
  • 金税盘干嘛用
  • 微信小程序实训内容
  • 企业不年报会怎么样
  • 承税汇票个人能用吗
  • 博客首页设计
  • 固定资产折旧范围口诀
  • 出口退税在贷方,之后还交税吗
  • 装修工程是可以做什么的
  • 收付实现制的适用范围
  • 计提坏账准备的金额怎么算的
  • 出口货物弃货
  • 固定资产原价怎么计算
  • 出口的进项发票认证后要确认吗
  • 应收票据的核算范围包括
  • 微信验证收到的信息在哪
  • 进口向海关缴纳消费税
  • 养猪场财务账目怎么做
  • 固定资产错记到费用了怎么办
  • 企业申请支付宝账号步骤
  • 资产负债表编制
  • 成立教育培训司
  • 增值税是否计入税金及附加
  • 是不是根据营业执照查询
  • sql server如何使用
  • mysql 5.7.10 winx64安装配置方法图文教程(win10)
  • xp系统重启后自动还原怎么办
  • thinkpad e431 bios怎么进入
  • ubuntu 18.04网络连接
  • linux基金会什么时候成立
  • windows7电脑怎么变快
  • opengl glu
  • jQuery.ajax实现根据不同的Content-Type做出不同的响应
  • javascript简介和语法
  • android 实例
  • android中常用的adapter不包括
  • python 正则 \s
  • 进项转出怎么做
  • 企业完税证明怎么查询打印
  • 起诉公司需要法人信息吗
  • 计财科科长是什么级别
  • 西安税务总局
  • 车辆购置税计入固定资产一起折旧吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设