尚硅谷：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=91
動畫效果
css3動畫
1调榄、先寫好動畫樣式
2虹菲、需要動畫的地方使用<transition>標簽包裹
3弦讽、樣式是定義好的名稱：進場動畫：v-enter-active 離場動畫：v-leave-active
4喇肋、如果transition取名字name=hello 動畫樣式：hello-enter-active鸣戴，不再使用默認的v-enter-active
5胯甩、默認剛進入的時候就有動畫昧廷，加屬性appear為true。 ：appear="true"
6偎箫、vue不與動畫對話木柬，而是控制樣式名稱！
過渡效果
簡寫代碼
或者
多個元素的過渡
transition元素淹办，只能包裹一個元素眉枕，如果是組，必須使用transition-group怜森，并且結合key使用
集成第三方庫實現動畫
庫名：Animate
https://www.npmjs.com/package/animate
https://animate.style/
總結
為什么vue或者react盡量少的使用jauery速挑？
因為jquery主要是封裝了對dom操作的api，而vue和react主要是減少對dom的操作
雖然jquery有ajax請求副硅，但是有很多其他的代替api姥宝；如axios
axios優(yōu)勢是：
1、是promise封裝;
2想许、體量小伶授，是jquery的1/4;
3、
jquery流纹、axios都是對xhr（XMLHttpRequest）的封裝糜烹！
fetch 與 xhr是平級的。
fetch 也是promise風格的漱凝。
問題一：fetch返回的數據會包裹2層promise
問題二：fetch的兼容性問題（IE上不能使用fetch）
同源策略（3個）：
協議名
主機名
端口號
http://localhost:8080
瀏覽器發(fā)送請求疮蹦，服務器收到，并返回數據茸炒，瀏覽器收到信息愕乎，但是發(fā)現不是同一策略阵苇，所以瀏覽器攔截了。感论。绅项。
跨域問題的解決：
1、使用cors（后端配置）
2比肄、使用jsonp快耿，主要是借助script標簽，在src中引入外部資源的時候芳绩，不受同源資源限制的策略（前后端搭配使用）只能解決get請求掀亥，不能解決post請求
3、配置代理服務器
服務器之間傳數據妥色，不使用ajax搪花，直接使用http請求即可。
ajax是前端技術嘹害，必須是有瀏覽器撮竿，有window，有xhr/fetch等
代理服務器配置方法：
1吼拥、nginx
2倚聚、借助vue-cli（在vue.config.js中配置 devserver.proxy）
示例：
方式一：
image.png
localhost:8080 本地資源訪問路徑
localhost:5000/students 才是服務器資源訪問路徑
在項目中axios訪問地址是"localhost:8080/students"
只有在當前項目中沒有的資源，才會去轉到服務器上面凿可。如果訪問地址，在前端有資源授账，就不會再用代理枯跑，請求后臺服務器了。
存在問題2個：
1白热、不能同時指定多個代理敛助。
2、不能確定哪些請求可以走代理屋确。（不靈活）
方式二：
image.png
通過參數 pathRewrite：{"^/atguigu":""}
表示把以'/atguigu'開頭的字符串替換為空串纳击。
ws表示用于支持websocket
changeOrigin：true/false 用于控制請求頭中的host值，true表示與服務器一致攻臀，false表示顯示前端真實的請求地址焕数，默認為true
總結1
總結2
import引入css文件，會嚴格檢測資源文件刨啸！
在src下新建assets文件夾堡赔，css文件夾，放入bootstrap.css文件设联，在App.vue中引入（不推薦）
或者在public文件夾下新建css文件夾善已，放入bootstrap.css文件灼捂，在index.html中引入
請求的模板字符串${aaa}
后臺接口返回的數據，需要查看后臺提供的接口文檔换团！
兄弟組件間通信悉稠，推薦使用全局事件總線！
組件傳值與接收值艘包，不能定義多個參數偎球，直接傳true或者false
// 方法一
自定義全局事件總線（接收者）
this.$bus.on("fn",(isFirst,isLoading,users)=>{})
使用全局事件總線（發(fā)布者）
this.$bus.$emit("fn",true,false,[1,2,3]) // **語義不明確**，盡量避免使用這個方法
// 方法二
使用對象的方式傳值與接收值
this.$bus.$emit("fn",{isFirst:true,isLoading:true,users:[1,2,3]})
this.$bus.on("fn",(obj)=>{this.isFirst=obj.isFirst}) // （方式一：每一個屬性去匹配）
this.$bus.on("fn",(obj)=>{this.userInfo=obj.obj}) // （方式二：使用對象辑甜，直接對象匹配,但是如果傳的值不全衰絮，可能出現屬性丟失的情況，使用下面的情況可以避免）
this.$bus.on("fn",(obj)=>{this.userInfo={...this.userInfo,...obj.obj}}) // (方式三：把用戶對象與傳入對象都延展開磷醋，以用戶的屬性為基準猫牡，匹配傳入的參數，有則替換邓线，沒有也不會丟失淌友。)
使用vue-resource（插件）發(fā)送請求
npm i vue-resource
import vueResource from vue-resource
Vue.use(vueResource )
this.$http.get(url).then(fn(){},fe(){})
插槽（slot）
先在組件中打個標識（挖個坑），等待組件的使用者去放入東西骇陈。
自閉合標簽震庭，開始結束標簽
<abc/>
<abc><img src=""></abc> 把img標簽放入指定的位置。
<slot>我是默認值你雌，如果使用者不傳器联，就顯示我。</slot>
默認插槽
具名插槽
插槽同名婿崭，不是覆蓋拨拓，是累加
<slot name="demo">我是默認值，如果使用者不傳氓栈，就顯示我渣磷。</slot> //定義
<abc><img slot="demo" src=""></abc> // 使用
作用域插槽
插槽本來就是為了占位醋界，讓使用者把對象輸入放到該位置。
但是如果插槽中有數據提完，需要渲染到每一個使用者里面，就需要使用值的傳遞氯葬，這個傳遞值的過程就是定義的作用域插槽。實現代碼如下
