Use Vue to write a click on the digital Timer games, listed in the text box you enter 3, click Start will generate a 3 Row 3 column table, the table data is 1-9 randomly arranged, at this time from 1 clicks, in order point to 9, when clicked in the correct order, will be prompted to use, if the order did not press right, Will prompt the game to end.
1. First download vue source, download the address http://cn.vuejs.org
2.jquery is a DOM-oriented operation, and Vue is data-oriented, so it is best to use Vue not to manipulate the DOM, to maximize Vue's uniqueness, (which may be easier to understand if you have used Angularjs).
3. Create an ordinary HTML file that references Vue source files in the header
You can take a look at the Vue documentation for further information.
<body> <div id= "Play" > <span> input number, click Start, will generate a corresponding input number of the table, from the table in the number 1 start click, click to the end of the 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 class= "IButton" @click = ' time (item) ' >{{item}}</button></div> </div> </div> </body>5.vue operation
1 first to create a Vue instance, El Binding your DOM, here with ID as identification
2 Data This is the Vue to manipulate, the value of the NUM text box (default is 2), list[] According to the text box value, generated List,starttime Click the start time of the table, Endtime Click the end time of the table, checknum the currently selected number.
3 methods Two methods are used to arr the value of the text box. Generates an array that generates the square length of a text box value, and does not duplicate an array whose value is 1-the square of the text box value, and the value of the added text box is 3, the resulting array has a length of 9 and the contents of the array is 1-9 and does not repeat.
Time calculates the start and end times of a click, with 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 >) {alert (' The value is too large, the browser will die, preferably not 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 from 0 to 1 num = Mat H.ceil (num * arrlength); num* the range of values in 0~?, using the up and down to get a 1~? Random if (Arr[0]!= 0) {var flag = false;//control for duplicate elements//traversal of 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 {//found duplicate elements re-generating 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 (' Uses ' +usetime+ ' seconds '); This.checknum = 0; Return } this.checknum = Item; }}) </script>6.CSS Code
<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. Using Vue to perform a function in certain scenarios is much simpler than jquery, but jquery is still powerful, using different techniques for different scenarios, faster and better to perform the functions you want.
This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
