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

news2025/2/28 13:01:05

一,消息订阅与发布

1.什么是消息订阅与发布

消息订阅与发布是一种组件间通信的方式,适用于任意组件间通信。能更好的实现组件间通信(消息订阅与发布就像是送报员一样。好比小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();
  }
};
  1. 提供数据

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);
    }
  }
};
  1. 最好在beforeDestroy钩子中去取消订阅。

  beforeDestroy() {pubsub.unsubscribe();}

3.nextTick

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

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>

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

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

相关文章

Web 开发与搜索引擎优化,你应该选择哪一个?

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】** 目录什么是搜索引…

什么是BFC,他有什么用?

1、什么是BFC BFC - Block Formatting Context 块级格式化上下文 BFC的定义&#xff0c;在官方文档到中是这么介绍的&#xff1a;一个BFC区域包含创建该上下文元素的所有子元素&#xff0c;但是不包括创建了新的BFC的子元素的内部元素&#xff0c;BFC是一块块独立的渲染区域&a…

【Three.js基础】创建场景、渲染场景、创建轨道控制器(一)

&#x1f431; 个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff1a;vue3从入门…

Web服务器配置管理

作者&#xff1a;敲代码の流川枫 博客主页&#xff1a;流川枫的博客 专栏&#xff1a;和我一起学java 语录&#xff1a;Stay hungry stay foolish 工欲善其事必先利其器&#xff0c;给大家介绍一款超牛的斩获大厂offer利器——牛客网 点击免费注册和我一起刷题吧 文章目录…

CSS,HTML,JS 以及Vue前端面试题八股文总结【看完你就变高手】

■ 符号说明&#x1f498; 主题&#x1f31f; 常见重要&#x1f31b; 需要有印象的&#x1f195; v3新特性■ 杂谈&#x1f31b; SEO优化合理的title、description、keywords&#xff1a;搜索对着三项的权重逐个减小&#xff0c;title值强调重点即可&#xff1b;description把页…

vue3面试题:2022 最新前端 Vue 3.0 面试题及答案(持续更新中……)

1、 Vue2.0 和 Vue3.0 有什么区别&#xff1f; 响应式系统的重新配置&#xff0c;使用代理替换对象.define属性&#xff0c;使用代理优势&#xff1a; 可直接监控阵列类型的数据变化监听的目标是对象本身&#xff0c;不需要像Object.defineProperty那样遍历每个属性&#xff0…

20分钟上手ES6,不会ES6好意思说自己会JS ?

✍&#x1f3fc;作者&#xff1a;周棋洛&#xff0c;大二计算机学生 ♉星座&#xff1a;金牛座 &#x1f3e0;主页&#xff1a;点击查看更多 &#x1f310;关键&#xff1a;ES6 javascript 前端 文章目录理解ES6ES6 块级作用域 letES6 解构数组ES6 解构对象ES6 模板字符串ES6 判…

【Spring】IOC,你真的懂了吗?

作者:狮子也疯狂 专栏:《spring开发》 坚持做好每一步,幸运之神自然会驾凌在你的身上 目录 一. 🦁 前言二. 🦁 控制反转(IOC)Ⅰ. 🐇主要思想Ⅱ. 🐇原生技术创建实例弊端Ⅲ. 🐇自定义对象容器3.1 准备数据3.2 创建配置文件3.3 创建容器管理类3.4 创建StudentSer…

JS 数组中的 filter 方法

1、定义 filter()创建一个新的数组&#xff0c;新数组中的元素是通过检查指定数组中符合条件的所有元素。 2、语法 array.filter(function(currentValue,index,arr), thisValue); 3、参数说明 返回 4、用法 filter() 方法用于把Array中的某些元素过滤掉&#xff0c;然后返回…

echarts实现3d柱状图的两种方式

echarts实现3d柱状图的两种方式 看了不少关于3d柱状图的案例,发现做3d柱状图 常用的两种方式就是 自定义图形和象型柱图, 两种实现方式效果如下: 方法1: echarts.graphic.extendShape 自定义图形 echarts自定义图形的详细用法点这里, 官网点这里, 图中第一个3d柱状图我参考…

