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

在Vue中，可以使用事件总线（Event Bus）来实现消息的订阅与发布。以下是创建事件总线并使用它进行消息订阅与发布的示例代码：

1. 首先，创建一个新的Vue实例作为事件总线：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

2. 然后，在需要发布消息的组件中，使用EventBus.$emit来发布消息：

// 发布消息的组件
import { EventBus } from './event-bus.js';
 
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('myMessage', 'Hello, everyone!');
    }
  }
}

3. 在需要订阅消息的组件中，使用EventBus.$on来订阅消息：

// 订阅消息的组件
import { EventBus } from './event-bus.js';
 
export default {
  created() {
    EventBus.$on('myMessage', (message) => {
      console.log(message); // 将会输出 "Hello, everyone!"
    });
  }
}

实现动画效果，可以使用Vue的内置指令如v-if, v-show, 或者结合CSS过渡和动画。以下是使用CSS过渡实现简单淡入淡出动画的示例：

<template>
  <div>
    <button @click="toggle">Toggle Animation</button>
    <div v-show="show" class="box">This is an animated box!</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
}
</script>
 
<style>
.box-enter-active, .box-leave-active {
  transition: opacity 0.5s;
}
.box-enter, .box-leave-to /* .box-leave-active for <2.1.8 */ {
  opacity: 0;
}
</style>

在这个例子中，点击按钮会切换show数据属性的值，从而通过CSS过渡效果显示或隐藏.box元素。