Gunakan Vue untuk menulis game timing nomor klik mini, yang termasuk dalam kotak teks. Mulai mengklik akan menghasilkan tabel dengan 3 baris dan 3 kolom. Data tabel diatur secara acak dari 1 hingga 9. Saat ini, klik dari 1 dan klik ke 9 secara berurutan. Saat mengklik urutan yang benar, waktu yang digunakan akan diminta. Jika pesanan tidak benar, game akan diminta.
1. Pertama unduh kode sumber vue, unduh alamat http://cn.vuejs.org
2.JQuery berorientasi pada operasi DOM, sedangkan Vue berorientasi pada operasi data, jadi sebaiknya tidak mengoperasikan DOM saat menggunakan VUE, cobalah untuk menunjukkan keunikan VUE (mungkin lebih mudah untuk dipahami jika Anda menggunakan AngularJS)
3. Buat file HTML normal dan referensi file sumber VUE di header
<Head> <meta charset = "utf-8"/> <iteme> </iteme> <script type = "text/javaScript" src = "js/vue.js"> </script> </head>
4. Halaman sederhana
1) Pertama-tama, V-model, pengikatan dua arah data akan berubah sesuai dengan nilai yang dimasukkan dalam kotak teks Anda.
2) @Click mengikat acara klik, di mana @ adalah singkatan dari V-on. Tentu saja, acara yang mengikat dapat mengambil parameter seperti @click = 'time (item)'.
3) v-for = "(indeks, item) dalam daftar", loop array, indeks adalah tanda sudut array, dan item adalah nilai dalam array.
Anda dapat memeriksa dokumentasi VUE untuk informasi lebih lanjut.
<body> <v id = "play"> <span> Masukkan nomor dan klik untuk memulai, dan tabel yang sesuai dengan nomor input akan dihasilkan. Mulai dari angka 1 dalam tabel, klik ke akhir agar .... </span> <br /> <input type = "number" v-Model = "num" /> <tombol @click = 'arr'> Mulai </button> <bR /> <div v-for = "(indeks, item) di daftar"> <template v-if = "index % num == 0 & & index! style = "float: left;"> <button @click = 'time (item)'> {{item}} </button> </div> </div> </div> </body>5. Operasi
1) Pertama, Anda perlu menjadi instance baru dari Vue, dan El mengikat DOM Anda, dan gunakan ID sebagai pengidentifikasi di sini
2) Data adalah data yang akan dioperasikan oleh VUE, nilai kotak teks NUM (default adalah 2), daftar [] sesuai dengan nilai kotak teks, daftar yang dihasilkan, waktu start -tabel klik start, waktu akhir klik tabel akhir, dan jumlah checknum yang saat ini dipilih.
3) Ada dua metode dalam metode ARR yang menghasilkan array berdasarkan nilai kotak teks, dan menghasilkan array dengan panjang persegi nilai kotak teks dan tidak akan diulang. Nilai array adalah 1-square dari nilai kotak teks, dan nilai yang ditambahkan ke kotak teks adalah 3, maka panjang array yang dihasilkan adalah 9, konten array adalah 1-9 dan tidak mengulangi.
Waktu menghitung waktu mulai dan akhir waktu klik, dan gunakan periksa] num untuk mengontrol urutan klik.
<skrip> vue baru ({el: '#play', data: {num: 2, list: [], starttime: 0, endtime: 0, checknum: 0}, Metode: {arr: function () {if (this.num> 20) {waspada ('nilainya terlalu besar, browser akan mati, lebih baik tidak lebih besar dari 20') this.num * this.num; Dapatkan nomor acak 1 ~? {// saya menemukan bahwa ada elemen duplikat dan membuat nomor acak baru i-- ini. }}) </script>6.CSS Code
<tyle> .Ibutton {margin-top: 10px; margin-kiri: 10px; Warna: #FFFF; Perbatasan: 1px solid #8a6de9; latar belakang-warna: #8a6de9; Ukuran font: 14px; padding: 6px 12px; Border-Radius: 7px; Lebar: 50px; Tinggi: 40px; } </style>7. Menggunakan VUE untuk menyelesaikan fungsi dalam skenario spesifik tertentu jauh lebih sederhana daripada jQuery, tetapi jQuery masih sangat kuat. Gunakan teknologi yang berbeda untuk menyelesaikan fungsi yang Anda inginkan lebih cepat dan lebih baik sesuai dengan skenario yang berbeda.
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.