Möchten Sie Vue.js von Grund auf lernen? SitePoint Premium bietet eine vollständige Sammlung von Vue -Büchern, die die Grundlagen, Projekte, Tipps und Werkzeuge und vieles mehr abdecken. Machen Sie jetzt nur 14,99 USD pro Monat.
Dieser Artikel wurde aktualisiert und hauptsächlich im Abschnitt Tool aktualisiert.
Seit der Veröffentlichung der beliebten JavaScript -Framework Vue.js -Version von V2 kann ich es kaum erwarten, es auszuprobieren und zu sehen, wie es sich anfühlt. Als jemand, der mit Angular und React sehr vertraut ist, freue ich mich darauf, die Ähnlichkeiten und Unterschiede zwischen ihnen und zwischen Vue zu sehen.
Vue 2 verfügt über hervorragende Leistungsmetriken, relativ kleine Ladungen (die gebündelte Vue-Laufzeitversion wiegt etwa 30 KB nach dem Schrumpfen und der GZIP-Komprimierung) und die staatliche Verwaltung von unterstützenden Bibliotheken wie Vue-Router und Vuex, Vue Library) Update. Es ist zu viel, alles in nur einem Artikel abzudecken, aber bitte achten Sie auf die Follow-up-Artikel und wir werden uns die verschiedenen Bibliotheken ansehen, die perfekt in den Kernrahmen integriert sind.
Wenn Sie dieses Tutorial lernen, werden Sie sehen, dass Vue viele Funktionen enthält, die offensichtlich von anderen Frameworks inspiriert sind. Dies ist eine gute Sache; Insbesondere werden Sie sehen, dass die Vorlagen von Vue sehr nahe an den Vorlagen von Angular sind, aber ihre Komponenten- und Komponenten -Lebenszyklus -Ansätze sind näher an Reacts (und Angular's).
Ein solches Beispiel ist, dass Vue wie React und fast alle Frameworks im heutigen JavaScript -Bereich das Konzept des virtuellen DOM verwendet, um die Renderneffizienz aufrechtzuerhalten. Vue verwendet einen Zweig von Snabbdom, einer der beliebtesten virtuellen DOM -Bibliotheken. Die VUE -Website enthält eine Dokumentation über die virtuelle Dom -Rendering, aber als Benutzer müssen Sie nur wissen, dass Vue sehr gut darin ist, die Geschwindigkeit beizubehalten (in vielen Fällen ist sie besser als React), was bedeutet, dass Sie sich sicher abhalten können dass Sie eine zuverlässige Plattform erstellt werden.
Wie auch andere Frameworks heute sind die Kernbausteine von Vue Komponenten. Ihre Anwendung sollte eine Reihe von Komponenten sein, die miteinander erstellt wurden, um die endgültige Anwendung zu generieren. Vue.js geht noch einen Schritt weiter und schlägt vor (wenn auch nicht obligatorisch), dass Sie Komponenten in einer .vue -Datei definieren, und dann kann das Build -Tool (das wir in kurzer Zeit abdecken) diese Dateien analysieren. Angesichts der Tatsache, dass der Zweck dieses Artikels darin besteht, Vue und seine Verwendung vollständig zu untersuchen, werde ich diese Konvention für diese Anwendung verwenden.
vue -Datei lautet wie folgt:
<template> <p>This is my HTML for my component</p> </template> <🎜> <style scoped> /* CSS here * by including `scoped`, we ensure that all CSS * is scoped to this component! */ </style>
oder, wenn Sie nicht alle Teile der Komponente in eine einzelne Datei einfügen möchten, können Sie jedem Element ein SRC -Attribut bereitstellen und auf eine separate HTML-, JS- oder CSS -Datei verweisen.
Während die exzellente Vue CLI es einfach macht, ein vollständiges Projekt einzurichten, fange ich gerne bei der neuen Bibliothek von vorne an, damit ich mehr über diese Tools erfahren kann.
Jetzt ist WebPack mein bevorzugter Build-Tool, das wir in Verbindung mit dem Vue-Loader-Plugin verwenden können, um das zuvor erwähnte Vue.js-Komponentenformat zu unterstützen. Wir brauchen auch Babel- und Env-Voreinstellungen, damit wir den gesamten Code mit der modernen JavaScript-Syntax sowie Webpack-Dev-Server schreiben können, die den Browser aktualisiert, wenn Dateiänderungen erkannt werden.
Lassen Sie uns ein Projekt initialisieren und die Abhängigkeiten installieren:
mkdir vue2-demo-project cd vue2-demo-project npm init -y npm i vue npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
Erstellen Sie dann den anfänglichen Ordner und die Datei:
mkdir src touch webpack.config.js src/index.html src/index.js
Die Projektstruktur sollte wie folgt sein:
<code>. ├── package.json ├── package-lock.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js</code>
Lassen Sie uns jetzt die Webpack -Konfiguration einrichten. Dies läuft auf die folgenden Punkte hinaus:
//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebPackPlugin({
template: "./src/index.html"
})
]
}Schließlich werden wir der HTML -Datei einige Inhalte hinzufügen und können starten!
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Wir haben eine leere DIV mit ID der App erstellt, da dies das Element ist, das wir die VUE -App platzieren werden. Ich bevorzuge es immer, Divs anstelle von Körperelementen zu verwenden, da ich die Kontrolle über den Rest der Seite gibt.
Wir werden jedem früheren Programmier -Tutorial treu bleiben, eine Vue -Anwendung schreiben und "Hallo, Welt!"
Jede Vue -Anwendung wird durch Importieren der Bibliothek und dann eine neue VUE -Instanz erstellt: <script> export default { // all code for my component goes here } </script>
<template> <p>This is my HTML for my component</p> </template> <🎜> <style scoped> /* CSS here * by including `scoped`, we ensure that all CSS * is scoped to this component! */ </style>
Wir geben Vue ein Element zur Verfügung, um die Seite zu rendern, also erstellen wir eine Vue -Anwendung! Wir geben einen Selektor über, um das Element auszuwählen, das Vue durch unsere Anwendung ersetzen soll. Dies bedeutet, dass bei Vue die von uns erstellte Div#-App -App erstellt und durch unsere Anwendung ersetzt wird.
Der Grund, warum wir den Variablennamen verwenden, ist, dass es das "Ansichtsmodell" darstellt. Obwohl VUE nicht mit dem Modell der Modellansichtsmodellmodell (MVVM) verbunden ist, ist es teilweise von ihm inspiriert, und die Konvention, um den variablen Namen VM zu verwenden, um VUE -Anwendungen darzustellen, wurde bis heute verwendet. Natürlich können Sie Variablen so nennen, wie Sie möchten!
Bisher macht unsere App nichts, also erstellen wir unsere erste Komponente, App.vue, die tatsächlich etwas auf der Seite rendert.
Vue gibt die Struktur der Anwendung nicht an, daher liegt sie an Ihnen. Am Ende habe ich für jede Komponente einen Ordner erstellt, in diesem Fall App (ich mag Großbuchstaben, was eine Komponente bedeutet), die drei Dateien enthält:
mkdir vue2-demo-project cd vue2-demo-project npm init -y npm i vue npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
Die Dateistruktur sollte jetzt so aussehen:
mkdir src touch webpack.config.js src/index.html src/index.js
app/index.vue definiert die Vorlage und importiert andere Dateien. Dies passt zur Struktur, die im Abschnitt "Über die Trennung von Bedenken" der VUE -Dokumentation empfohlen wurde.
<code>. ├── package.json ├── package-lock.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js</code>
Ich mag es, es index.vue zu nennen, aber vielleicht möchten Sie es auch App.vue für eine einfachere Suche nennen. Ich ziehe es vor, App/Index zu importieren.
derzeit ist unsere Vorlage nur
Hallo, Welt!
, ich lasse die CSS -Datei leer. Die Hauptarbeit erfolgt in script.js, was so aussieht:
//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebPackPlugin({
template: "./src/index.html"
})
]
}Dies erstellt eine Komponente, die wir als App nennen werden, die hauptsächlich zu Debugging -Zwecken dient, die ich später abdecken werde, und definiert dann die Daten, für die die Komponente besitzt und für die verantwortlich ist. Derzeit haben wir keine Daten, sodass wir dies erkennen können, indem wir ein leeres Objekt zurückgeben. Später werden wir ein Beispiel für eine Komponente sehen, die Daten verwendet.
Jetzt können wir zu src/index.js zurückkehren und der VUE -Instanz mitteilen, dass wir unsere App -Komponenten rendern:
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Erstens importieren wir die Komponente und glauben, dass Webpack und Vue-Loader dafür verantwortlich sind, sie zu analysieren. Dann deklarieren wir die Komponente. Dies ist ein wichtiger Schritt: Standardmäßig ist die Vue -Komponente nicht global verfügbar. Jede Komponente muss über eine Liste aller von ihnen verwendeten Komponenten verfügen, und die Tags werden zugeordnet. In diesem Fall registrieren wir unsere Komponente wie folgt:
import Vue from 'vue'
const vm = new Vue({
el: '#app',
})Dies bedeutet, dass wir in unserer Vorlage das App -Element verwenden können, um unsere Komponenten zu verweisen.
Schließlich definieren wir die Renderfunktion. Diese Funktion verwendet einen Helfer (normalerweise als H) aufgerufen, der Elemente erstellen kann. Es ist nicht sehr ähnlich wie bei React.Createelement -Funktion, die von React verwendet wird. In diesem Fall stellen wir sie mit der Zeichenfolge 'App' zur Verfügung, da die von uns rendere Komponente als Tag -App registriert ist.
Die meisten Fälle (und im Rest dieses Tutorials) werden die Renderfunktion für andere Komponenten nicht verwendet, da wir die HTML -Vorlage definieren werden. Wenn Sie jedoch mehr erfahren möchten, lohnt es sich, Vue.js 'Leitfaden zu Renderfunktionen zu lesen.
Nachist der letzte Schritt darin, ein NPM -Skript in package.json zu erstellen:
<template> <p>This is my HTML for my component</p> </template> <🎜> <style scoped> /* CSS here * by including `scoped`, we ensure that all CSS * is scoped to this component! */ </style>
Führen Sie jetzt den NPM Run Start aus. Ihr Standardbrowser sollte unter https://www.php.cn/link/03b0db8c971432a5e8d163897176a7cc sehen: "Hallo, Welt!"
Versuchen Sie, SRC/Index zu bearbeiten, um die Nachricht in etwas anderes zu ändern. Wenn alles gut geht, sollte WebPack-dev-Server die Seite aktualisieren, um Ihre Änderungen widerzuspiegeln.
Großartig! Wir laufen mit Vue.js.
Bevor wir uns in eine etwas komplexere Vue -Anwendung ausgraben, ist es an der Zeit zu erwähnen, dass Sie auf jeden Fall Vue Devtools installieren sollten. Diese befinden sich in Chrome Developer Tools und bieten Ihnen eine großartige Möglichkeit, Ihre Anwendung und alle übergebenen Eigenschaften, den Zustand jeder Komponente und vieles mehr zu sehen.
Als Beispielanwendung werden wir mit der GitHub -API eine Anwendung erstellen, einen Benutzernamen eingeben und einige Github -Statistiken für diesen Benutzer anzeigen. Ich habe die Github -API hier ausgewählt, weil sie den meisten Menschen bekannt ist, ohne Authentifizierung verwendet werden kann und uns viele Informationen bietet.
Bevor ich mit der Anwendung startete, denke ich schnell darüber nach, welche Komponenten wir benötigen. Ich denke Bildschirminformationen auf. Wir werden mit der Eingabe beginnen.
Hinweis: Sie finden den gesamten Code auf GitHub und sogar Anwendungen, die online ausgeführt werden.
Ordner für Githuboutput- und Githubinput -Komponenten im SRC -Verzeichnis erstellen:
mkdir vue2-demo-project cd vue2-demo-project npm init -y npm i vue npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
Fügen Sie jedem Ordner die erforderlichen Dateien hinzu:
mkdir src touch webpack.config.js src/index.html src/index.js
src -Ordners sollte jetzt so aussehen:
<code>. ├── package.json ├── package-lock.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js</code>
Beginnen wir mit der Githubinput -Komponente. Wie App -Komponenten sollte die Index.vue -Datei Vorlagen enthalten sowie Skripts und CSS -Dateien laden. Derzeit enthält die Vorlage nur
GitHub Eingabe
. Wir werden es bald richtig ausfüllen. Ich mag es, ein virtuelles HTML einzulegen, damit ich überprüfen kann, ob meine Vorlage beim Erstellen einer neuen Komponente korrekt angeschlossen ist:
<template> <p>This is my HTML for my component</p> </template> <🎜> <style scoped> /* CSS here * by including `scoped`, we ensure that all CSS * is scoped to this component! */ </style>
Was wir beim Erstellen dieser Komponente unterschiedlich machen, ist das Erstellen von Datenausschnitten, die der Komponente zugeordnet sind. Dies ist sehr ähnlich wie bei Reacts Zustandskonzept:
mkdir vue2-demo-project cd vue2-demo-project npm init -y npm i vue npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
Dies bedeutet, dass diese Komponente über ein Datenstück verfügt, das sie besitzt und für das sie verantwortlich ist, d. H. Benutzername. Wir werden es bald basierend auf den Benutzereingaben aktualisieren.
Um diese Komponente auf den Bildschirm zu setzen, muss ich sie schließlich bei der App -Komponente registrieren, da die App -Komponente sie rendert.
dafür aktualisiere ich SRC/App/script.js und sage es GitHubInput:
mkdir src touch webpack.config.js src/index.html src/index.js
Dann kann ich die Vorlage der App -Komponente aktualisieren:
<code>. ├── package.json ├── package-lock.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js</code>
Eine Einschränkung der VUE -Komponenten (wie in Angular und React) besteht darin, dass jede Komponente einen Wurzelknoten haben muss. Wenn die Komponente also mehrere Elemente rendern muss, ist es wichtig, sie alle in etwas zu wickeln, am meisten, die meisten Eine gemeinsame ist div.
Unsere Githubinput -Komponente muss zwei Dinge tun:
Wir können die erste Version ausfüllen, indem wir ein Formular mit Eingabeelementen erstellen. Wir können die integrierten Richtlinien von VUE verwenden, um die Formularwerte zu verfolgen. Die Vorlage für Githubinput lautet wie folgt:
//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebPackPlugin({
template: "./src/index.html"
})
]
}Sie werden feststellen, dass es zwei wichtige Eigenschaften gibt: V-on und V-Model.
v-on ist, wie wir an DOM-Ereignisse binden und Funktionen in VUE aufrufen. Zum Beispiel
Klicken Sie auf mich!
Wenn ein Absatz geklickt wird, wird die Foo -Methode der Komponente aufgerufen. Wenn Sie mehr über die Event -Handhabung erfahren möchten, empfehle ich die Dokumentation von Vue zum Event -Handling. V-Model erstellt eine Zwei-Wege-Datenbindung zwischen Formulareingabe und Daten. Hinter den Kulissen hört das V-Model tatsächlich nach Änderungsereignisse in Formulareingabe- und Aktualisierungsdaten in VUE-Komponenten zu.
Betrachten Sie unter Berücksichtigung unserer Vorlage oben hier, wie wir V-on und V-Model verwenden, um Daten im Formular zu verarbeiten:
Jetzt können wir zum JavaScript unserer Komponente die Onsubmit -Methode deklarieren. Beachten Sie, dass der Name hier vollständig willkürlich ist - Sie können einen beliebigen Namen nach Belieben auswählen - aber ich halte mich gerne an die Konvention der Verwendung von Funktionen, die gemäß dem Ereignis genannt werden, das das Ereignis auslöst:
<template> <p>This is my HTML for my component</p> </template> <🎜> <style scoped> /* CSS here * by including `scoped`, we ensure that all CSS * is scoped to this component! */ </style>
Wir können die Daten dazu direkt verweisen, sodass dieser. Aussername liefert den neuesten Wert des Textfelds. Wenn es nicht leer ist, möchten wir, dass andere Komponenten wissen, dass sich die Daten geändert haben. Dazu verwenden wir den Nachrichtenbus. Dies sind Objekte, die Komponenten Ereignisse ausstellen und für andere Ereignisse anhören können. Wenn Ihre Bewerbung größer wird, möchten Sie möglicherweise einen strukturierteren Ansatz wie Vuex in Betracht ziehen. Derzeit kann der Nachrichtenbus dies tun.
Die gute Nachricht ist, dass wir eine leere Vue -Instanz als Nachrichtenbus verwenden können. Dazu erstellen wir src/bus.js, was nur eine VUE -Instanz erstellt und es exportiert:
mkdir vue2-demo-project cd vue2-demo-project npm init -y npm i vue npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
In der Githubinput -Komponente können wir das Modul importieren und es verwenden, indem wir Ereignisse ausgeben, wenn sich der Benutzername ändert:
mkdir src touch webpack.config.js src/index.html src/index.js
Auf diese Weise ist unser Formular fertiggestellt und wir können mit den generierten Daten etwas tun.
Die Githuboutput -Komponente hat die gleiche Struktur wie unsere beiden anderen Komponenten. In Githuboutput/script.js importieren wir auch das Busmodul, da wir es müssen, um zu wissen, wann sich der Benutzername ändert. Die Daten, für die diese Komponente verantwortlich ist, ist ein Objekt, das den GitHub -Benutzernamen den Daten, die wir von der Github -API erhalten, abbilden. Dies bedeutet, dass wir nicht jedes Mal eine Anfrage an die API stellen müssen. Wir werden auch den letzten Benutzernamen speichern, den wir erhalten haben, damit wir wissen, welche Daten auf dem Bildschirm angezeigt werden:
<code>. ├── package.json ├── package-lock.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js</code>
Beim Erstellen einer Komponente möchten wir auf ein im Nachrichtenbus emittierter New-Username-Ereignis zuhören. Zum Glück unterstützt Vue viele Lebenszyklushaken, einschließlich des Erstellens. Da wir verantwortungsbewusste Entwickler sind, werden wir auch aufhören, Ereignisse mit dem zerstörten Ereignis zu hören, wenn die Zerstörung der Komponente:
//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebPackPlugin({
template: "./src/index.html"
})
]
}Dann definieren wir die methodische methodie, die aufgerufen wird, und setzen
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Bedingte Rendering
import Vue from 'vue'
const vm = new Vue({
el: '#app',
})vue.js kommt nicht mit einer eigenen HTTP -Bibliothek, und das ist aus gutem Grund. Heute ist die Fetch -API nativ in vielen Browsern enthalten (obwohl zum Zeitpunkt des Schreibens, mit Ausnahme von IE11, Safari oder iOS Safari). Für dieses Tutorial werde ich Polyfill nicht verwenden, aber wenn Sie es benötigen, können Sie die API in Ihrem Browser problemlos mit Polyfill hinzufügen. Wenn Sie die Fetch-API nicht mögen, gibt es viele Bibliotheken von Drittanbietern für HTTP, und eine, die in der Vue-Dokumentation erwähnt wird, ist Axios.
Ich unterstütze Frameworks wie VUE sehr, die keine HTTP -Bibliotheken enthalten. Es reduziert die Bündelgröße des Frameworks und ermöglicht den Entwicklern, die Bibliothek auszuwählen, die am besten zu ihnen passt, und passen Sie die Anfragen nach Bedarf zur Kommunikation mit ihrer API problemlos an. Ich werde in diesem Artikel bei der Fetch -API bleiben, aber Sie können sie gerne durch jede Bibliothek ersetzen, die Ihnen gefällt.
Wenn Sie über die Fetch -API wissen müssen, lesen Sie den Beitrag auf Ludovico Fischer auf SitePoint, wodurch Sie schnell beginnen.
Um HTTP -Anforderungen zu stellen, stellen wir der Komponente eine andere Methode Fetchgithubdata zur Verfügung, die eine Anfrage an die Github -API stellt und die Ergebnisse speichert. Es wird auch zuerst prüfen, ob wir bereits die Daten für diesen Benutzer haben, und wenn nicht, wird keine Anfrage gestellt:
<template> <p>This is my HTML for my component</p> </template> <🎜> <style scoped> /* CSS here * by including `scoped`, we ensure that all CSS * is scoped to this component! */ </style>
Dann müssen wir nur diese Methode auslösen, wenn sich der Benutzername ändert:
mkdir vue2-demo-project cd vue2-demo-project npm init -y npm i vue npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
Eine weitere Sache ist zu beachten, dass Vue, da Vue die von Ihnen verwendeten Daten verfolgt, weiß, wann die Ansicht aktualisiert werden soll. Es gibt einen großartigen reaktiven Leitfaden, der ihn im Detail erläutert, aber im Wesentlichen kann Vue nicht auf magische Weise wissen, wann Sie Eigenschaften von Objekten hinzugefügt oder entfernt haben. Wenn wir also:
tunmkdir src touch webpack.config.js src/index.html src/index.js
vue wird dies nicht erkennen und unsere Ansichten nicht aktualisieren. Stattdessen können wir eine spezielle Vue.Set -Methode verwenden, die Vue ausdrücklich mitteilt, dass wir einen Schlüssel hinzugefügt haben. Der obige Code sieht so aus:
<code>. ├── package.json ├── package-lock.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js</code>
Dieser Code ändert dies. Es benachrichtigt auch Vue über Veränderungen, damit es neu geführt werden kann.
Jetzt sieht unser Code so aus:
//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebPackPlugin({
template: "./src/index.html"
})
]
}Schließlich müssen wir die Githuboutput -Komponente mit der App -Komponente registrieren:
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>und fügen Sie es in die Vorlage ein:
import Vue from 'vue'
const vm = new Vue({
el: '#app',
})Obwohl wir keinen Ansichtscode zum Anzeigen der abgerufenen Daten auf dem Bildschirm geschrieben haben, sollten Sie das Formular mit Ihrem Benutzernamen ausfüllen und dann Vue Devtools überprüfen, um die von GitHub angeforderten Daten anzuzeigen. Dies zeigt, wie praktisch und mächtig diese Devtools sind.
Wir können jetzt die Vorlage aktualisieren, um einige Daten anzuzeigen. Wickeln wir diesen Code in eine andere V-IF-Richtlinie, damit wir die Daten erst nach Abschluss der Anfrage rendern:
mkdir src/App
touch src/App/{index.vue,script.js,style.css}Auf diese Weise können wir jetzt die GitHub -Details auf den Bildschirm bringen und unsere Anwendung ist erledigt!
Wir können definitiv einige Verbesserungen vornehmen. Der HTML -Code, der die oben genannten GitHub -Daten rendert, erfordert nur einen kleinen Teil der Daten des aktuellen Benutzers. Dies ist ein perfekter Fall für eine andere Komponente. Wir können Benutzerdaten dafür bereitstellen, sie können sie rendern.
Erstellen wir eine GithubuserData -Komponente mit der gleichen Struktur wie unsere anderen Komponenten:
<template> <p>This is my HTML for my component</p> </template> <🎜> <style scoped> /* CSS here * by including `scoped`, we ensure that all CSS * is scoped to this component! */ </style>
Es gibt nur einen kleinen Unterschied in dieser Komponente: Es wird eine Eigenschaftsdaten erhalten, die die Daten des Benutzers sind. Eigenschaften (oder "Requisiten") sind Datenbits, die eine Komponente an ihrer übergeordneten Komponente verabschiedet und sie sich in VUE zum Reagieren sehr ähnlich verhalten. In Vue müssen Sie jede Eigenschaft explizit deklarieren, die die Komponente benötigt. Hier sage ich, dass unsere Komponente eine Eigenschaftsdaten erhält:
mkdir vue2-demo-project cd vue2-demo-project npm init -y npm i vue npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
Das, was ich an Vue wirklich mag, ist, dass Sie sehr klar sein müssen. Dies erleichtert den Code einfacher zu verwenden, und ich glaube, dass das Projekt, wenn das Projekt größer und komplexer wird, einfacher zu pflegen ist.
In der neuen Vorlage haben wir genau das gleiche HTML wie zuvor, obwohl wir auf Daten anstelle von Githubdata [CurrentUnername] verweisen können:
mkdir src touch webpack.config.js src/index.html src/index.js
Um diese Komponente zu verwenden, müssen wir die Githuboutput -Komponente aktualisieren. Zuerst importieren und registrieren wir GithubuserData:
<code>. ├── package.json ├── package-lock.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js</code>
Sie können einen beliebigen Namen verwenden, wenn Sie die Komponente deklarieren. Wenn ich also Github-User-Data einsetze, können Sie den gewünschten Namen platzieren. Es wird empfohlen, sich an Komponenten zu halten, die Striche enthalten. Vue erzwingt dies nicht, aber die W3C -Spezifikation für benutzerdefinierte Elemente besagt, dass sie Striche enthalten müssen, um LifeName -Konflikte mit Elementen zu verhindern, die in zukünftigen Versionen von HTML hinzugefügt wurden.
Nachdem wir die Komponente deklariert haben, können wir sie in der Vorlage verwenden:
//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebPackPlugin({
template: "./src/index.html"
})
]
}Der entscheidende Punkt hier ist, wie ich das Datenattribut an die Komponente übergeben habe:
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Der Dickdarm zu Beginn dieser Eigenschaft ist entscheidend; VUE wird den Wert von Githubdata [CurrentUnername] bewertet und sicherstellt, dass die GithubuserData -Komponente über den Daten ändert.
Wenn Sie: Daten ein wenig kurz und magisch finden, können Sie auch eine längere V-Bind-Syntax verwenden:
import Vue from 'vue'
const vm = new Vue({
el: '#app',
})Die beiden sind gleichwertig. Verwenden Sie also bitte eine Ihrer Präferenzen.
Auf diese Weise befindet sich unsere Github -Anwendung in einem ziemlich guten Zustand! Sie finden den gesamten Code auf GitHub und sogar Anwendungen, die online ausgeführt werden.
Ich hatte große Hoffnungen auf Vue, als ich anfing, es zu benutzen, weil ich viele gute Dinge gehört habe und ich freue mich zu sagen, dass es meine Erwartungen entspricht. Die Verwendung von Vue fühlt sich an, als würde man die besten Teile von React einnehmen und sie mit den besten Teilen von Angular verschmelzen. Einige Richtlinien (wie V-IF, V-ELSE, V-Model usw.) sind sehr einfach zu beginnen (und einfacher zu verstehen als bedingte Urteile in der JSX-Syntax von React), aber das Komponentensystem von Vues fühlt sich sehr ähnlich wie bei React's's von React's's's, der den Reacts sehr ähnlich ist .
Sie sollten das System in kleine Komponenten zerlegen, und insgesamt fand ich es eine sehr nahtlose Erfahrung. Ich kann die Dokumentation des Vue -Teams noch nicht genug gelobt: Es ist absolut großartig. Die Anleitung ist ausgezeichnet, die API -Referenz ist umfassend und leicht zu navigieren, um genau das zu finden, was Sie wollen.
Wenn Sie diesen Beitrag mögen und mehr erfahren möchten, ist der beste Ausgangspunkt definitiv die offizielle Website von Vue.js.
vue.js 2.0 hat mehrere Verbesserungen gegenüber seinem Vorgänger. Die wichtigste Änderung ist die Einführung eines virtuellen DOM, der die Leistung verbessert, indem direkte Vorgänge auf dem tatsächlichen DOM reduziert werden. VUE.JS 2.0 führt außerdem eine vereinfachte Komponenten-basierte Entwicklungssyntax ein, um komplexe Benutzeroberflächen zu vereinfachen. Darüber hinaus unterstützt VUE.JS 2.0 das serverseitige Rendering, wodurch die Leistung Ihrer Anwendung verbessert und die SEO-Optimierung erleichtert wird.
Mit dem Beobachter in Vue.js 2.0 können Sie benutzerdefinierte Logik ausführen, wenn sich die Dateneigenschaften ändern. Um den Beobachter zu verwenden, müssen Sie eine Funktion mit demselben Namen wie das Datenattribut definieren, das Sie beobachten möchten, und sie dem "Watch" -Objekt in der VUE -Instanz hinzufügen. Diese Methode wird aufgerufen, wenn sich das Datenattribut ändert und ihre neuen und alten Werte als Parameter angenommen werden.
Notfallbelastung ist ein Konzept in Vue.js, mit dem Sie Daten vom Server laden können, bevor Sie diese benötigen, wodurch die Leistung Ihrer Anwendung verbessert wird. Um dringend geladen zu werden, können Sie den Lebenszyklus -Hook "erstellt" verwenden, um Daten vom Server zu erhalten, wenn die Komponente erstellt wird. Diese Daten sind dann unmittelbar nach der Erbringung der Komponente verfügbar.
Berechnete Eigenschaften in VUE.JS 2.0 ermöglichen es Ihnen, wiederverwendbare Eigenschaften zu definieren, die basierend auf Ihren Daten berechnet wurden. Um berechnete Eigenschaften zu verwenden, müssen Sie eine Methode definieren, die den berechneten Wert zurückgibt und dem berechneten Objekt in der VUE -Instanz hinzugefügt wird. Diese Methode wird aufgerufen, wenn Datenattribute von Änderungen abhängt, und der Rückgabewert wird zwischengespeichert, bis sich die Abhängigkeits erneut ändert.
vue.js 2.0 bietet ein leistungsstarkes Ereignisverarbeitungssystem, mit dem Sie DOM -Ereignisse anhören und benutzerdefinierte Logik ausführen können, wenn Ereignisse auftreten. Um Ereignisse zu verarbeiten, müssen Sie die "V-on" -Richtlinie in der Vorlage verwenden, gefolgt vom Namen des zu hörenen Ereignisses und der Methode zum Ausführen, wenn das Ereignis auftritt. Diese Methode wird unter Verwendung des Ereignisobjekts als Parameter aufgerufen.
vue.js 2.0 kann leicht in Laravel, ein beliebtes PHP -Framework, integriert werden. Laravel wird mit Vue.js -Unterstützung geliefert, sodass Sie sofort mit dem Bau von Vue.js -Komponenten beginnen können. Um Vue.js in einem Laravel -Projekt zu verwenden, müssen Sie das Skript von VUE.JS in HTML aufnehmen und die VUE -Komponente in einer separaten JavaScript -Datei definieren.
WebPack ist ein Modul -Bundler, mit dem die Komponenten von VUE.JS in eine einzelne JavaScript -Datei gebündelt werden können. Um Vue.js mit WebPack zu verwenden, müssen Sie das "Vue-Loader" -Paket installieren, mit dem WebPack VUE-Komponenten verstehen kann. Sie können dann Vue -Komponenten in Ihre JavaScript -Datei importieren und wie gewohnt verwenden.
vue.js 2.0 unterstützt TypeScript, ein statisch typisiertes Superet von JavaScript. Um VUE.JS mit TypeScript zu verwenden, müssen Sie das Paket "Vue-Klasse-Komponenten" installieren, mit dem Sie VUE-Komponenten mithilfe der TypeScript-Klasse definieren können. Sie können dann die VUE -Komponente als TypeScript -Klasse definieren und die statische typisierte Funktionen von TypeScript verwenden, um Fehler zur Kompilierungszeit zu erfassen.
Vuex ist eine staatliche Verwaltungsbibliothek für VUE.JS, mit der Sie den Status Ihrer Anwendung in einem zentralisierten Speicher verwalten können. Um Vuex mit Vue.js zu verwenden, müssen Sie das "Vuex" -Paket installieren und dann Ihren Status, Ihre Mutationen, Aktionen und Getter im Vuex -Speicher definieren. Sie können dann die Eigenschaft "this. $ Store" verwenden, um auf Ihren Staat zuzugreifen und Aktionen der VUE -Komponente zu planen.
Vue Router ist eine Routing -Bibliothek für Vue.js, mit der Sie Routen für Ihre Anwendung definieren können. Um Vue Router mit Vue.js zu verwenden, müssen Sie das "Vue-Router" -Paket installieren und Ihre Route in der Vue-Router-Instanz definieren. Sie können dann die "Router-Link" -Komponente verwenden, um zwischen den Routen zu navigieren und die Komponente "Router-View" zu verwenden, um die aktuell Routed-Komponenten anzuzeigen.
Das obige ist der detaillierte Inhalt vonAuf dem Laufenden mit dem Rahmen von Vue.js 2.0 zum Laufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche Software zum Testen von Laptop-Akkus ist die beste?
Vorteile des SPS-Steuerungssystems
Was bedeutet CX im Währungskreis?
Das Metaverse erkennt die zehn potenziellen Coins
So legen Sie Linux-Umgebungsvariablen fest
Welche Währung ist USDT?
Detaillierter Prozess zum Upgrade des Win7-Systems auf das Win10-System
Liste der Windows 10-Aktivierungsschlüssel
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
