1. 过渡

页面

将需要做动画或过渡效果的内容，用transition包起来
transition-group包裹ul之类的多种元素的

<!-- 将需要做动画或过渡效果的内容，用transition包起来 -->
<transition name="box">
    <div class="box" v-show="isShow">
        <h2>看看效果</h2>
    </div>
</transition>
<hr />
<!-- 给列表添加动画或过渡效果，用transition-group -->
<button @click="addGoods">添加</button>
<transition-group name="box" tag="ul">
    <li v-for="(item, index) in goodses" :key="item.id">
        {{ item.id }}--{{ item.name }}
        <button @click="delGoods(index)">删除</button>
    </li>
</transition-group>

样式

//进入时样式 和 离开时样式
.box-enter-active,
.box-leave-active {
  transition: all 1s;
}

// 进入之前样式 和 离开之后样式
.box-enter,
.box-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

2. nanoid

nanoid库和uuid库一样都可以生成uuid，但是nanoid相比uuid要更轻量级，下面就来演示一下如何在项目中使用nanoid。

1.在项目目录下打开终端，下载安装nanoid库

安装

npm install nanoid

导入

import { nanoid } from 'nanoid'

使用

this.goodses.push({
    id:nanoid(),
    name:'丰田'
})