使用vue给家里的小仔做一个加减练习题吧
我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!
在培养小孩过程中,其中必不可少的是教小孩加减算法题,这是很基础,这是很重要的,可以锻炼其算术思维。但是我们大人忙的时候,没空给小孩出题。于是乎,我们就可以使用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
就只能抓瞎了,纯粹的面向网页编程,文章写的不是很好,涉及的点,有点多,却不想放弃任何一点,所以看起来,有点杂乱。好咯,就这样咯,快来动动你的小手指,给你家小孩搞一个练习题吧。