使用vue编写一个点击数字计时小游戏

使用vue编写一个点击数字计时小游戏

使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,kZeKmAJ表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束.

1.首先下载vue源码,下载地址http://cn.vuejs.org

2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解)

3.建立一个普通的html文件,在头部引用vue的源文件

4.简单的页面

1)首先v-model,数据的双向绑定,根据你文本框输入的值变化而变化.

2)@click绑定一个click事件,其中@是v-on的缩写.当然绑定事件可以带参数例如@click='time(item)'.

3)v-for="(index, item) in list",循环数组,index为数组的角标,item为数组中的值.

可以看一下vue文档进一步了解.

输入数字,点击开始,会生成对应输入数字的表格,从表格中数字1开始点击,按顺序点击到最后....

开始

5.vue操作

1)首先要new出一个Vue的实例,el绑定你的dom,这里用id作为标识

2)data这是vue要操作的数据,num文本框的值(默认为2),list[]根据文本框值,生成的list,startTime点击表格的开始时间,endTime点击表格的结束时间,checkNum当前选中的数字.

3)methods中有两个方法arr用来根据文本框的值,生成一个数组,生成一个文本框值的平方长度,且不会重复的数组,数组的值为1-文本框值的平方,加入文本框的值为3,则生成的数组长度为9,数组的内容为1-9且不重复.

time计算点击的开始时间和结束时间,用check]Num来控制点击的顺序.

6.css代码

7.在某些特定的场景使用vue来完成一个功能要比jquery简单的多,但是jquery还是很强大的,根据不同的场景运用不同的技术,更快更好的完成自己想要的功能.

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。