在培养小孩过程中，其中必不可少的是教小孩加减算法题，这是很基础，这是很重要的，可以锻炼其算术思维。但是我们大人忙的时候，没空给小孩出题。于是乎，我们就可以使用vue给小孩写一个加减练习题。
各位前端大佬不要笑话，运维小弟献丑了。
项目代码:code.juejin.cn/pen/7140843…
项目运行效果:
创建项目
我们打开码上掘金(code.juejin.cn/) ，选择【新建代码片段】【新建空白片段】
为什么我们这里新建代码片段的时候不直接选择vue2或者vue3的片段呢？ 因为运维小老弟我还不是很会。只会使用js引用vue。
我们创建新项目后，我们将vue 2的cdn导入进项目中，选择Script右边的设置按钮
点开后，我们将vue的地址填进去。
最后，我们编写代码来验证下，vue环境是否可以正常使用。
如上，我们写了一个很简单的vue，运行起来后，我们发现是可以拿到world变量的值的。
证明我们环境设置没问题，接下来我们看看整个项目的设计吧。
设计思路
我们想做一个比较简单的加减练习册，根据按钮随机更新题目，用户在输入结果后，点击一下别的地方，就开始验证结果，验证结果会给出正确与否，以及小提示，整体设计草图如下:
如上所述，若输入结果为正确的值，则提示√，否则为×。
当题目打错后，我们会输出一个温馨提示，设计如下：
当然回答正确的时候，也应当提示，类似于： “你真棒”这类的话。
上面，便是我们整个项目的核心功能了，最后再设计一个按钮，用于刷新题目使用，设计图类似于：
静态页面编写
如上，我们已经描述了设计思路，接着，我们可以编写静态页面了。通过设计思路，我们不难看出，在整个页面，我们有按钮来作为刷新题目使用，还有一个输入框，用于用户输入计算的结果，我们来分析下呢：
如上，我们可以很容易的编写出静态页面代码：
<div id="app"> <div> 3 + 2 = <input> <p>温馨小提示: </p> <br /> <button>换题</button> </div> </div>
运行后，效果如下:
如上，我们主体框架搭建完毕了，样子不太好看，不要急，我们给穿上CSS外衣就好看了。
这么样，我们加入css样式后，就好看多了吧。
完成主线代码
如上，我们静态页面已经写好了，现在我们接入vue.js，让它变为动态的，那么我们应该如何写呢？ 我们最简单的想法是这样的：
我们使用计算属性，来算出n和m正确的值，再让它和用户输入的值做对比，如果一致，则证明计算正确，否则计算错误。
基于此，我们修改下代码
如上代码我们加入了vue变量,m,n,op最后还定义了一个计算变量realResult。
我们使用v-model来活动用户的结果输入，编写如下
v-model.lazy="inputResult"
其中lazy参数表示只有聚焦离开了输入框，再传参值vue中，相应的，我们在vue.data中也应该写上该变量才行。
我们定义完该变量后，我们可以开始写监听器了，代码如下:
watch: { inputResult: { handler(newValue){ this.ok = false this.fail = false if (this.realResult == newValue) { this.ok = true this.result_text = "恭喜你，回答正确，结果为: " + this.realResult + "。" }else { this.fail = true this.result_text = "你小子，回答错了，正确的结果为: " + this.realResult + "。" } } } }
关于ok、fail等，不在主线内，我们后续会说明。
最后我们就只剩下一个换题了，换题由于是按钮，所以我们可以写一个函数来操作，我们将此函数命名为: changeTitle，我们编写如下:
methods: { changeTitle() { this.result_text = "请删掉上一题的答案继续答题" this.ok = false this.fail = false const ops = Math.floor(Math.random() * 2) if (ops == 0) { this.op = "+" } else { this.op = "-" } this.n1 = Math.floor(Math.random() * 100) this.n2 = Math.floor(Math.random() * 100) } }
完善边角料
还记得我们在设计思路的时候，提及到了√和×么？ 以及温馨小提示。
这里我们可以使用vue中的v-if来完成，具体代码如下:
<input v-if="ok" id="result_ok" disabled="disable" value="√"> <input v-if="fail" id="result_fail" disabled="disable" value="×"> <p>温馨小提示: {{result_text}}</p>
关于这里的细节，可以看代码，这里不再赘述。
总结
学习了一段时间前端，不由感叹一句，前端是真的太卷了，知识点太多了，我就只会写html和一点点的vue.js，遇到css就只能抓瞎了，纯粹的面向网页编程，文章写的不是很好，涉及的点，有点多，却不想放弃任何一点，所以看起来，有点杂乱。好咯，就这样咯，快来动动你的小手指，给你家小孩搞一个练习题吧。
