Vue.js Learning 4: Grundlagen der Vue-Komponenten
Die heutige Spalte „Vue.js-Tutorial“ führt Sie in die Grundkenntnisse der Vue-Komponenten ein.
Bisher wurden in dieser Notizreihe einige äußerst einfache einseitige Webanwendungen gezeigt, und auf der Seite befinden sich normalerweise nur wenige einfache interaktive Elemente. In tatsächlichen Produktionsumgebungen besteht die Benutzeroberfläche von Webanwendungen jedoch häufig aus mehreren komplexen Seiten. Zu diesem Zeitpunkt müssen wir auf die Wiederverwendbarkeit des Codes achten. Um dieses Problem zu lösen, besteht die vom Vue.js-Framework vorgeschlagene Lösung darin, die Elemente auf der Benutzeroberfläche zunächst entsprechend verschiedenen Funktionen in unabhängige Komponenten zu unterteilen, z B. Navigationsspalte, Schwarzes Brett, Datenformular, Benutzerregistrierungsformular, Benutzeranmeldeschnittstelle usw. Auf diese Weise können wir diese Komponenten in unserer späteren Arbeit je nach Bedarf zu verschiedenen spezifischen Anwendungen kombinieren, ähnlich wie beim Spielen mit Lego-Spielzeugen. Alles in allem ist das Komponentensystem ein wichtiges Konzept, das wir beherrschen müssen, wenn wir das Vue.js-Framework erlernen. Im Folgenden wird in dieser Notiz eine Reihe experimenteller Beispiele geschrieben, um die grundlegenden Methoden zum Erstellen und Verwenden von Komponenten im Vue.js-Framework kennenzulernen. 
code ein Verzeichnis mit dem Namen 00_test erstellen, um die nächste Reihe experimenteller Projekte zu speichern. Diese Projekte können nur zum Erleben verwendet werden die Konstruktion und Verwendung von Vue-Komponenten und haben keine tatsächlichen Anwendungsfunktionen, daher habe ich ihnen die Nummer 00 gegeben. Beginnen wir also mit dem ersten Experiment! Dazu muss ich weiterhin ein experimentelles Verzeichnis mit dem Namen component_1 im Verzeichnis code/00_test erstellen und npm install vue in diesem Verzeichnis ausführen. code> Befehl zum Installieren des Vue.js-Frameworks. Zum Schluss muss ich nur noch eine Datei mit dem Namen <code>index.htm im Verzeichnis code/00_test/component_1 erstellen und den folgenden Code eingeben:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA -Compatible" content="ie=edge">
<title>学习 vue 组件实验（1）：组件注册</title>
`</head>
<body>
<p id="app">
<say-hello :who="who"></say-hello>
<welcome-you :who="who"></welcome-you>
</p>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 全局组件注册
Vue.component('say-hello', {
template: `<h1>你好， {{ you }}！</h1>`,
props: ['who'],
data: function() {
return {
you: this.who
};
}
});
const app = new Vue({
el: '#app',
// 局部组件注册
components: {
'welcome-you': {
template: `<h2>欢迎你， {{ you }}！</h2>`,
props: ['who'],
data: function() {
return {
you: this.who
};
}
}
},
data: {
who: 'vue'
}
});
</script>
</body>
</html>say-hello und welcome-you auf zwei verschiedene Arten erstellt und registriert. Als nächstes werden wir diese beiden Komponenten verwenden, um die Verwendung dieser beiden Komponenten vorzustellen. Die erste ist die Komponente say-hello, die durch Aufrufen der Methode Vue.component() erstellt und in der Anwendung registriert wird. Komponenten, die mit dieser Methode erstellt werden, heißen normalerweise „. „Globale Komponente“ müssen wir beim Aufruf zwei Parameter angeben:
-
code目录中创建一个名为00_test的目录，以便用于存放接下来的一系列实验项目，由于这些项目只能用于体验 Vue 组件的构建与使用方法，并没有实际的应用功能，所以我给了它00这个编号。那么，下面就来开始第一个实验吧！为此，我需要继续在code/00_test目录中再创建一个名为component_1的实验目录，并在该目录下执行npm install vue命令来安装 Vue.js 框架。最后，我只需在code/00_test/component_1目录下创建一个名为index.htm的文件，并输入如下代码：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <script src="./node_modules/vue/dist/vue.js"></script> <script type="module" src="./main.js"></script> <title>学习 vue 组件实验（2）：以 ES6 模块的方式注册组件</title> </head> <body> <p id="app"> <say-hello :who="who"></say-hello> </p> </body> </html>
Nach dem Login kopierenNach dem Login kopieren在上述实验中，我用两种不同的方式分别创建并注册了
say-hello和welcome-you两个组件。接下来就借由这两个组件来介绍一下这两种组件的使用。首先是say-hello组件，该组件是通过调用Vue.component()方法来创建并注册到应用程序中的，使用该方法创建的组件通常被称之为"全局组件"，我们在调用它的时候需要提供两个参数：第一个参数应该是一个字符串对象，用于指定组件的名称，该名称也是我们要在 HTML 文档中使用的自定义标签元素，而由于 HTML 代码是大小写不敏感的，所以我个人会建议大家在给组件起名字的时候应该尽量一律使用小写字母，单词之间可以使用
-这样分隔符进行区隔。-
第二个参数应该是一个 JavaScript 对象，用于设置组件的各项具体参数。这里定义了以下三项最基本参数：
-
template：该参数是个字符串对象，用于指定该组件的 HTML 模版代码，需要注意的是，这段代码说对应的 DOM 对象必须有且只能有一个根节点。而这个对象在最终的 HTML 文档中将会由该组件所对应自定义标签所代表，在这里就是<say-hello>。 -
props：该参数是一个字符串数组，该数组中的每个元素都是该组件所对应的自定义标签的一个属性，该组件的用户可以通过v-bind指令将该属性绑定到某一数据上，以便将数据传到组件内部。例如在这里，我在<say-hello>标签中就用v-bind指令将该标签的who属性绑定到了 Vue 实例对象的who数据上，并将其传进say-hello组件中。 -
data：该参数是一个函数，用于设置组件自身的数据，例如这里的you，我将从调用者那里获取的who数据赋值给了它。对于后者，我们可以用thisDer erste Parameter sollte ein String-Objekt sein, das zur Angabe des Namens der Komponente verwendet wird, in der auch unsere benutzerdefinierten Tag-Elemente verwendet werden HTML-Dokumente. Da bei HTML-Code die Groß- und Kleinschreibung nicht beachtet wird, empfehle ich Ihnen, bei der Benennung von Komponenten Kleinbuchstaben zu verwenden. Sie können
-
-
Der zweite Parameter sollte ein JavaScript-Objekt sein, das zum Festlegen verschiedener spezifischer Parameter der Komponente verwendet wird. Die folgenden drei grundlegendsten Parameter werden hier definiert:
-
template: Dieser Parameter ist ein String-Objekt, das zur Angabe des HTML-Vorlagencodes der Komponente verwendet wird. Es ist zu beachten, dass dieser Absatz Der Code besagt, dass das entsprechende DOM-Objekt einen Wurzelknoten haben muss und nur haben kann. Dieses Objekt wird durch das benutzerdefinierte Tag dargestellt, das der Komponente im endgültigen HTML-Dokument entspricht, in diesem Fall<say-hello>. 🎜 -
props: Dieser Parameter ist ein String-Array. Jedes Element im Array ist eine Eigenschaft des benutzerdefinierten Tags, das der Komponente entspricht.v-bind Die-Direktive bindet diese Eigenschaft an einige Daten, damit die Daten an die Komponente übertragen werden können. Hier habe ich beispielsweise die Anweisungv-bindim Tag<say-hello>verwendet, um das Attributwhodes Tags zu binden anwho-Daten des Vue-Instanzobjekts und übergeben Sie sie an diesay-hello-Komponente. 🎜 -
data: Dieser Parameter ist eine Funktion, mit der die Daten der Komponente selbst festgelegt werden, wie z. B.Siehier, ich erhalte denvom Aufrufer werDaten sind ihm zugeordnet. Für Letzteres können wir die Referenzdiesverwenden, um sie abzurufen. 🎜🎜🎜Zusätzlich zu den oben genannten drei Grundparametern können wir natürlich auch weitere Parameter für die Komponente festlegen, wie z. B. benutzerdefinierte Ereignisse und deren Verarbeitungsfunktionen usw., die ich in der anschließenden Programmiererfahrung zeigen werde. 🎜
下面，我们再来看
welcome-you组件的构建。如你所见，该组件是在 vue 实例的components成员中构建并注册到应用程序中的，使用该方法创建的组件通常被称之为"局部组件"（它与全局组件的区别是，全局组件会在程序运行时全部加载，而局部组件只会在被实际用到时加载） 。该components成员的值也是一个 JSON 格式的数据对象，该数据对象中的每一个成员都是一个局部组件，这些组件采用键/值对的方式来定义,键对应的是组件的名称，值对应的是组件参数的设置。当然了，由于局部组件的命名规则与具体参数的设置方法都与全局对象一致，这里就不再重复说明了。需要注意的是，第一个实验项目的编写方式将 HTML 代码、Vue 实例的构建代码以及组件的构建代码糅合在了一起，这对于提高代码的可复用性这个目的来说，显然是不行的。要想解决这个问题，我们可以利用 ES6 规范新增的模块规则将这三部分代码隔离开来。为了体验这种用法，我继续开始了第二个实验。具体做法就是在
code/00_test目录中再创建一个名为component_2的实验目录，并在该目录下执行npm install vue命令来安装 Vue.js 框架。最后，我只需在code/00_test/component_2目录下创建一个名为index.htm的文件，并输入如下代码：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <script src="./node_modules/vue/dist/vue.js"></script> <script type="module" src="./main.js"></script> <title>学习 vue 组件实验（2）：以 ES6 模块的方式注册组件</title> </head> <body> <p id="app"> <say-hello :who="who"></say-hello> </p> </body> </html>
Nach dem Login kopierenNach dem Login kopieren在上述 HTML 代码中，我们在照常引入 vue.js 框架之后，使用模块的方式引入了
main.js脚本文件，最好在<p id="app">标签中使用了后面将要定义的组件所对应的自定义标签。接下来，我只需要在相同的目录下创建一个名为main.js的 JavaScript 脚本文件，并在其中输入如下代码：// import Vue from './node_modules/vue/dist/vue.js'; import sayhello from './sayhello.js'; const app = new Vue({ el: '#app', components: { 'say-hello': sayhello }, data: { who:'vue' } });Nach dem Login kopieren在上述 JavaScript 代码中，我首先使用了 ES6 新增的
import-from语句导入了后续要在sayhello.js文件中构建的组件，然后在构建 Vue 实例时将其注册成了局部组件。最后，我只需在同一目录下再创建这个sayhello.js脚本文件，并在其中输入如下代码：const tpl = ` <p> <h1>你好， {{ you }}！</h1> <input type="text" v-model="you" /> </p> `; const sayhello = { template: tpl, props : ['who'], data : function() { return { you: this.who } } }; export default sayhello;Nach dem Login kopieren在这部分代码中，我先定义了一个局部组件，然后再使用 ES6 新增的
export default语句将其导出为模块。当然，考虑到各种 Web 浏览器对 ES6 规范的实际支持情况，以及 Vue.js 框架本身使用的是 CommonJS 模块规范，所以上述实验依然可能不是编写 Vue.js 项目的最佳方式，其中可能还需要配置 babel 和 webpack 这样的转译和构建工具来辅助。在下一篇笔记中，我就来记录如何使用这些工具来构建具体的 vue 应用程序。相关学习推荐：js视频教程
-
Das obige ist der detaillierte Inhalt vonVue.js Learning 4: Grundlagen der Vue-Komponenten. 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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
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
1389
52
Vue-Komponentenkommunikation: Verwenden Sie $destroy für die Kommunikation zur Komponentenzerstörung
Jul 09, 2023 pm 07:52 PM
Vue-Komponentenkommunikation: Verwenden Sie $destroy für die Kommunikation zur Komponentenzerstörung. In der Vue-Entwicklung ist die Komponentenkommunikation ein sehr wichtiger Aspekt. Vue bietet verschiedene Möglichkeiten zur Implementierung der Komponentenkommunikation, z. B. Requisiten, Emit, Vuex usw. In diesem Artikel wird eine weitere Methode der Komponentenkommunikation vorgestellt: die Verwendung von $destroy für die Kommunikation zur Komponentenzerstörung. In Vue verfügt jede Komponente über einen Lebenszyklus, der eine Reihe von Lebenszyklus-Hook-Funktionen umfasst. Die Zerstörung von Komponenten gehört ebenfalls dazu
Wie implementiert Vue die Wiederverwendung und Erweiterung von Komponenten?
Jun 27, 2023 am 10:22 AM
Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie hat sich Vue zu einem der beliebtesten Frameworks in der Front-End-Entwicklung entwickelt. In Vue sind Komponenten eines der Kernkonzepte, mit denen Seiten in kleinere, besser verwaltbare Teile zerlegt werden können, wodurch die Entwicklungseffizienz und die Wiederverwendbarkeit des Codes verbessert werden. Dieser Artikel konzentriert sich darauf, wie Vue die Wiederverwendung und Erweiterung von Komponenten implementiert. 1. Vue-Komponenten-Wiederverwendungs-Mixins Mixins sind eine Möglichkeit, Komponentenoptionen in Vue zu teilen. Mit Mixins können Komponentenoptionen aus mehreren Komponenten optimal zu einem einzigen Objekt kombiniert werden
Vue-Praxis: Entwicklung von Datumsauswahlkomponenten
Nov 24, 2023 am 09:03 AM
Vue Practical Combat: Datumsauswahl-Komponentenentwicklung Einführung: Die Datumsauswahl ist eine Komponente, die häufig in der täglichen Entwicklung verwendet wird. Sie kann Daten einfach auswählen und bietet verschiedene Konfigurationsoptionen. In diesem Artikel wird erläutert, wie Sie mit dem Vue-Framework eine einfache Datumsauswahlkomponente entwickeln und spezifische Codebeispiele bereitstellen. 1. Anforderungsanalyse Vor Beginn der Entwicklung müssen wir eine Anforderungsanalyse durchführen, um die Funktionen und Eigenschaften der Komponenten zu klären. Gemäß den allgemeinen Funktionen der Datumsauswahlkomponente müssen wir die folgenden Funktionspunkte implementieren: Grundfunktionen: können Daten auswählen und
Vue-Komponentenkommunikation: Verwendung von Watch und Computing zur Datenüberwachung
Jul 10, 2023 am 09:21 AM
Vue-Komponentenkommunikation: Verwendung von Watch und Compute zur Datenüberwachung Vue.js ist ein beliebtes JavaScript-Framework, dessen Kernidee die Komponentisierung ist. In einer Vue-Anwendung müssen Daten zwischen verschiedenen Komponenten übertragen und kommuniziert werden. In diesem Artikel stellen wir vor, wie man Vues Watch und Computing zum Überwachen und Reagieren auf Daten verwendet. watch In Vue ist watch eine Option, mit der Änderungen in einer oder mehreren Eigenschaften überwacht werden können.
So verwenden Sie Bibliotheken von Drittanbietern in Vue-Projekten
Oct 15, 2023 pm 04:10 PM
Vue ist ein beliebtes JavaScript-Framework, das eine Fülle von Tools und Funktionen bietet, die uns beim Erstellen moderner Webanwendungen unterstützen. Obwohl Vue selbst bereits viele praktische Funktionen bietet, müssen wir manchmal Bibliotheken von Drittanbietern verwenden, um die Fähigkeiten von Vue zu erweitern. In diesem Artikel wird die Verwendung von Bibliotheken von Drittanbietern in Vue-Projekten vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Bibliotheken von Drittanbietern einführen Der erste Schritt zur Verwendung von Bibliotheken von Drittanbietern in einem Vue-Projekt besteht darin, sie einzuführen. Wir können es auf folgende Weise einführen
Umfassendes Verständnis des Komponentenlebenszyklus von Vue
Oct 15, 2023 am 09:07 AM
Um den Komponentenlebenszyklus von Vue genau zu verstehen, benötigen Sie spezifische Codebeispiele. Einführung: Vue.js ist ein fortschrittliches JavaScript-Framework, das von Entwicklern wegen seiner Einfachheit, einfachen Erlernbarkeit, Effizienz und Flexibilität bevorzugt wird. Bei der Komponentenentwicklung von Vue ist das Verständnis des Lebenszyklus von Komponenten ein wichtiger Teil. Dieser Artikel befasst sich mit dem Lebenszyklus von Vue-Komponenten und stellt spezifische Codebeispiele bereit, um den Lesern zu helfen, diese besser zu verstehen und anzuwenden. 1. Lebenszyklusdiagramm von Vue-Komponenten Der Lebenszyklus von Vue-Komponenten kann als Komponenten betrachtet werden
Entwicklung von Vue-Komponenten: Implementierungsmethode für Registerkartenkomponenten
Nov 24, 2023 am 08:41 AM
Entwicklung von Vue-Komponenten: Implementierungsmethode für Tab-Komponenten In modernen Webanwendungen ist die Tab-Seite (Tab) eine weit verbreitete UI-Komponente. Die Tab-Komponente kann mehrere verwandte Inhalte auf einer einzigen Seite anzeigen und diese durch Klicken auf die Registerkarte wechseln. In diesem Artikel stellen wir vor, wie man mit Vue.js eine einfache Tab-Komponente implementiert, und stellen detaillierte Codebeispiele bereit. Die Struktur der Vue-Tab-Komponente besteht normalerweise aus zwei Teilen: Tab und Panel. Etiketten werden zur Kennzeichnung von Oberflächen verwendet
So wechseln Sie zwischen mehreren Dateninteraktionsmethoden in Vue-Komponenten
Oct 08, 2023 am 11:37 AM
So wechseln Sie zwischen mehreren Dateninteraktionsmethoden in Vue-Komponenten. Bei der Entwicklung von Vue-Komponenten stoßen Sie häufig auf Szenarien, in denen Sie zu verschiedenen Dateninteraktionsmethoden wechseln müssen, z. B. zum Anfordern von Daten über APIs, zum Eingeben von Daten über Formulare oder zum Übertragen von Daten in Echtzeit über WebSocket usw. . In diesem Artikel wird erläutert, wie dieser Wechsel mehrerer Dateninteraktionsmethoden in Vue-Komponenten implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Methode 1: API-Anforderungsdaten In einigen Fällen müssen wir Daten über die API anfordern, um Hintergrunddaten zu erhalten. unter
