今天收到中秋祝福了没？使用vue做一个中秋祝福吧

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

今天是2022年9月10日，虎年中秋，你收到中秋祝福了没？ “但愿人长久，千里共婵娟”，今天我们使用vue做一个中秋祝福礼送给大家。

各位前端大佬不要笑话，小弟献丑了。

项目展示

码上掘金

code.juejin.cn/pen/7141544…

运行效果

在圆月下，右边祝福语会不断变化

初始化项目

如果你已经使用过码上掘金，可以跳过本段落，直接阅读编写项目部分。

我们打开 码上掘金网站 (code.juejin.cn/) , 选择【新建代码片段】【新建空白片段】

项目创建完毕后，我们在右边Script的设置处，添加vue的依赖资源。

我们在依赖处，添加vue 2的cdn地址: cdn.jsdelivr.net/npm/vue@2.6…

我们最后编写代码来测试一下我们的环境哈

我们编写如上代码，而后点击运行，若渲染成功，证明我们vue环境已经配置完成了哈。

制作圆月

我们代码运行后如下:

我们将整个app div标签背景颜色设置为灰色，模拟黑夜，长和宽我们都设置100vw和100vh，将这个屏幕都给渲染了，接着我们再做一个“月亮”，我们定义一个新的div给定一个id为mon，宽和高我们均设置为50vh，接着再设置一个渐变色，由灰黄色渐变亮黄色。

生成祝福语

我们将使用vue动态生成祝福语，不过我们得先定义好中秋祝福语，如下:

我们定义了一个arr数组，我们将需要生成的祝福语，都给写到数组中去，而后我们再定义一个方法，用于定时去改变toyou的值，代码编写如下:

如上代码是使用了定时器，每个5我们就更新toyou的值，现在问题是我们怎么样去执行该函数，我们可以定义一个监视器，设置为一开始就执行，而后在监视器中，我们运行该方法。

最后我们再将toyou的值，放到页面中去，设置css即可。

如上，我们就可以将项目命名为“中秋献礼” ，我们做完了。

总结

这个css看着挺简单的，实际上写起来，有点复杂，特别是对于没有怎么写过css的人而言，不过不怕，我们可以面向搜索引擎编程。最后比较难的一点是要一开始就运行方法来供祝福语切换，我也不知道从哪儿搜索到的这个方法。不过总体而言，前端代码，写出来非常有成就感呀。

“但愿人长久，千里共婵娟。”，中秋快乐丫！

快来动动你的小手指，尝试一下吧。