Verwenden Sie VUE, um ein Timing-Spiel für ein Mini-Klick-Zahlen zu schreiben, das im Textfeld enthalten ist. Durch das Klicken auf Starts erzeugt eine Tabelle mit 3 Zeilen und 3 Spalten. Die Tabellendaten werden zufällig von 1 bis 9 angeordnet. Klicken Sie zu diesem Zeitpunkt von 1 und klicken Sie in der Reihenfolge auf 9. Wenn Sie in der richtigen Reihenfolge klicken, wird die verwendete Zeit aufgefordert. Wenn die Bestellung nicht korrekt ist, wird das Spiel aufgefordert.
1. Laden Sie zuerst den Vue -Quellcode herunter und laden Sie die Adresse http://cn.vuejs.org herunter
2.JQuery ist auf DOM -Operationen ausgerichtet, während VUE auf Datenoperationen ausgerichtet ist. Versuchen Sie, die Einzigartigkeit von VUE zu zeigen (es ist möglicherweise einfacher zu verstehen, ob Sie AngularJs verwendet haben).
3. Erstellen Sie eine normale HTML -Datei und verweisen Sie auf die Quelldatei von Vue im Header
<Head> <meta charset = "utf-8"/> <titels> </title> <script type = "text/javaScript" src = "js/vue.js"> </script> </head>
4. Einfache Seite
1) Zunächst ändert sich V-Modell, die Zwei-Wege-Bindung der Daten entsprechend dem in Ihrem Textfeld eingegebenen Wert.
2) @Click bindet ein Klickereignis, wobei @ die Abkürzung von V-on ist. Natürlich kann das Bindungsereignis Parameter wie @click = 'time (item)' annehmen.
3) v-für = "(Index, Element) in der Liste", Loop-Array, Index ist die Winkelmarkierung des Arrays, und Element ist der Wert im Array.
Weitere Informationen finden Sie in der VUE -Dokumentation.
<body> <div id = "play"> <span> Geben Sie die Nummer ein und klicken Sie auf Starten, und eine Tabelle, die der Eingangsnummer entspricht, wird generiert. Starten Sie aus der Nummer 1 in der Tabelle bis zum Ende in der Reihenfolge. links; "> <button @click = 'time (item)'> {{item}} </button> </div> </div> </div> </body>5. Betriebsbetrieb
1) Zunächst müssen Sie eine Instanz von Vue neu und El Binden Sie Ihre DOM ein und verwenden ID als Bezeichner hier
2) Daten sind die Daten, die von Vue betrieben werden sollen, der Wert des NUM -Textfelds (Standard ist 2), Liste [] entsprechend dem Textfeldwert, der generierten Liste, der StartTime -Klick -Tabellen -Startzeit, der Endzeit -Klick -Tabellenendzeit und der aktuell ausgewählten Anzahl von Checknum.
3) In den Methoden arr befinden sich zwei Methoden, die ein Array basierend auf dem Wert des Textfelds erzeugen und ein Array mit quadratischer Länge des Textfeldwerts erzeugen und nicht wiederholt werden. Der Wert des Arrays beträgt 1 Quadratmeter des Textfeldwerts, und der dem Textfeld hinzugefügte Wert beträgt 3, dann beträgt die generierte Arraylänge 9, der Inhalt des Arrays ist 1-9 und wiederholt sich nicht.
Die Zeit berechnet die Startzeit und die Endzeit der Klicks und verwenden Sie die Überprüfung] Num, um die Reihenfolge der Klicks zu steuern.
<Script> neuer VUE ({el: '#play', Daten: {num: 2, list: [], starttime: 0, Endzeit: 0, checknum: 0}, Methoden: {arr: function () {if (this. this. this.num> 20) {alert ('Der Wert ist zu groß, der Browser, der am besten ist. this.num * this.num; eine zufällige Anzahl von 1 ~? } else {// Ich habe ein doppelter Element vorhanden und eine neue zufällige Nummer i--; 1) {this.startTime = Datum.getTime (); }}}) </script>6.CSS -Code
<Styles> .Ibutton {Margin-Top: 10px; Rand-Links: 10px; Farbe: #ffff; Grenze: 1PX Solid #8A6DE9; Hintergrundfarbe: #8A6DE9; Schriftgröße: 14px; Polsterung: 6px 12px; Border-Radius: 7px; Breite: 50px; Höhe: 40px; } </style>7. Die Verwendung von Vue, um eine Funktion in bestimmten Szenarien auszufüllen, ist viel einfacher als JQuery, aber JQuery ist immer noch sehr leistungsfähig. Verwenden Sie verschiedene Technologien, um die Funktionen zu vervollständigen, die Sie nach verschiedenen Szenarien schneller und besser möchten.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.