Beispiel für die Implementierung einer To-Do-Anwendung mit Vue
HintergrundZunächst möchte ich sagen, dass ich kein Experte für Frontend-Entwicklung bin. Wenn Sie meine vorherigen Inhalte gelesen haben, wissen Sie, dass ich gut in der Backend-Entwicklung bin. Obwohl ich einige Erfahrung in der Frontend-Entwicklung habe, kann ich nicht sagen, dass ich darin kompetent bin, und ich bin kaum damit vertraut. Der Zweck dieser Serie ist einfach Neugier. Ich bin neugierig, warum die Front-End-Situation, die vor einigen Jahren von JQuery dominiert wurde, jetzt so chaotisch ist. Ich bin neugierig, wie mit js so schlecht gespielt wurde, dass nicht einmal seine Mutter es wiedererkennt. Der Grund, warum ich Vue als Einstiegspunkt gewählt habe, ist ganz und gar, dass Vue einfach ist und Sie im Grunde durch Anschauen der Demo loslegen können. Da Vue eines der drei beliebten Front-End-Frameworks ist, werden Sie ein wenig Verständnis für das Front-End haben, solange Sie verstehen, wie Vue implementiert wird. Angetrieben von dieser Idee wurde diese Serie erstellt. Vue zu imitieren bedeutet hier nicht, dass ich den Quellcode von Vue gelesen, verstanden und dann Vue imitiert habe, um ihn zu schreiben. Die Syntax ist immer noch die Syntax von Vue, aber ich werde einen Weg finden, sie selbst zu implementieren. Natürlich kann ich auf Vue verweisen, aber es ist für mich mit meinem Front-End-Niveau etwas schwierig, Vue vollständig zu verstehen. Wenn Sie also die Implementierung des Vue-Quellcodes verstehen möchten, ist diese Reihe nicht für Sie geeignet. Aber wenn Sie wie ich sind, ein wenig JS kennen und keine Ahnung haben, wo Sie mit dem Vue-Quellcode anfangen sollen, aber wissen möchten, wie Sie dieselbe Funktion wie Vue implementieren, dann folgen Sie mir, wir werden uns nicht den Quellcode ansehen, sondern herausfinden, wie wir selbst ein einfaches Vue implementieren können. Vue Todo-AnwendungDie Idee dieser Reihe besteht darin, mit Vue eine einfache Anwendung zu implementieren, Vue-bezogene Kernfunktionen in der Anwendung zu verwenden und dann den Code unverändert zu lassen, die Datei vue.js durch unsere eigene Implementierung zu ersetzen und schließlich den gleichen Effekt wie Vue zu erzielen. Hier verwenden wir vue, um eine super einfache To-Do-Anwendung zu implementieren. Der Code lautet wie folgt:
<html>
<Kopf>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</Kopf>
<Text>
<div id="app">
<input v-model="newTodo"></input>
<button v-on:click="addTodo()">Hinzufügen</button>
<div>Eingabetext:{{newTodo}}</div>
<ul>
<div v-for="(todo,index) in todos" style="margin-bottom: 20px;">
<li style="float: links;Rand rechts: 20px;">
{{todo.text}}
</li>
<button v-on:click="deleteTodo(index)">Löschen</button>
</div>
</ul>
</div>
<Skript>
var appx = neuer Vue({
el: '#app',
Daten: {
neuTodo: '',
alle: []
},
Methoden: {
addTodo: Funktion () {
dies.todos.push({ text: this.newTodo });
dies.newTodo = '';
},
deleteTodo: Funktion (Index) {
dies.todos.splice(index, 1);
}
}
})
</Skript>
</body>
</html>Die Wirkung ist wie folgt:
Obwohl die Demo einfach ist, enthält sie alle Kernfunktionen von Vue.
In den folgenden Kapiteln werden wir die Datei vue.js nicht vorstellen und dieselben Funktionen Schritt für Schritt implementieren. Oben sind die Details des Beispiels der Vue-Implementierung der To-Do-Anwendung. Weitere Informationen zur Vue-Implementierung der To-Do-Anwendung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Zusammenfassung von fünf Befehlen zum Überprüfen des Swap-Speichers in Linux
>>: Lösung zur Installation von OpenCV 3.2.0 in Ubuntu 18.04
Artikel empfehlen
Analyse der Unterschiede zwischen Mysql InnoDB und MyISAM
MySQL unterstützt viele Arten von Tabellen (d. h....
JavaScript implementiert einfache Datumseffekte
Der spezifische Code der JavaScript-Datumseffekte...
js realisiert das dynamische Laden von Daten durch Wasserfallfluss
In diesem Artikel erfahren Sie den spezifischen C...
Was sind die Unterschiede zwischen CDN, SCDN und DCDN zur Website-Beschleunigung? Wie man wählt?
1. CDN Es ist die am häufigsten verwendete Beschl...
Tutorial zur HTML-Tabellenauszeichnung (29): Farbattribut für helle Zellenränder BORDERCOLORLIGHT
Bei Zellen können die hellen Rahmenfarben individ...
So verwenden Sie Selenium + Testng, um Webautomatisierung in Docker zu realisieren
Vorwort Nachdem ich lange Zeit verschiedene Mater...
Beispiele für vertikale Raster und progressiven Zeilenabstand
Neue Fragen Kommen und gehen Sie in Eile. Seit de...
CocosCreator implementiert Skill-Kühleffekt
CocosCreator realisiert Skill-CD-Effekt In vielen...
Detaillierte Erklärung zur Verwendung von $emit in Vue.js
1. Übergeordnete Komponenten können Props verwend...
Vue3.0 verwendet das Plug-In vue-grid-layout, um Drag-Layout zu implementieren
Inhaltsverzeichnis 1. Plugins 2. Zwischenspiel 3....
Verwenden Sie den Befehl ip netns in Linux, um den Netzwerkport zu isolieren und die IP-Adresse zu konfigurieren
1. Fügen Sie den Isolationsmarker hinzu: ip netns...
Detaillierte Erklärung der Hook-Funktion und -Nutzung im Lebenszyklus der neuen Version von React
Im Vergleich zum alten Lebenszyklus Drei Hooks we...
Die Vollversion des gängigen Linux-Tools vi/vim
Warum Vim lernen? Linux verfügt über eine große A...
Detaillierte Erklärung des Rewrite-Moduls von Nginx
Das Umschreibmodul ist das Modul ngx_http_rewrite...
Einführung in den Prozess zum Erstellen eigener FTP- und SFTP-Server
FTP und SFTP werden häufig als Dateiübertragungsp...