使用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的源文件
<head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head>
4.簡單的頁面
1)首先v-model,數據的雙向綁定,根據你文本框輸入的值變化而變化.
2)@click綁定一個click事件,其中@是v-on的縮寫.當然綁定事件可以帶參數例如@click='time(item)'.
3)v-for="(index, item) in list",循環數組,index為數組的角標,item為數組中的值.
可以看一下vue文檔進一步了解.
<body>
<div id="play">
<span>輸入數字,點擊開始,會生成對應輸入數字的表格,從表格中數字1開始點擊,按順序點擊到最後....</span><br />
<input type="number" v-model="num" />
<button @click='arr'>開始</button>
<br />
<div v-for="(index, item) in list">
<template v-if="index % num == 0 && index!=0"><br><br><br></template>
<div style="float: left;"><button class="ibutton" @click='time(item)'>{{item}}</button></div>
</div>
</div>
</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來控制點擊的順序.
<script>
new Vue({
el: '#play',
data: {
num: 2,
list: [],
startTime: 0,
endTime:0,
checkNum:0
},
methods: {
arr: function() {
if(this.num > 20){
alert('數值過大,浏覽器會死掉,最好不要大於20');
return;
}
this.checkNum = 0;
var arrlength = this.num * this.num;
var arr = new Array(arrlength);
var index = 0;
for(var i = 1; i <= arrlength; i++) {
//生成隨機數
var num = Math.random(); //Math.random()：得到一個0到1之間的隨機數
num = Math.ceil(num * arrlength); //num*?的取值范圍在0~?之間,使用向上取整就可以得到一個1~?的隨機
if(arr[0] != 0) {
var flag = false; // 控制是否存在重復元素
// 遍歷生產數組中的元素
for(var j = 0; j < arr.length; j++) {
if(num != arr[j]) {
flag = true;
} else {
flag = false;
break;
}
}
if(flag == true) {
arr[index++] = num;
} else {
// 發現有重復元素重新產生新的隨機數
i--;
}
} else {
arr[index++] = num;
}
}
this.list = arr;
},
time: function(item){
if(this.checkNum+1 != item){
alert('game over');
this.checkNum = 0;
return;
}
var date = new Date();
if(item == 1){
this.startTime = date.getTime();
}
if(item == this.num * this.num){
this.endTime = date.getTime();
var useTime = ((this.endTime - this.startTime)/1000).toFixed(2);
alert('使用了'+useTime+'秒');
this.checkNum = 0;
return;
}
this.checkNum = item;
}
}
})
</script>
6.css代碼
<style>
.ibutton{
margin-top: 10px;
margin-left: 10px;
color: #fff;
border: 1px solid #8a6de9;
background-color: #8a6de9;
font-size: 14px;
padding: 6px 12px;
border-radius: 7px;
width: 50px;
height: 40px;
}
</style>
7.在某些特定的場景使用vue來完成一個功能要比jquery簡單的多,但是jquery還是很強大的,根據不同的場景運用不同的技術,更快更好的完成自己想要的功能.
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。