实习手计（3）：前端菜鸟碎碎念

也是顺利熬过三周，感觉时间还蛮快的，但是感觉人变懒散了啊啊啊~本周的周报都没写，每天的学习计划也没完成。本来就菜，再这么懒和拖延怎么办！！！这周总的来说活不太多呢（挺好的），但是发现自己真的是菜啊，很简单的知识点都会忽略。。。（有点丢人）

一、需求

照常周一开会，意识到接下来的几个需求应该不会像前面简单了。总结两个吧：首页改成动画（貌似要接触新的东西了），奥运页面也要重改，以及其他可能需要改的小需求。

二、学习

（1）GSAP

既然要接触新的东西，那就先学习一下怎么使用gsap吧。（先附上两个链接，这写的还是蛮详细的，会copy能用就好了，也是有点懒了，后面学了在专门写一篇gsap的吧）这里先记录一下怎么使用。

gsap
掘金gsap

这是自己写了一个小demo，然而过程并不顺利呢（虽然很简单。）

<template><div class="container"><div class="flair flair--25"></div><div class="nav light"><button id="play" @click="play">play()</button><button id="pause" @click="pause">pause()</button><button id="resume" @click="resume">resume()</button><button id="reverse" @click="reverse">reverse()</button><button id="restart" @click="restart">restart()</button></div></div>
</template><script setup>import { gsap } from 'gsap';import { onMounted } from 'vue';let tween;onMounted(() => {let nav = document.querySelector('.nav');tween = gsap.to('.flair', {duration: 2,//动画的持续时间为2秒x: () => nav.offsetWidth, // 元素在x轴上的移动距离等于.nav 元素的宽度xPercent: -100, // rotation: 360,//元素旋转360度ease: 'none',//恒定的速度paused: true,});});const play = () => {tween.play();};const pause = () => {tween.pause();};const resume = () => {tween.resume();};const reverse = () => {tween.reverse();};const restart = () => {tween.restart();};
</script>

（2）生命周期钩子函数

场景

直接copy过来的代码里面使用document.querySelector。但会发现并没有选到这个节点哦节点还没有挂载出来。所以要使用onMounted保证在选择之前这个dom节点已经被挂载出来。

拓展（几个常用生命周期的使用场景）

onBeforeMount。在组件挂载到 DOM 前调用。使用场景：设置监听器。
onMounted。在组件挂载完成后调用，此时 DOM 已经可访问。使用场景：设置基于 DOM 的动画或过渡、获取dom节点。
onBeforeUpdate。在组件更新之前调用。
onUpdated。在组件更新后调用。
onBeforeUnmount。在组件卸载前调用。使用场景：清除事件监听器、清除定时器。
onUnmounted。在组件卸载后调用。

（3）作用域

场景

这个例子之前是这样写的：

onMounted(() => {let tween = xxxx;
)};const play = () => {tween.play();};

但是会发现其实你是拿不到tween的，因为let声明的变量是块级作用域（只能在{}访问到）。但要在外面访问到这个变量就需要先提到全局作用域声明。所以就应该这样写：

let tween;
onMounted(() => {tween = xxx;
});

拓展（作用域）

全局作用域：最外层的作用域，它在整个程序中都是可访问的。
函数作用域：函数内部声明的变量（使用var关键字）具有函数作用域，变量仅限于函数体内部可访问。
词法作用域：在词法作用域中，内层作用域可以访问外层作用域中的变量，只要它们在声明时的词法位置上有直接或间接的嵌套关系。与函数作用域不同，函数作用域仅限于函数体内部。（let const）

三、回顾

接下来有一个需要做的就是模仿其他官网的一个动画。我需要做的也就是将其封装成有一个组件，在父组件中可以用子组件的逻辑。涉及到的也就是父子组件通信props和插槽的使用。

父子组件通信

//子组件
<template><div><video :src="video.src"></video><slot name="text"></slot></div>
</template><script setup lang="ts">import { onMounted, ref } from 'vue';defineProps({video: {default: () => ({src: '',}),},});
</script><style lang="less" scoped>
</style>//父组件<template><div><VideoText :video="videoInfo"><template #text> </template></VideoText></div>
</template><script setup lang="ts">import VideoText from './AminationVideoScroll.vue';const videoInfo = {src: '',};
</script><style lang="less" scoped>
</style>