一、過渡

（1）transition組件

Vue提供了transition的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡
條件渲染（使用v-if）
條件展示（使用v-show）
動態(tài)組件
組件根節(jié)點
https://cn.vuejs.org/v2/guide/transitions.html
使用方法：用transition標簽套在加過渡效果的外層，標簽屬性name就相當(dāng)于普通標簽中的class
添加樣式
**-enter-active **leave-active
**-enter **leave-to

    <h2>過渡效果</h2>
    <button @click="isShow=!isShow">顯示/隱藏</button>
    <!-- 將需要有過渡效果的內(nèi)容用transition組件包裹起來 -->
    <transition name="box">
       <div class="box" v-show="isShow">我一定會好好學(xué)習(xí)的</div>
    </transition>

//進入時樣式 和 離開時樣式
// 過濾的持續(xù)時間
.box-enter-active,
.box-leave-active {
  transition: all 1s;
}

// 開始進入樣式 和 離開完成樣式
// 過渡的具體動作
.box-enter,
.box-leave-to {
  transform: translateX(10px);
  // 注意：這里只能設(shè)置透明為0,只能改透明度
  opacity: 0;
}

（2）transition-group組件

transition-group組件，屬性也有name,可以和其他組件重名。
tag屬性值為ul時，可以當(dāng)ul標簽使用（也可以寫box等）。當(dāng)tag屬性值為空時，默認為span標簽

    <!-- transition-group組件，用于包裹多個組件的過渡，
    tag屬性設(shè)置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

之前設(shè)置唯一id我們都使用Date.now，但是如果在1毫秒內(nèi)重復(fù)點擊兩個整個列表就會報錯，所以不是最好的方案。
那就是nanoid，會幫我們形成全球唯一id（長度不一）
當(dāng)我們要使用唯一編號或字符串的時候可以使用nanoid

下載nanoid庫

npm i nanoid

引入nanoid

import { nanoid } from 'nanoid'

使用

三、代理服務(wù)器

新建server文件，終端打開初始化包npm init -y，下載服務(wù)器框架 npm i express。
默認情況下：ajax請求必須要遵循同源策略：協(xié)議名、主機名，端口號一致。
如果跨域設(shè)置為任何請求都可以請求會很不安全，別人會實時抓取信息數(shù)據(jù)。
如果跨域設(shè)置指定的一臺服務(wù)器允許，多臺會無法實現(xiàn)，這時就需要代理服務(wù)器。
前端架起一臺代理服務(wù)器，代理服務(wù)器向服務(wù)器發(fā)送原生請求，通過向代理服務(wù)器發(fā)送請求就是本地。

服務(wù)器1

// 導(dǎo)入express
let express = require("express");
// 創(chuàng)建一個服務(wù)器對象
let app = express();
// 開啟一個端口號
app.listen(5566, () => {
  console.log("服務(wù)器成功開啟！端口號5566");
});

//配置中間件，攔截所有的請求
app.use((req, res, next) => {
  //允許ajax請求跨域
  //默認情況下：ajax請求必須要遵循同源策略：協(xié)議名，主機名，端口號一致。
  // 允許一臺指定的服務(wù)器跨域
  // res.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
  // 不限制跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//學(xué)生數(shù)組
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);
});

服務(wù)器2

// 導(dǎo)入express
let express = require("express");
// 創(chuàng)建一個服務(wù)器對象
let app = express();
// 開啟一個端口號
app.listen(7788, () => {
  console.log("服務(wù)器成功開啟！端口號7788");
});

//配置中間件，攔截所有的請求
app.use((req, res, next) => {
  //允許跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//汽車數(shù)組
let cars = [
    {
      id: "1001",
      name: "奔馳"
    },
    {
      id: "1002",
      name: "寶馬"
    },
    {
      id: "1003",
      name: "奧迪"
    },
  ]

// 定義一個get請求接口
app.get("/list", (req, res) => {
  res.send(cars);
});

配置代理服務(wù)器3

proxy配置代理服務(wù)器，多個以對象的形式
后綴名相同可以添加前綴，以對象的形式進行詳細配置，代理的地址，和路徑重寫（對象）

module.exports = {
  lintOnSave: false,
  //devServer是腳手架中的開發(fā)服務(wù)器
  devServer: {
    //配置主機名
    host: "localhost",
    //配置端口號
    port: "8080",
    //注意：在開發(fā)階段，通過向當(dāng)前開發(fā)服務(wù)器發(fā)送ajax請求，當(dāng)前服務(wù)器會將請求轉(zhuǎn)發(fā)給配置的代理服務(wù)器地址。
    //這里只能配置一個代理服務(wù)器
    // proxy:'http://localhost:7788',
    // 配置多個代理服務(wù)器地址
    proxy: {
      // /stu是前綴
      "/stu": {
        //代理的地址
        target: "http://localhost:5566",
        //路徑重寫，因為向真實的后臺發(fā)送請求時，不需要加前綴
        pathRewrite: {
          //將地址中，/stu替換成空
          // ajax向http://localhost:8080/stu/list發(fā)送請求
          // 代理服務(wù)器會幫我們向http://localhost:5566/stu/list發(fā)送請求
          // 但是http://localhost:5566服務(wù)器的真實地址應(yīng)該是http://localhost:5566/list，沒有/stu前綴
          // 所以在向真實的后臺發(fā)送請求時，要將路徑中的前綴刪除掉。
          "^/stu": "", //將/stu替換成空
        },
      },
      "/car": {
        //代理的地址
        target: "http://localhost:7788",
        pathRewrite: {
          "^/car": "",
        },
      },
    },
  },
};

代理服務(wù)器.png

頁面

 methods: {
   // 加載學(xué)生信息的方法
   loadStudent() {
     // 向當(dāng)前服務(wù)器發(fā)請求，當(dāng)前服務(wù)器會作為代理服務(wù)器，在通過原生http的方式向后臺服務(wù)器發(fā)請求
     // ajax請求默認要遵循同源策略：協(xié)議名，主機名，端口號要一致。
     // 注意：這里的/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基礎(chǔ)使用方法
在html頁面頭部中引入后在tabel標簽添加class樣式為table

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<table class="table">