Vue 初体验

基于 Vue CLI 3 的 Website 初体验。
关键点: CSS -> transition ；JS -> 添加事件、修改div。（重点不是设计，页面简单到不必多说）

碎碎念 1： Vue 中 img 的 src 属性绑定失败

这是我第一个遇到的「痛苦」难题。本是出于变量传值方便以后修改，将 web 中「文字」和「图片」都作为 data 数据对象，但绑定时，使用和文字同样的招数却不灵了：

<!-- 直接套用文字的(语法不对) -->
<img src="{{ imgUrl }}"/> 
<!-- Vue 语法，但还是无法显示图片 -->
<img v-bind:src="imgUrl"/>

囫囵吞枣的我自然不知，但这篇文章救了我，偷懒的直接套用第二种方法传入图片编码，imgUrl = require('./')
解决。

碎碎念 2： CSS 的左中右布局

如图所示，设计图中三个导航区，对布局采用了左对齐、居中对齐、右对齐3种形式：

本来是单独一个个写出来的，但某天突然在 30 Seconds of CSS 中发现了新大陆：

{
  display: flex;
  justify-content: space-between;
}

真的很轻便呢，如同掌握了一个新技能，一下子省去了好多代码。
解决。

碎碎念 3： 添加事件

最初这个 web 这样画其实就是为了此动效，鼠标 hover 导航时，会随之出现下落的图片，背景色也跟着改变（能完美展示 gakki 照片）。

这个我没找到（可抄袭的源码）参考，所以直接请教然后照搬过来了2333
来源：YT 的 codepen
主要是通过 document.getElementById 查找到对应图片，可以 1. 直接更改其样式，2. 直接加一个 class

碎碎念 4： 其他交代
:hover 后图片开始动态播放，实现方法来源于味觉漫游
方法很是粗暴，使用两张素材，一张静态的第一帧，一张 GIF，让静态图覆盖在 GIF 之上，hover 时静态图透明度由 1 -> 0 即可。

点击导航的定位锚点，实现方法来源于简书文章
很简单的直接定位了，无过渡无动画，不是不想，原因是高级的我不会呢…

英文字体并非是使用 webfont ，而是加载了字体包，原因是免费的此字体 webfont 有使用时限，我穷不想买。

还有就是网页可能因为素材过多，加载超级慢，我也不会解决呢……loading 怎么加呢？

（这篇文章开头其实八月份就写了，会初步体验 Vue 也是源于自己许下的一个小愿望，只是没想到，真正实现出来竟是拖延至十一月。

页面内容很简单，涉及到的代码知识也很符合当初的定位，简单的小网页，最开始想要做的效果都一一实现了，虽然都是到处搬运代码hhh，但是很开心。
最后，设计一时爽，还原火葬场（没想到有天会有这体会）。）