这是我参与「第五届青训营」伴学笔记创作活动的第11天

前言

不知不觉，青训营课程已经过半了，寒假也马上结束了。这次青训营我选择的大项目是基于SSR开发仿掘金站点。寒假之前，我只是一个对HTML、CSS、JavaScript前端三件套有所了解的菜鸡，当时对前端也不甚了解，以为前端真如网上所说的“好上手”。在青训营进度的推进下，我也很快地学习并掌握了更多前端知识，尽管过程并没有想象当中的轻松。万事开头难嘛，也是时候开始推动大项目的开发了。

准备工作

说实话，在了解项目之前，我连SSR是什么都不知道。所以，想要更好地完成项目，需要先了解一下SSR的相关内容。

什么是SSR？

SSR(Server Side Rendering) 就是服务端渲染，也就是将应用程序HTML的渲染放在服务端完成，然后再把HTML直接返回给客户端。这与客户端渲染（也称为客户端端渲染）的方式相反，客户端渲染是在客户端浏览器中渲染HTML的。

为什么使用SSR开发？

SRR有很多其他技术不具备的优点，例如：使用 SSR 的一个主要优点是它可以提高应用程序的初始加载速度。在客户端渲染的应用程序中，HTML 首先是空白的，然后在客户端加载所需的资源（例如 JavaScript 文件）并渲染应用程序之后，才会显示内容。这可能会导致初始加载时间较长。但是，使用 SSR，HTML 将是已经生成好的，可以立即显示在浏览器中。

开发过程

了解过SSR之后，经过和小组成员的讨论，最后决定使用Vuejs框架(适合萌新)。于是我们都一边学习Vue相关知识，一边艰难地搭建仿掘金站点的框架。第一次学习Vue的一些基础用法之后，来不及练习，就得抓紧时间进入实战了。
第一步打算先实现如下图所示的小部件来练练手。
不知道是我小看它了，还是高看我自己了。看似简单的逻辑，我敲代码的过程却举步维艰。脑子里有很多思路，但都被陌生的语法和各种出错一一打消。这就是学代码不敲代码的结果！最后只得用最笨的办法解决，以下贴出部分“笨”语句：

<script type="text/javascript">
    let vm = new Vue({
        el:'#frame',
        data:{
            isShow:1,
        },
        methods:{
            change1(e){
                this.isShow = 1,
                document.getElementById('date').style.display="none";
                document.getElementById('ch1').style.color= 'dodgerblue';
                document.getElementById('ch2').style.color= 'rgb(125,125,125)';
                document.getElementById('ch3').style.color= 'rgb(125,125,125)';
            },
            change2(e){
                this.isShow = 2,
                document.getElementById('date').style.display="none";
                document.getElementById('ch2').style.color= 'dodgerblue';
                document.getElementById('ch1').style.color= 'rgb(125,125,125)';
                document.getElementById('ch3').style.color= 'rgb(125,125,125)';
            },
            change3(e){
                this.isShow = 3,
                document.getElementById('date').style.display="block";
                document.getElementById('ch3').style.color= 'dodgerblue';
                document.getElementById('ch2').style.color= 'rgb(125,125,125)';
                document.getElementById('ch1').style.color= 'rgb(125,125,125)';
            }
        }
    });
</script>

就这，这也是我修修改改一下午的结果。
队友看到后哭笑不得，教我一行便实现了其功能：
:style="{color:isShow===1?'dodgerblue':'rgb(125,125,125)'}"

结束语

今天是仿掘金站点开发的第二天，过程中学到了很多。我也因此明白了：知识是在不断实践中获取。
开发之路仍在继续。。。