实习手计（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节点已经被挂载出来。

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

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

（3）作用域

• 场景

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

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

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

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

• 拓展（作用域）

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

四、修改表单

表单更新: 增加一个表单项。就是要把填的表单数据提交到统一的接口（纷享销客？）。so你提交上去的数据就需要和接口要求返回的数据格式一致了。这一部分就是别人咋写我照抄（我是cv小能手哈哈）。but有一个地方我没理解所以写错了。（忘记copy代码了下周补）不过还是有几个要注意的点啊。

• 注意接口要求返回的数据类型格式是什么
• 大概逻辑要理清（我就是糊里糊涂的copy。。。尴尬）

五、写在最后

• 第三周还Ok了，其实没有改多少东西，开开心心按时上下班，还有人唠嗑（奈斯，不敢想象没有人说话我会多郁闷）
• 哦对了，这周发工资了哈哈哈，虽然只有一丢丢（不及师父的二十分之一，是真高啊），但还是开心的
• 收获了一个固定饭搭子，夸夸她哈哈~人真的很好很活泼，就是我俩制定的计划总是，拖延，起不来。。
• 我真发现我好宅。（可能一个人的时候吧）虽然但是，这周还一个人去西湖转了一圈哦~（还是在别人鼓励下终于出去转了一圈，反正那两天状态很差）
• 才补的博客。。上周说的学习计划也没有落实。。（第五周一定落实，每天学了多少就发多少呜呜呜不然根本控制不住自己）
• 拜拜

原文地址：https://blog.csdn.net/m0_73560798/article/details/140597605

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！