标签：
使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束.
1.首先下载vue源码,下载地址http://cn.vuejs.org
2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解)
3.建立一个普通的html文件,在头部引用vue的源文件
1 <head> 2 <meta charset="utf-8" /> 3 <title></title> 4 <script type="text/javascript" src="js/vue.js"></script> 5 </head>
4.简单的页面
1)首先v-model,数据的双向绑定,根据你文本框输入的值变化而变化.
2)@click绑定一个click事件,其中@是v-on的缩写.当然绑定事件可以带参数例如@click=‘time(item)‘.
3)v-for="(index, item) in list",循环数组,index为数组的角标,item为数组中的值.
可以看一下vue文档进一步了解.
1 <body> 2 <div id="play"> 3 <span>输入数字,点击开始,会生成对应输入数字的表格,从表格中数字1开始点击,按顺序点击到最后....</span><br /> 4 <input type="number" v-model="num" /> 5 <button @click=‘arr‘>开始</button> 6 <br /> 7 <div v-for="(index, item) in list"> 8 <template v-if="index % num == 0 && index!=0"><br><br><br></template> 9 <div style="float: left;"><button class="ibutton" @click=‘time(item)‘>{{item}}</button></div> 10 </div> 11 </div> 12 </body>
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来控制点击的顺序.
1 <script> 2 new Vue({ 3 el: ‘#play‘, 4 data: { 5 num: 2, 6 list: [], 7 startTime: 0, 8 endTime:0, 9 checkNum:0 10 }, 11 methods: { 12 arr: function() { 13 if(this.num > 20){ 14 alert(‘数值过大,浏览器会死掉,最好不要大于20‘); 15 return; 16 } 17 this.checkNum = 0; 18 var arrlength = this.num * this.num; 19 var arr = new Array(arrlength); 20 var index = 0; 21 for(var i = 1; i <= arrlength; i++) { 22 //生成随机数 23 var num = Math.random(); //Math.random()：得到一个0到1之间的随机数 24 num = Math.ceil(num * arrlength); //num*?的取值范围在0~?之间,使用向上取整就可以得到一个1~?的随机 25 if(arr[0] != 0) { 26 var flag = false; // 控制是否存在重复元素 27 // 遍历生产数组中的元素 28 for(var j = 0; j < arr.length; j++) { 29 if(num != arr[j]) { 30 flag = true; 31 } else { 32 flag = false; 33 break; 34 } 35 } 36 if(flag == true) { 37 arr[index++] = num; 38 } else { 39 // 发现有重复元素重新产生新的随机数 40 i--; 41 } 42 } else { 43 arr[index++] = num; 44 } 45 46 } 47 this.list = arr; 48 }, 49 time: function(item){ 50 if(this.checkNum+1 != item){ 51 alert(‘game over‘); 52 this.checkNum = 0; 53 return; 54 } 55 var date = new Date(); 56 if(item == 1){ 57 this.startTime = date.getTime(); 58 } 59 if(item == this.num * this.num){ 60 this.endTime = date.getTime(); 61 var useTime = ((this.endTime - this.startTime)/1000).toFixed(2); 62 alert(‘使用了‘+useTime+‘秒‘); 63 this.checkNum = 0; 64 return; 65 } 66 this.checkNum = item; 67 } 68 } 69 }) 70 </script>
6.css代码
1 <style> 2 .ibutton{ 3 margin-top: 10px; 4 margin-left: 10px; 5 color: #fff; 6 border: 1px solid #8a6de9; 7 background-color: #8a6de9; 8 font-size: 14px; 9 padding: 6px 12px; 10 border-radius: 7px; 11 width: 50px; 12 height: 40px; 13 } 14 </style>
7.在某些特定的场景使用vue来完成一个功能要比jquery简单的多,但是jquery还是很强大的,根据不同的场景运用不同的技术,更快更好的完成自己想要的功能.
标签：
原文地址：http://www.cnblogs.com/tab121215/p/5823359.html
