Vue 学习总结笔记 (八)

文章目录

• 1. 消息订阅与发布
• • 1.1 消息订阅与发布的流程
  • 1.2 pubsub-js库
• 2. $nextTick用法
• 3. todoList 案例添加一个编译按钮
• 4. Vue的 过度与动画
• • 4.1 CSS3的@keyframes 和 Vue的transition标签
  • 4.2 Vue中的 .hello-enter-active ， .hello-leave-active ， .hello-enter ， .hello-leave-to ， .hello-enter-to ， .hello-leave的用法
  • 4.3 多个元素过度(transition-group标签)
  • 4.4 Vue 集成第三方动画
  • 4.5 过度和动画总结
  • 4.6 修改todoList的MyItem组件，添加过度和动画效果

1. 消息订阅与发布

1.1 消息订阅与发布的流程

---

消息订阅与发布，两个过程：

• 第一步：订阅消息：消息名。
• 第二步：发布消息：消息内容。

1.2 pubsub-js库

---

pubsub-js的名字就对应了publish(发布)，subscribe(订阅)两个英文单词。

想要实现消息订阅与发布就必须导入外库，实现消息订阅发布的库有很多，这里就是用pubsub-js库。

npm i pubsub-js命令安装

---

pubsub-js库的使用：

app.vue文件：

School.vue文件：

Student.vue文件：

像上面的subscribe的messageName可以用_来替代：

---

总结：

2. $nextTick用法

---

可以使用Vue的nextTick()来操作。

$nextTick函数所指定的函数会在模板dom元素刷新完成后进行回调。

所以一般$nextTick的回调函数放置的是dom元素之后要执行的命令属性，例如：focus获取焦点。

3. todoList 案例添加一个编译按钮

---

需要修改的就只有App.vue和MyItem.vue的内容：

App.vue文件：

MyItem.vue文件：

4. Vue的 过度与动画

4.1 CSS3的@keyframes 和 Vue的transition标签

---

style样式用到了css3中的@keyframes关键帧。

vue中，需要进行过度和动画效果的内容。必须放到transition标签中。

这里的transition标签值专门用来给vue使用的，负责过度和动画效果。

test.vue文件：

4.2 Vue中的 .hello-enter-active ， .hello-leave-active ， .hello-enter ， .hello-leave-to ， .hello-enter-to ， .hello-leave的用法

---

4.3 多个元素过度(transition-group标签)

---

transition-group标签：里面可以存放多个元素标签。

• 注意：每一个元素标签必须要设置key属性和属性值。
  

---

test.vue案例：

4.4 Vue 集成第三方动画

---

第三方npm.js网站

搜索animate.css这个就是常用的第三方动画。

---

安装后，导入css包。直接使用就可以，它很多的动画都在HostPage上面右侧栏目都有！

---

test3.vue使用效果：

4.5 过度和动画总结

---

在CSS中的过度和动画解释：

• 过度就是在那个时间段内，做什么事情。
• 动画就是一个效果，我们经常是在这个过度时间内，进行这个动画效果。二者是相互依存的关系。

---

在Vue中的过度与动画操作：

• 过度：通过transition或者transition-group标签。它有两种方式：一种是通过name(没有声明，在style中声明v)在style中声明；一种是直接在特定的属性上面指定。
• 动画：我们可以自定义动画，提供给过度使用；但是一般有第三方库animate.css，我们可以通过第三方库来操作这些东西，很方便。
  

4.6 修改todoList的MyItem组件，添加过度和动画效果

---