尚硅谷：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优势是：
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
浏览器发送请求，服务器收到，并返回数据，浏览器收到信息，但是发现不是同一策略，所以浏览器拦截了。。。
跨域问题的解决：
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)=>{})
使用全局事件总线（发布者）
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（插件）发送请求
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> // 使用
作用域插槽
插槽本来就是为了占位，让使用者把对象输入放到该位置。
但是如果插槽中有数据，需要渲染到每一个使用者里面，就需要使用值的传递，这个传递值的过程就是定义的作用域插槽。实现代码如下
