使用vue編寫一個點(diǎn)擊數(shù)字計(jì)時小游戲,列入你在文本框中輸入3,點(diǎn)擊開始會生成一個3行3列的表格,表格數(shù)據(jù)為1-9隨機(jī)排列,這時候從1開始點(diǎn)擊,按順序點(diǎn)到9,當(dāng)按正確順序點(diǎn)擊完畢,會提示所用的時間,如果順序沒有按對,會提示游戲結(jié)束.

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

2.jquery是在面向dom操作,而vue是面向數(shù)據(jù)操作的,所以使用vue最好不要去操作dom,盡量發(fā)揮出vue的獨(dú)到之處,(如果使用過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,數(shù)據(jù)的雙向綁定,根據(jù)你文本框輸入的值變化而變化.

2)@click綁定一個click事件,其中@是v-on的縮寫.當(dāng)然綁定事件可以帶參數(shù)例如@click='time(item)'.

3)v-for="(index, item) in list",循環(huán)數(shù)組,index為數(shù)組的角標(biāo),item為數(shù)組中的值.

可以看一下vue文檔進(jìn)一步了解.

<body>
 <div id="play">
  <span>輸入數(shù)字,點(diǎn)擊開始,會生成對應(yīng)輸入數(shù)字的表格,從表格中數(shù)字1開始點(diǎn)擊,按順序點(diǎn)擊到最后....</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的實(shí)例,el綁定你的dom,這里用id作為標(biāo)識

2)data這是vue要操作的數(shù)據(jù),num文本框的值(默認(rèn)為2),list[]根據(jù)文本框值,生成的list,startTime點(diǎn)擊表格的開始時間,endTime點(diǎn)擊表格的結(jié)束時間,checkNum當(dāng)前選中的數(shù)字.

3)methods中有兩個方法arr用來根據(jù)文本框的值,生成一個數(shù)組,生成一個文本框值的平方長度,且不會重復(fù)的數(shù)組,數(shù)組的值為1-文本框值的平方,加入文本框的值為3,則生成的數(shù)組長度為9,數(shù)組的內(nèi)容為1-9且不重復(fù).

time計(jì)算點(diǎn)擊的開始時間和結(jié)束時間,用check]Num來控制點(diǎn)擊的順序.

<script>
 new Vue({
  el: '#play',
  data: {
  num: 2,
  list: [],
  startTime: 0,
  endTime:0,
  checkNum:0
  },
  methods: {
  arr: function() {
   if(this.num > 20){
   alert('數(shù)值過大,瀏覽器會死掉,最好不要大于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++) {
   //生成隨機(jī)數(shù)
   var num = Math.random(); //Math.random()：得到一個0到1之間的隨機(jī)數(shù)
   num = Math.ceil(num * arrlength); //num*?的取值范圍在0~?之間,使用向上取整就可以得到一個1~?的隨機(jī)
   if(arr[0] != 0) {
    var flag = false; // 控制是否存在重復(fù)元素
    // 遍歷生產(chǎn)數(shù)組中的元素
    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 {
    // 發(fā)現(xiàn)有重復(fù)元素重新產(chǎn)生新的隨機(jī)數(shù)
    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還是很強(qiáng)大的,根據(jù)不同的場景運(yùn)用不同的技術(shù),更快更好的完成自己想要的功能.

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: