So verwenden Sie VUE im Frontend
Ich verwende VUE schon seit einiger Zeit für Projekte, habe aber noch nie einen Einführungsartikel über VUE geschrieben. Deshalb werde ich Ihnen heute ein paar Beispiele vorstellen, um VUE gut vorzustellen Werkzeug.
Verwandte Video-Tutorial-Empfehlungen: Vue.js-Tutorial-Empfehlungen: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2018
1 Die in diesem Artikel verwendete Vue-Version ist 2.4.2 und kann sich von der neuen Version unterscheiden. Daher sollte jeder darauf achten.
2. Ich gehe außerdem davon aus, dass Sie über Grundkenntnisse in HTML, CSS und Javascript verfügen. Sie haben auch die grundlegende Einführung auf der offiziellen Website gelesen und verfügen über ein allgemeines Verständnis von Vue. Erfahren Sie mehr über die häufig verwendeten Vue-Anweisungen (v-model, v-show, v-if, v-for, v-on, v-bind usw.)! Wenn Sie neu im Front-End sind, werden Sie beim Lesen des Artikels möglicherweise verwirrt sein. Es wird empfohlen, zuerst die Grundlagen zu lernen und ihn dann zu lesen, nachdem Sie die Grundkenntnisse beherrscht haben!
3. Für das folgende Beispiel schlage ich vor, dass Sie es tun, während Sie den Artikel lesen! Auf diese Weise wird Ihr Denken sehr klar und weniger verwirrend! Sie werden nicht das Gefühl haben, dass der Artikel zu lang ist (der Artikel ist lang, damit jeder mehr Informationen lesen kann, und es werden viele wiederholte Codes veröffentlicht. Diese Codes, HTML, CSS usw. können vollständig übersprungen werden.) . Wenn Sie den Artikel nur lesen, können Sie ihn möglicherweise nicht zu Ende lesen, da der Artikel ausführlicher und länger ist!
4. Diese Beispiele stammen aus meinen eigenen täglichen Übungsprojekten und der Code wurde auf Github (vue-demos) erwähnt. Begrüßen Sie alle zum Star. !
2. Was ist Vue?
Vue ist ein sehr beliebtes Front-End-Framework, das auf der Idee der Datensteuerung und Komponentisierung basiert als die drei wichtigsten Front-End-Frameworks zusammen mit Angular und React. Im Vergleich zu Angular und React ist Vue leichter, leistungsfähiger und benutzerfreundlicher. Sie können auch weitermachen und einen Blick auf die Einführung von Vue und die Einführung der Kernfunktionen auf der offiziellen Website werfen. Das einfache und grobe Verständnis lautet: Wenn Sie mit Vue entwickeln, verarbeiten Sie einfach die Daten, und dann verarbeitet Vue sie und verwendet die Daten, um die Änderung des DOM voranzutreiben (ich weiß nicht, ob ich das falsch verstehe, bitte geben Sie mir Bescheid.) ein paar Ratschläge, falls Sie dies tun).
Das Folgende ist das einfachste Beispiel für eine Erklärung
Der Code lautet wie folgt
html
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
js
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})Ich glaube, es ist nicht schwer zu verstehen, das heißt, die Eingabe ist gebunden zum Nachrichtenwert hinzufügen und dann in der Eingabe ändern. Aufgrund der bidirektionalen Bindung wurde gleichzeitig der HTML-Code ({{ message }}) der Seite geändert!
Okay, lasst uns aus Beispielen lernen!
3. Registerkarte
Prinzipielle Analyse und Implementierung
Das ist sehr einfach, es ist nichts weiter als ein Klick, um die Anzeige zu wechseln. Aber jeder muss es auch erkennen. Wenn Sie das verstehen, schauen Sie sich die nächsten beiden an! Dieses Beispiel soll nur ein Aufwärm- und Kennenlerneffekt sein!
Dieser Schritt besteht nur aus einem Schritt und das Prinzip ist dasselbe. Ich kommentiere direkt im Code. Nachdem ich die Kommentare gelesen habe, wird es jeder verstehen!
Vollständiger Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
font-family:"Microsoft YaHei";
}
#tab{
width: 600px;
margin: 0 auto;
}
.tab-tit{
font-size: 0;
width: 600px;
}
.tab-tit a{
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 16px;
width: 25%;
text-align: center;
background: #ccc;
color: #333;
text-decoration: none;
}
.tab-tit .cur{
background: #09f;
color: #fff;
}
.tab-con div{
border: 1px solid #ccc;
height: 400px;
padding-top: 20px;
}
</style>
<body>
<div id="tab">
<div>
<!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
<a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
<a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
</div>
<div>
<!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
<div v-show="curId===0">
html<br/>
</div>
<div v-show="curId===1">
css
</div>
<div v-show="curId===2">
javascript
</div>
<div v-show="curId===3">
vue
</div>
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#tab',
data: {
curId: 0
},
computed: {},
methods: {},
mounted: function () {
}
})
</script>
</html>Das war's. Ich glaube, dass Sie durch diesen Fall auch ein gewisses Verständnis für Vue haben. Weitere spannende Informationen finden Sie in anderen verwandten Themen zu PHP-Chinesisch Website-Artikel!
Verwandte Lektüre:
Hauptfunktionale Anwendungen von CSS3
So verwenden Sie Übergangsanimationen in CSS3
Das obige ist der detaillierte Inhalt vonSo verwenden Sie VUE im Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark ist ein kleines HDD-Benchmark-Tool für Festplatten, das schnell sequentielle und zufällige Lese-/Schreibgeschwindigkeiten misst. Lassen Sie sich als Nächstes vom Redakteur CrystalDiskMark und die Verwendung von CrystalDiskMark vorstellen ). Zufällige I/O-Leistung. Es ist eine kostenlose Windows-Anwendung und bietet eine benutzerfreundliche Oberfläche und verschiedene Testmodi zur Bewertung verschiedener Aspekte der Festplattenleistung. Sie wird häufig in Hardware-Reviews verwendet
Mar 18, 2024 am 10:58 AM
foobar2000 ist eine Software, die Ihnen jederzeit Musik aller Art mit verlustfreier Klangqualität bietet Spielen Sie das erweiterte Audio auf dem Computer ab, um ein bequemeres und effizienteres Musikwiedergabeerlebnis zu ermöglichen. Das Interface-Design ist einfach, klar und benutzerfreundlich. Es nimmt einen minimalistischen Designstil an, ohne übermäßige Dekoration Es unterstützt außerdem eine Vielzahl von Skins und Themes, personalisiert Einstellungen nach Ihren eigenen Vorlieben und erstellt einen exklusiven Musikplayer, der die Wiedergabe mehrerer Audioformate unterstützt. Außerdem unterstützt es die Audio-Gain-Funktion zum Anpassen der Lautstärke Passen Sie die Lautstärke entsprechend Ihrem Hörzustand an, um Hörschäden durch zu hohe Lautstärke zu vermeiden. Als nächstes lass mich dir helfen
So verwenden Sie NetEase Mailbox Master
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox ist eine von chinesischen Internetnutzern weit verbreitete E-Mail-Adresse und hat mit seinen stabilen und effizienten Diensten schon immer das Vertrauen der Benutzer gewonnen. NetEase Mailbox Master ist eine E-Mail-Software, die speziell für Mobiltelefonbenutzer entwickelt wurde. Sie vereinfacht das Senden und Empfangen von E-Mails erheblich und macht unsere E-Mail-Verarbeitung komfortabler. Wie Sie NetEase Mailbox Master verwenden und welche spezifischen Funktionen es bietet, wird Ihnen der Herausgeber dieser Website im Folgenden ausführlich vorstellen und hofft, Ihnen weiterzuhelfen! Zunächst können Sie die NetEase Mailbox Master-App im Mobile App Store suchen und herunterladen. Suchen Sie im App Store oder im Baidu Mobile Assistant nach „NetEase Mailbox Master“ und befolgen Sie dann die Anweisungen zur Installation. Nachdem der Download und die Installation abgeschlossen sind, öffnen wir das NetEase-E-Mail-Konto und melden uns an. Die Anmeldeschnittstelle ist wie unten dargestellt
So verwenden Sie die Baidu Netdisk-App
Mar 27, 2024 pm 06:46 PM
Cloud-Speicher sind heutzutage aus unserem täglichen Leben und Arbeiten nicht mehr wegzudenken. Als einer der führenden Cloud-Speicherdienste in China hat Baidu Netdisk mit seinen leistungsstarken Speicherfunktionen, der effizienten Übertragungsgeschwindigkeit und dem komfortablen Bedienerlebnis die Gunst einer großen Anzahl von Benutzern gewonnen. Und egal, ob Sie wichtige Dateien sichern, Informationen teilen, Videos online ansehen oder Musik hören möchten, Baidu Cloud Disk kann Ihre Anforderungen erfüllen. Viele Benutzer verstehen jedoch möglicherweise nicht die spezifische Verwendung der Baidu Netdisk-App. Dieses Tutorial führt Sie daher im Detail in die Verwendung der Baidu Netdisk-App ein. Wenn Sie immer noch verwirrt sind, folgen Sie bitte diesem Artikel, um mehr im Detail zu erfahren. So verwenden Sie Baidu Cloud Network Disk: 1. Installation Wählen Sie beim Herunterladen und Installieren der Baidu Cloud-Software zunächst die benutzerdefinierte Installationsoption aus.
BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden?
Apr 26, 2024 am 09:40 AM
MetaMask (auf Chinesisch auch Little Fox Wallet genannt) ist eine kostenlose und beliebte Verschlüsselungs-Wallet-Software. Derzeit unterstützt BTCC die Bindung an die MetaMask-Wallet. Nach der Bindung können Sie sich mit der MetaMask-Wallet schnell anmelden, Werte speichern, Münzen kaufen usw. und bei der erstmaligen Bindung einen Testbonus von 20 USDT erhalten. Im BTCCMetaMask-Wallet-Tutorial stellen wir detailliert vor, wie man MetaMask registriert und verwendet und wie man das Little Fox-Wallet in BTCC bindet und verwendet. Was ist die MetaMask-Wallet? Mit über 30 Millionen Nutzern ist MetaMask Little Fox Wallet heute eines der beliebtesten Kryptowährungs-Wallets. Die Nutzung ist kostenlos und kann als Erweiterung im Netzwerk installiert werden
Erfahren Sie, wie Sie die neuen erweiterten Funktionen von iOS 17.4 „Schutz vor gestohlenen Geräten' nutzen.
Mar 10, 2024 pm 04:34 PM
Apple hat am Dienstag das iOS 17.4-Update veröffentlicht, das eine Reihe neuer Funktionen und Korrekturen für iPhones bringt. Das Update enthält neue Emojis und EU-Nutzer können diese auch aus anderen App-Stores herunterladen. Darüber hinaus stärkt das Update auch die Kontrolle der iPhone-Sicherheit und führt weitere Einstellungsoptionen für den „Schutz gestohlener Geräte“ ein, um Benutzern mehr Auswahl und Schutz zu bieten. „iOS17.3 führt zum ersten Mal die Funktion „Schutz vor gestohlenen Geräten“ ein, die den vertraulichen Informationen der Benutzer zusätzliche Sicherheit verleiht. Wenn der Benutzer nicht zu Hause oder an anderen vertrauten Orten ist, erfordert diese Funktion, dass der Benutzer zum ersten Mal biometrische Informationen eingibt Zeit und nach einer Stunde müssen Sie Informationen erneut eingeben, um auf bestimmte Daten zuzugreifen und diese zu ändern, z. B. um Ihr Apple-ID-Passwort zu ändern oder den Schutz vor gestohlenen Geräten zu deaktivieren.
So verwenden Sie die Xiaomi Auto-App
Apr 01, 2024 pm 09:19 PM
Die Xiaomi-Autosoftware bietet Funktionen zur Fernsteuerung des Fahrzeugs, mit denen Benutzer das Fahrzeug über Mobiltelefone oder Computer fernsteuern können, z. B. das Öffnen und Schließen der Türen und Fenster des Fahrzeugs, das Starten des Motors, die Steuerung der Klimaanlage und des Audios des Fahrzeugs usw. Folgendes ist Lassen Sie uns gemeinsam mehr über die Verwendung und den Inhalt dieser Software erfahren. Umfassende Liste der Funktionen und Nutzungsmethoden der Xiaomi Auto-App. 1. Die Xiaomi Auto-App wurde am 25. März im Apple AppStore gestartet und kann jetzt im App Store auf Android-Telefonen heruntergeladen werden: Erfahren Sie mehr über die wichtigsten Highlights und technischen Parameter von Xiaomi Auto und vereinbaren Sie einen Termin für eine Probefahrt. Konfigurieren und bestellen Sie Ihr Xiaomi-Auto und unterstützen Sie die Online-Abwicklung von Aufgaben zur Autoabholung. 3. Community: Informationen zur Marke Xiaomi Auto verstehen, Autoerfahrungen austauschen und das wundervolle Autoleben teilen: Das Mobiltelefon ist die Fernbedienung, Fernbedienung, Echtzeitsicherheit, einfach
PHP und Vue: eine perfekte Kombination von Front-End-Entwicklungstools
Mar 16, 2024 pm 12:09 PM
PHP und Vue: eine perfekte Kombination von Front-End-Entwicklungstools In der heutigen Zeit der rasanten Entwicklung des Internets ist die Front-End-Entwicklung immer wichtiger geworden. Da Benutzer immer höhere Anforderungen an das Erlebnis von Websites und Anwendungen stellen, müssen Frontend-Entwickler effizientere und flexiblere Tools verwenden, um reaktionsfähige und interaktive Schnittstellen zu erstellen. Als zwei wichtige Technologien im Bereich der Front-End-Entwicklung können PHP und Vue.js in Kombination als perfekte Waffe bezeichnet werden. In diesem Artikel geht es um die Kombination von PHP und Vue sowie um detaillierte Codebeispiele, die den Lesern helfen sollen, diese beiden besser zu verstehen und anzuwenden
