1.过渡transition
Vue 提供了transition的封装组件，将需要有过渡效果的内容用transition组件包裹起来。
v-enter：这是入场动画开始之前的状态，即原状态到达到动画效果的时间段的起始点。
v-leave-to：是离场动画结束后的状态，即动画效果还原到初始状态后的结束点。
(1) 给某个容器添加：
① 将需要有过渡效果的内容用transition标签包裹起来，并起名name；
② 在style中写入样式，分为四个步骤：
<transition name="box">
<div class="box" v-show="isShow">我一定会好好学习的</div>
</transition>
//进入时 和 离开时 动作
// 过渡的持续时间
.box-enter-active,
.box-leave-active {
transition: all 1s;
}
// 进入样式 和 离开样式
// 过渡的具体动作
.box-enter,
.box-leave-to {
transform: translateX(10px);
opacity: 0; // 注意：这里只能设置透明度为0
}
(2) 给某个列表添加：
同理，但是此时用<tansition-group> </tansition-group>标签，
此处可以给transition-group标签添加一个tag属性 ，tag="ul"，这样就可以将外部的ul标签删除，此时transition-group就相当于ul标签。若不加tag标签，则相当于span标签。因此tag属性设置transition-group自身渲染的标签。
<!-- transition-group组件，用于包裹多个组件的过渡，tag属性设置transition-group自身渲染的标签 -->
<transition-group name="box" tag="ul">
<li v-for="(item,index) in goodses" :key="item.id">{{item.id}}--{{item.name}}
<button @click="goodses.splice(index,1)">删除</button>
</li>
</transition-group>
2.nanoid
nanoid是使用 JavaScript 开发、一个小型、安全、对 URL 友好的唯一字符串 ID 生成器。
(1) 安装
npm install nanoid
(2) 导入
import { nanoid } from 'nanoid'
(3 )使用
this.goodses.push({
id: nanoid(), // 此处nanoid()方法，每次返回一个全球唯一的id
name: '丰田'
})
3.代理服务器devServer
此服务器是开放接口的，只要是向这个地址发送请求，就能获取数据，涉及不到跨域问题。如下：
ajax请求数据，必须要遵循同源策略：请求地址的协议名，主机名(域名或ip地址)，端口号，必须跟当前地址相同；否则就是跨域请求。
(1) 搭建服务器
在demo同级新建server文件夹，打开终端，先初始化一个包的描述文件，npm init -y，下一个服务器npm i express。
1号服务器：
// 导入express
let express = require("express");
// 创建一个服务器对象
let app = express();
// 开启一个端口号
app.listen(5566, () => {
console.log("服务器成功开启！端口号5566");
});
//配置中间件，拦截所有的请求
app.use((req, res, next) => {
//允许跨域ajax请求跨域
// 默认情况下，ajax请求必须要遵循同源策略：协议名，主机名，端口号一致。
// 允许一台指定的服务器跨域
// res.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
// 不限制跨域
// res.setHeader("Access-Control-Allow-Origin", "*");
next();
});
//学生数组
let stus = [
{
no: "1001",
name: "张三",
age: 20,
sex: "男",
},
{
no: "1002",
name: "李四",
age: 22,
sex: "女",
},
{
no: "1003",
name: "王五",
age: 24,
sex: "男",
},
]
// 定义一个get请求接口
app.get("/list", (req, res) => {
res.send(stus);
});
2号服务器：
// 导入express
let express = require("express");
// 创建一个服务器对象
let app = express();
// 开启一个端口号
app.listen(7788, () => {
console.log("服务器成功开启！端口号7788");
});
//配置中间件，拦截所有的请求
app.use((req, res, next) => {
//允许跨域
// res.setHeader("Access-Control-Allow-Origin", "*");
next();
});
//汽车数组
let cars = [
{
id: "1001",
name: "奔驰"
},
{
id: "1002",
name: "宝马"
},
{
id: "1003",
name: "奥迪"
},
]
// 定义一个get请求接口
app.get("/list", (req, res) => {
res.send(cars);
});
相当于前端向代理服务器请求数据，代理服务器向后台发送http方式请求数据
(2) 配置代理
module.exports={
lintOnSave:false,
//devServer是脚手架中的开发服务器
devServer:{
//配置主机名
host:'localhost',
//配置端口号
port:'8080',
//注意：在开发阶段，通过向当前开发服务器发送ajax请求，当前服务器会将请求转发给配置的代理服务器地址。
// 这里只能配置一个代理服务器
// proxy:"http://localhost:5566"
// 配置多个代理服务器地址
proxy:{
// /stu是前缀
'/stu':{
//代理的地址
target:"http://localhost:5566",
// 路径重写，因为向真实的后台发送请求时，不需要加前缀
pathRewrite:{
//将地址中，/stu替换成空
// ajax向http://localhost:8080/stu/list发送请求
// 代理服务器会帮我们向http://localhost:5566/stu/list发送请求
// 但是http://localhost:5566服务器的真实地址应该是http://localhost:5566/list，没有/stu前缀
// 所以在向真实的后台发送请求时，要将路径中的前缀删除掉。
'^/stu':'', // 将/stu替换成空
},
},
'/car':{
target:"http://localhost:7788",
pathRewrite:{
'^/car':''
}
}
}
}
}
如果一个前台要向多个后端发起请求，则需要配置多个代理服务器，将devServer中得到proxy写成对象的方法。
配置多个代理服务器，需要路径重写。因为向真实的后台发送请求时，不需要加前缀。
实现过程：ajax向 http://localhost:8080/stu/list 发送请求，代理服务器会帮我们向 http://localhost:5566/stu/list 发送请求。但是 http://localhost:5566服务器的真实地址应该是 http://localhost:5566/list ，没有/stu前缀。所以在向真实的后台发送请求时，要将路径中的前缀删除掉。
(3) 在组件中使用
前台向代理服务器 8080/list 发送请求，此处可以简写。
<button @click="loadStudent">获取学生信息</button>
<table class="table">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="stu in stus" :key="stu.no">
<td>{{ stu.no }}</td>
<td>{{ stu.name }}</td>
<td>{{ stu.age }}</td>
<td>{{ stu.sex }}</td>
</tr>
</tbody>
</table>
data() {
return {
//学生信息数组
stus: []
};
},
methods: {
// 加载学生信息的方法
loadStudent() {
// 向当前服务器发请求，当前服务器会作为代理服务器，在通过原生http的方式向后台服务器发请求
// ajax请求默认要遵循同源策略：协议名，主机名，端口号要一致。
// 注意：这里的/list，其实是http://localhost:8080/list
axios.get("/list").then(({ data }) => {
this.stus = data;
});
}
}
单个/多个代理服务器-详 不想写了（○｀ 3′○） 之 丁老师笔记传送门
