我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
大家都知道，在写程序的时候，容易暴躁，暴躁起来就容易摔键盘，摔屏幕，这样容易造成屏幕损坏。于是乎，写了一个小工具来检测屏幕是否是好的。
各位前端大佬不要笑话，运维小弟献丑了。
项目体验
项目检测效果，比如，小弟我的电脑屏幕，在屏幕检测器检测后，效果是这样的，这样的话很容易判断屏幕是否坏了。
项目思路
我们检测屏幕是否有损坏，最有效的方法是将整个屏幕都置于一个颜色，例如: 红色、黑色、蓝色、绿色等。而后通过肉眼观察，即可辨别屏幕是否损坏。
初始化demo
我们打开码上掘金(code.juejin.cn/)，创建代码片段，选择新建空白片段。
由于到引入vue.js，所以我们选择Script中的设置
在设置中，我们输入vue.js``cdn的地址即可，比如我们使用vue 2，我们就可以输入: cdn.jsdelivr.net/npm/vue@2.6…
我们可以编写如下代码，来校验一下我们设置的demo环境。
我们如上编写了一段非常简单的代码，编写完毕后，我们点击运行，即可出现hello pdudo，证明我们的环境是没问题的了。
核心代码
在上述项目思路过程，我们已经介绍过项目的核心思路，那就是给屏幕设置一个背景色就可以了，我们可以先不适用vue.js，用html+ css的形式，来编写该功能。
我们核心代码如上，我们定义一个新的div标签，其中给了一个id标签 为window和class标签为green，其中window编写的是长和宽是1000vh以及 1000vw。(关于为什么使用vh和vw而不是用px，我们总结的时候讲)，而green编写的是背景为绿色。
使用vue控制输出
如上，我们整个静态框架已经搭建完毕了，我们想输出不同的颜色，我们可以定义一堆class，例如:
.green {
background: green;
}
.red {
background: red;
}
.white {
background: white;
}
.blue {
background: blue;
}
.black {
background: black;
}
如上我们定义了5种颜色，我们在静态代码中，只需要键入class="xxx",其中xxx是指我们已经规定好了的class，而这个，正是我们需要使用vue来控制的。
如何使用vue来修改class的标签的值呢？ vue给我们提供了一个方法叫做: v-bind:class，我们可以修改下，不直接写class，而是写v-bind:class，也不是直接写green了，而是vue中变量。
我们尝试一下，我们将其变量修改为red运行试试。
我们目的不仅于此，我们想使用鼠标，来切换颜色，关于这点，其实我们可以做一个点击事件，来修改vue中的backcolor变量的值，来实现该需求。
基于此，我们先来做点击事件。
我们在该div上绑定一个点击事件，其值为changeBackground， 接着，我们再编写该方法，目前我们在方法中，将其backcolor修改为blue，最后我们尝试运行下，点击屏蔽，发现页面由绿色变为蓝色了。
我们如何有序循环切换呢？
我们可以每次点击，都修改其backcolor的值，来达到该效果，我们就编写该方法即可。
changeBackground() {
switch (this.backcolor){
case "red":
this.backcolor = "green"
break
case "green":
this.backcolor = "white"
break
case "white":
this.backcolor = "blue"
break
case "blue":
this.backcolor = "black"
break
case "black":
this.backcolor = "red"
break
}
}
如上，代码就可以实现一个循环，若收到点击消息，当检测到当前屏幕是红色的时候，就将其修改为绿色，当检测到当前屏幕是绿色的话，就将其修改为白色，最终的循环颜色为:
那我们的功能实现了，最后给代码命名一下，叫做“屏幕检测”。
总结
由于没有系统性的学习过前端相关知识，现在拿起来，稍微有点慢，作为一个做运维，或者写后端的人来讲，前端项目写起来，真的有一种成就感。关于项目中，div为什么要设置为vh和vw，如果我们设置为100%，对于项目来说，是我们将父节点的长和宽占满，但是我们父节点又没有任何东西，所以，这样设置，不得行，最后考虑了一个最笨的办法，将单位百分比换成vh和vw形式，怎么样，好玩吧，快来动动小手指，试试吧。