unplugin-auto-import 和 unplugin-vue-components

背景 unplugin-auto-import&#xff1a;为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。 unplugin-vue-components&#xff1a;Vue 的按需组件自动导入。 这两个插件都是涉及到按需自动导入&#xff0c;所以我们在使用 Vue 和其对应的 组件之类时…

最全的—— ES6有哪些新特性?

目录ES6新特性1、let和const2、symbol3、模板字符串3.1 字符串新方法&#xff08;补充&#xff09;4、解构表达式4.1 数组解构4.2 对象解构5、对象方面5.1 Map和Set5.1.1 Map5.1.2 Set5.3 数组的新方法5.3.1 Array.from()方法5.3.2 includes()方法5.3.3 map()、filter() 方法5.…

ES6中的箭头函数详细梳理

一、箭头函数的介绍 1.1 什么是箭头函数 ES6中允许使用>来定义函数。箭头函数相当于匿名函数&#xff0c;并简化了函数定义。 1.2 基本语法 // 箭头函数 let fn (name) > {// 函数体return Hello ${name} !; };// 等同于 let fn function (name) {// 函数体return …

vue是什么?vue的优点有哪些?

目录 一、vue是什么 二、为什么要用Vue&#xff1f; 1. 组件化 2. MVVM 数据双向绑定 3. 响应式 虚拟DOM 4.生命周期 三、Vue的优点 1. 轻量级 2. 高性能 3. 好上手 4. 插件化 5. 便于测试 6.运行速度更快 7.视图,数据,结构分离 一、vue是什么 Vue是一套用于构建…

vue基础用法基础原理整理

vue基础用法&基础原理整理 md文件地址&#xff1a;https://gitee.com/gaohan888/note 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作&#xff0c;就必须创建一个Vue实例&#xff0c;且要传入一个配置对象demo容器里的代码依然符合html规范&#xff0c;只不过混入了一些特…

Vue3 中路由Vue Router 的使用

目录前言&#xff1a;一、什么是 Vue Router &#xff1f;二、路由的使用1、路由的安装2、路由的模式3、创建路由模块4、声明路由链接和占位符三、路由的重定向和别名四、嵌套路由五、声明式和编程式导航1、声明式导航2、编程式导航3、替换当前位置4、路由历史总结&#xff1a;…

如何使用vue-cli来搭建vue项目?详细步骤跟着我来吧!

目录 一、什么是vue-cli? 二、前提&#xff1a;搭建好NodeJS环境 安装vue-cli 三、使用脚手架vue-cli(2.X版)来构建项目 第一步 第二步 第三步 第三步 第四步 三、SPA完成路由的开发 第一步 ​编辑第二步 第三步 第四步 第四步 四、嵌套路由 使用children属性 五、知…

SpringMVC的文件上传

6.SpringMVC的文件上传 6.1-SpringMVC的请求-文件上传-客户端表单实现(应用) 文件上传客户端表单需要满足&#xff1a; 表单项type“file” 表单的提交方式是post 表单的enctype属性是多部分表单形式&#xff0c;及enctype“multipart/form-data” <form action"…

怎样创建一个VUE项目(超简单)

目录 一、安装node.js 二、搭建vue环境 1、全局安装vue/cli模块包 2、执行命令 3、检查是否安装成功 三、创建vue项目 1、创建项目 2、选择模板和包管理器&#xff0c;等待项目创建完毕 四、启动vue项目 1、执行命令 2、浏览项目页面 五、vue项目目录文件含义和作用…

2022 uniapp基础掌握及面试题整理

1.uniapp优缺点 优点: a. 一套代码可以生成多端 b. 学习成本低,语法是vue的,组件是小程序的 c. 拓展能力强 d. 使用HBuilderX开发,支持vue语法 e. 突破了系统对H5调用原生能力的限制 缺点: a. 问世时间短,很多地方不完善 b. 社区不大 c. …