Utilisez Vue pour écrire un jeu de synchronisation de mini-clics, qui est inclus dans la zone de texte. Cliquez sur les démarrages générera une table avec 3 lignes et 3 colonnes. Les données du tableau sont organisées au hasard de 1 à 9. À l'heure actuelle, cliquez sur 1 et cliquez à 9 dans l'ordre. Lorsque vous cliquez dans le bon ordre, le temps utilisé sera invité. Si la commande n'est pas correcte, le jeu sera invité.
1. Téléchargez d'abord le code source Vue, téléchargez l'adresse http://cn.vuejs.org
2.JQUERY est orienté vers les opérations DOM, tandis que Vue est orientée vers les opérations de données, il est donc préférable de ne pas fonctionner DOM lors de l'utilisation de Vue, essayez de montrer l'unicité de Vue (il peut être plus facile de comprendre si vous avez utilisé AngularJS)
3. Créez un fichier HTML normal et référencez le fichier source de Vue dans l'en-tête
<A-Head> <Meta Charset = "UTF-8" /> <Title> </ Title> <Script Type = "Text / Javascrip
4. Page simple
1) Tout d'abord, le modèle V, la liaison bidirectionnelle des données changera en fonction de la valeur saisie dans votre zone de texte.
2) @Click lie un événement de clic, où @ est l'abréviation de V-on. Bien sûr, l'événement de liaison peut prendre des paramètres tels que @ click = 'time (item)'.
3) V-for = "(index, élément) dans la liste", tableau de boucle, l'index est la marque d'angle du tableau et l'élément est la valeur dans le tableau.
Vous pouvez consulter la documentation VUE pour plus d'informations.
<body> <div id = "play"> <span> Entrez le numéro et cliquez pour démarrer, et un tableau correspondant au numéro d'entrée sera généré. 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: gauche; "> <bouton @ click = 'time (item)'> {{item}} </ bouton> </div> </div> </div> </ body>5. Fonctionnement
1) Tout d'abord, vous devez nouveau à une instance de Vue, et El lient votre DOM, et utilisez l'ID comme identifiant ici
2) Les données sont les données à exploiter par Vue, la valeur de la zone de texte NUM (par défaut est 2), la liste [] Selon la valeur de la zone de texte, la liste générée, l'heure de début de la table de clic de démarrage, la table de clic de fin de temps et le nombre actuellement sélectionné de CheckNum.
3) Il existe deux méthodes dans les méthodes ARR qui génèrent un tableau basé sur la valeur de la zone de texte, et génère un tableau avec une longueur carrée de la valeur de zone de texte et ne sera pas répété. La valeur du tableau est à 1 carré de la valeur de la zone de texte, et la valeur ajoutée à la zone de texte est 3, puis la longueur du tableau générée est 9, le contenu du tableau est 1-9 et ne se répète pas.
Le temps calcule l'heure de début et l'heure de fin des clics, et utilisez le chèque] num pour contrôler l'ordre des clics.
<script> new Vue ({el: '#play', data: {num: 2, list: [], starttime: 0, fin: 0, checkNum: 0}, méthodes: {arr: function () {if (this.num> 20) {alert ('la valeur est trop grande, le navigateur mourra, il est préférable de ne pas être plus grand que 20'); Ceci.NUM * Obtenir un nombre aléatoire de 1 ~? {// J'ai constaté qu'il y a un élément en double et révèle un nouveau numéro aléatoire i--; this.starttime = date.gettime ();} if (item == this.num * }) </script>Code 6.css
<style> .Ibtton {margin-top: 10px; marge-gauche: 10px; Couleur: #ffff; Border: 1px solide # 8A6DE9; Color d'arrière-plan: # 8A6DE9; taille de police: 14px; rembourrage: 6px 12px; Border-Radius: 7px; Largeur: 50px; hauteur: 40px; } </ style>7. Utiliser Vue pour remplir une fonction dans certains scénarios spécifiques est beaucoup plus simple que jQuery, mais jQuery est toujours très puissant. Utilisez différentes technologies pour remplir les fonctions que vous souhaitez plus rapidement et meilleures en fonction de différents scénarios.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.