一、过渡
（1）transition组件
Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
条件渲染（使用v-if）
条件展示（使用v-show）
动态组件
组件根节点
https://cn.vuejs.org/v2/guide/transitions.html
使用方法：用transition标签套在加过渡效果的外层，标签属性name就相当于普通标签中的class
添加样式
**-enter-active **leave-active
**-enter **leave-to
<h2>过渡效果</h2>
<button @click="isShow=!isShow">显示/隐藏</button>
<!-- 将需要有过渡效果的内容用transition组件包裹起来 -->
<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);
// 注意：这里只能设置透明为0,只能改透明度
opacity: 0;
}
（2）transition-group组件
transition-group组件，属性也有name,可以和其他组件重名。
tag属性值为ul时，可以当ul标签使用（也可以写box等）。当tag属性值为空时，默认为span标签
<!-- 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>
.box-enter-active,
.box-leave-active{
transition: all 1s;
}
.box-enter,
.box-leave-to{
transform: translateX(10px);
opacity: 0;
}
二、nanoid
之前设置唯一id我们都使用Date.now，但是如果在1毫秒内重复点击两个整个列表就会报错，所以不是最好的方案。
那就是nanoid，会帮我们形成全球唯一id（长度不一）
当我们要使用唯一编号或字符串的时候可以使用nanoid
下载nanoid库
npm i nanoid
引入nanoid
import { nanoid } from 'nanoid'
使用
三、代理服务器
新建server文件，终端打开初始化包npm init -y，下载服务器框架 npm i express。
默认情况下：ajax请求必须要遵循同源策略：协议名、主机名，端口号一致。
如果跨域设置为任何请求都可以请求会很不安全，别人会实时抓取信息数据。
如果跨域设置指定的一台服务器允许，多台会无法实现，这时就需要代理服务器。
前端架起一台代理服务器，代理服务器向服务器发送原生请求，通过向代理服务器发送请求就是本地。
服务器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);
});
配置代理服务器3
proxy配置代理服务器，多个以对象的形式
后缀名相同可以添加前缀，以对象的形式进行详细配置，代理的地址，和路径重写（对象）
module.exports = {
lintOnSave: false,
//devServer是脚手架中的开发服务器
devServer: {
//配置主机名
host: "localhost",
//配置端口号
port: "8080",
//注意：在开发阶段，通过向当前开发服务器发送ajax请求，当前服务器会将请求转发给配置的代理服务器地址。
//这里只能配置一个代理服务器
// proxy:'http://localhost:7788',
// 配置多个代理服务器地址
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": "",
},
},
},
},
};
代理服务器.png
页面
methods: {
// 加载学生信息的方法
loadStudent() {
// 向当前服务器发请求，当前服务器会作为代理服务器，在通过原生http的方式向后台服务器发请求
// ajax请求默认要遵循同源策略：协议名，主机名，端口号要一致。
// 注意：这里的/list，其实是http://localhost:8080/list
axios.get("/stu/list").then(({ data }) => {
this.stus = data;
});
},
// 加载车辆信息的方法
loadCar() {
axios.get("/car/list").then(({ data }) => {
this.cars = data;
});
},
},
四、Bootstrap框架
https://v3.bootcss.com/
简单示范table基础使用方法
在html页面头部中引入后在tabel标签添加class样式为table
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<table class="table">
