2024年大二上学习日记9.1-9.2

9.1

1.学习动画效果和过渡效果

动画效果就是css3中用@keyframes 注册动画，然后使用动画

过渡

加过渡属性最好不要加在标签上（如h1），变换的时候不知道为什么会怪异地从‘天’飞下来，走了偏离的路线，用xxx-enter-active和xxx-leave-active就正常了。

2.学习集成第三方动画，介绍了animate.css这个实现动画效果的第三方库（还有很多类似的第三方库，后面可自行探索）

安装

引入

使用

元素进入的起点就是离开的终点，元素离开的起点就是进入的终点，实现一个轮回的效果。

3.学习配置代理

提及XHR（XMLHttpRequest），但是没有学，以下是菜鸟教程的解释

了解到XML的功能十分强大，可以优化数据的存储，以后有机会要学习。

看到有一个sever.js文件，上网了解到可以用Node.js搭建服务器。

从csdn上找到一个现成的server1.js文件，学会了在终端启动一个服务器。

学习用axios发送AJAX请求：（axios是一个基于promise的网络请求库）

AJAX还没学，需要在尚硅谷补充AJAX教程的学习。

安装axios

引入

开始使用

提及跨域请求问题（8080 vs 3000）

解决跨域请求的方法

学习用vue-cli开启代理服务器

在vue2官网的生态系统的vue-cli中找到参考配置中的devServer.proxy

但是由于还没学习服务器等相关知识，不懂怎么将别人写的sever1.js的端口改为本机端口

需要注意：   改了vue.config.js中的配置要把脚手架关闭，重新启动脚手架，配置才会生效，如：修改入口文件

9.2

1.继续学习配置代理方式一

在public文件夹下新建一个text.txt文件，修改axios.get中的地址，可以成功请求text.txt中的数据

需要注意，用axios这种方式配置代理时，只能在vue.config.js中开启一个代理服务器。

2.学习配置代理方式2

/api是请求前缀

把尚硅谷写的server1,server2重新写了，能成功启动并获取到数据，但是不知道为什么两个服务器的数据不能同时请求成功。解决了，原来只需要在两个命令行窗口分别启动服务器。

3.由于还没有案例的相关资源，所以跳过github案例

4.学习vue-resource

以下的几种都是用于发送AJAX请求的，axios比较常用

安装vue-resource(方法同之前)

在main.js中引入插件并使用插件

这个插件是要结合github案例使用的，先放放。

5.学习插槽

默认插槽：在Category.vue文件中添加一个<slot>标签

使用双标签，把需要插入的内容包裹在里面

具名插槽：给slot标签加上name属性

然后给使用插槽的标签加slot属性，属性值为slot标签name的值

拓展了一个新写法，在tempate中写v-slot:插槽名

注意：title不需要加冒号进行动态绑定

作用域插槽：数据是在插槽所在的组件中的，这时需要通过slot给使用组件的地方传递数据

如：Category.vue通过slot给App.vue传递需要用到的数据，传递的数据类型是对象（因为传递的数据可能有多个）

要用template包裹要接受数据的标签，scope属性负责接受数据

根据ES6语法，也可以写成这样（还没学）