Use vue to write a mini-clicking number timing game, which is included in the text box. Clicking starts will generate a table with 3 rows and 3 columns. The table data is randomly arranged from 1 to 9. At this time, click from 1 and click to 9 in order. When clicking in the correct order, the time used will be prompted. If the order is not correct, the game will be prompted.
1. First download the vue source code, download the address http://cn.vuejs.org
2.jquery is oriented towards dom operations, while vue is oriented towards data operations, so it is best not to operate dom when using vue, try to show the uniqueness of vue (it may be easier to understand if you have used angularjs)
3. Create a normal html file and reference the source file of vue in the header
<head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue.js"></script></head>
4. Simple page
1) First of all, v-model, the two-way binding of the data will change according to the value entered in your text box.
2) @click binds a click event, where @ is the abbreviation of v-on. Of course, the binding event can take parameters such as @click='time(item)'.
3) v-for="(index, item) in list", loop array, index is the angle mark of the array, and item is the value in the array.
You can check out the vue documentation for more information.
<body> <div id="play"> <span>Enter the number and click to start, and a table corresponding to the input number will be generated. Start from the number 1 in the table, click to the end in order....</span><br /> <input type="number" v-model="num" /> <button @click='arr'>Start</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 @click='time(item)'>{{item}}</button></div> </div> </div></body>5.vue operation
1) First, you need to new an instance of Vue, and el bind your dom, and use id as the identifier here
2) data is the data to be operated by vue, the value of the num text box (default is 2), list[] According to the text box value, the generated list, the startTime click table start time, the endTime click table end time, and the currently selected number of checkNum.
3) There are two methods in methods arr that generates an array based on the value of the text box, and generates an array with square length of the text box value and will not be repeated. The value of the array is 1-square of the text box value, and the value added to the text box is 3, then the generated array length is 9, the content of the array is 1-9 and does not repeat.
time calculates the start time and end time of clicks, and use check]Num to control the order of clicks.
<script> new Vue({ el: '#play', data: { num: 2, list: [], startTime: 0, endTime: 0, checkNum:0 }, methods: { arr: function() { if(this.num > 20){ alert('The value is too large, the browser will die, it is best not to be greater than 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++) { //Generate random number var num = Math.random(); //Math.random(): Get a random number between 0 and 1 num = Math.ceil(num * arrlength); //The value range of num*? is between 0~?, and use up rounding to get a random number of 1~? if(arr[0] != 0) { var flag = false; // Control whether there are duplicate elements// Traverse elements in the production array 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 found that there is a duplicate element and regenerates a new random number 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('used'+useTime+'seconds'); this.checkNum = 0; return; } this.checkNum = item; } } })</script>6.css code
<style> .ibutton{ margin-top: 10px; margin-left: 10px; color: #ffff; border: 1px solid #8a6de9; background-color: #8a6de9; font-size: 14px; padding: 6px 12px; border-radius: 7px; width: 50px; height: 40px; }</style>7. Using vue to complete a function in certain specific scenarios is much simpler than jquery, but jquery is still very powerful. Use different technologies to complete the functions you want faster and better according to different scenarios.
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.