Web-Frontend
js-Tutorial
Was sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel)
Was sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel)
Dieser Artikel bietet Ihnen eine Einführung in die Vue-Komponenten. Wie verwende ich Vue-Komponenten? (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Einführung in Komponenten
Das Komponentensystem unterteilt eine große Schnittstelle in kleinere steuerbare Einheiten.
Komponenten sind wiederverwendbar und wartbar.
Die Komponente verfügt über eine starke Kapselung und ist einfach zu verwenden.
In Großanwendungen kann die Interaktion zwischen Komponenten entkoppelt werden.
Vue-Komponenten verwenden
Globale Komponenten verwenden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script>
//全局组建的定义
Vue.component("my-header", {
template: '<h1>全局组件</h1>'
});
var app = new Vue({
el: '#app',
});
</script>
</body>
</html>Verwendung lokaler Komponenten
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script>
//局部组件定义
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<h1>局部组件</h1>'
}
}
});
</script>
</body>
</html>Eigenschaften von Komponentendaten
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
<my-header></my-header>
<br>
<my-header1></my-header1>
<my-header1></my-header1>
</div>
<script>
//组件数据之间不共享，Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数
//组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行，这样就不会影响其它组件，通过下面两个例子可以看出
var data = {
count: 0
};
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue!!!"
},
components: {
'my-header': {
template: '<h1 v-on:click="changeCount">{{count}}</h1>',
data: function() {
return data;
},
methods: {
changeCount: function() {
this.count++;
}
}
},
'my-header1': {
template: '<div v-on:click="changeCount1">{{count}}</div>',
data: function() {
return {
count: 0
};
},
methods: {
changeCount1: function() {
this.count++;
}
}
}
}
});
</script>
</body>
</html>Die Beziehung zwischen Vue-Instanzen und Komponenten
Die Vue-Komponente ist eigentlich eine erweiterbare Vue-Instanz.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
//Vue组件其实是一个可扩展的Vue实例，Vue实例也可以看成是一个组件
// var app = new Vue({
// el: '#app',
// template: '<h1>app应用</h1>'
// });
//使用继承实现Vue组件
var myComponent = Vue.extend({
data: function() {
return {
message: "Hello Vue@@@"
}
}
});
var vm = new myComponent({
el: '#app'
});
</script>
</body>
</html>Die Vorlagenmethode von Vue-Komponenten
`
.vue einzelne Datei
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
<my-header-1></my-header-1>
<my-header-2></my-header-2>
<my-header-3></my-header-3>
</div>
<template id="temp">
<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>
</template>
<script type="text/x-template" id="temp1">
<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>
</script>
<script>
//Vue模版添加方式
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<div>\
<p>\
<ul>\
<li>1</li>\
<li>2</li>\
<li>3</li>\
</ul>\
</p>\
</div>',
data: function() {
return {
message: "第一项"
}
}
},
'my-header-1': {
template: `<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>`,
},
'my-header-2': {
template: '#temp'
},
'my-header-3': {
template: '#temp1'
}
}
});
</script>
</body>
</html>Die übergeordnete Vue-Komponente kommuniziert mit untergeordneten Komponenten (Requisiten)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 数据在组件中 -->
<my-header></my-header>
<!-- 父组件向子组件传递数据 -->
<my-header-1 :list="temp_2_list"></my-header-1>
<!-- 父组件向子组件传递数据不给值 -->
<my-header-1></my-header-1>
</div>
<!-- 数据在组件中的模版 -->
<template id="temp-1">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</template>
<!-- 父组件向子组件传递数据的模版 -->
<template id="temp-2">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<my-nav :itemlist = "list"></my-nav>
</div>
</template>
<!-- 子组件向子组件传递数据的模版 -->
<template id="temp-3">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in itemlist">{{item}}</li>
</ul>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//数据在自己组件中的实例
'my-header': {
template: '#temp-1',
data: function() {
return {
list: ["1", "2", "3"],
message: "组件中的数据"
};
}
},
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
//子组件的子组件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子组件中的子组件"
};
},
props: ["itemlist"]
}
}
}
}
});
</script>
</body>
</html>Untergeordnete Komponente kommuniziert mit übergeordneter Komponente (EmitEvents)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header-1 :list="temp_2_list"></my-header-1>
</div>
<!-- 父组件向子组件传递数据的模版 -->
<template id="temp-2">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<my-nav :itemlist = "list" v-on:change-events="getChildContent"></my-nav>
</div>
</template>
<!-- 子组件向子组件传递数据的模版 -->
<template id="temp-3">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in itemlist" v-on:click="getContent">{{item}}</li>
</ul>
</div>
</template>
<script>
//子组件向父组件传递数据，是发布订阅模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
getChildContent: function(str) {
debugger
alert(str);
}
},
//子组件的子组件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子组件中的子组件"
};
},
props: ["itemlist"],
methods: {
getContent: function(ev) {
// console.log(this);
// console.log(ev.target.innerHTML);
this.$emit("change-events", ev.target.innerHTML);
}
}
}
}
}
}
});
</script>
</body>
</html>Kommunikation zwischen Vue-Nicht-Eltern-Kind-Komponenten
Leere Instanz und benutzerdefiniertes Ereignis
$emit
$on
Vuex State Management
State
Mutation
-
Commit
Verwendung leerer Instanzen und benutzerdefinierter Ereignisse (geeignet für kleine Projekte)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<my-header-1></my-header-1>
<my-header-2></my-header-2>
</div>
<script>
//非父子组件通信
//1.0 使用空实例进行非父子组件通信
//定义空实例
//创建步骤是：
//1、首先定义一个空实例
//2、需要给被传递数据的A组件使用$emit绑定自定义事件，并将A组件的数据发布给B组件
//3、使用$on订阅A组件发布过来的数据，从而获取数据
var busVm = new Vue();
var vm = new Vue({
el: '#app',
components: {
//组件B
'my-header-1': {
template: `<h1>{{message}}</h1>`,
data: function() {
return {
message: "非父子组件通信"
};
},
mounted() {
//使用bind（this）修正this
busVm.$on("changeEnvents", function(param) {
this.message = param;
}.bind(this));
},
},
//组件A
'my-header-2': {
template: `<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>`,
data: function() {
return {
list: ["第一项", "第二项", "第三项"]
};
},
methods: {
getContent: function(ev) {
busVm.$emit("changeEnvents", ev.target.innerHTML);
}
}
}
}
});
</script>
</body>
</html>Vuex-Statusverwaltung
Vue-Komponente Inhaltsverteilung
Einzelner
-Tag mit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<my-header-1>
<h1>我是标题</h1>
</my-header-1>
<my-header-1>
<my-header-2></my-header-2>
</my-header-1>
</div>
<script>
//单插槽<slot></slot>
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div>我是头部:<slot></slot></div>`,
},
'my-header-2': {
template: `<h1>我是标题</h1>`,
}
}
});
</script>
</body>
</html>Mehrere
-Tags verwenden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<my-header-1>
<button slot="left">←</button>
<button slot="right">→</button>
</my-header-1>
</div>
<script>
//多插槽的使用，则使用name属性来指定要插入的位置
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div><slot name="left"></slot> 我是头部:<slot name="right"></slot></div>`,
},
'my-header-2': {
template: `<h1>我是标题</h1>`,
}
}
});
</script>
</body>
</html>Standardwert
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<my-header-1>
<button slot="left">←</button>
<button slot="right">→</button>
</my-header-1>
</div>
<script>
//多插槽的使用，则使用name属性来指定要插入的位置
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div><slot name="left"></slot> 我是头部:<slot name="right"><button slot="right">+</button></slot></div>`,
},
'my-header-2': {
template: `<h1>我是标题</h1>`,
}
}
});
</script>
</body>
</html>Vue-Komponentenentwicklungsprozess
Grundlegendes HTML und CSS schreiben
Komponenten extrahieren
Datenübertragung
Inhaltsverteilung
Ereignisse und Methoden hinzufügen
DOM-Manipulation in Vue (mit $refs)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header-1 :list="temp_2_list"></my-header-1>
</div>
<!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作，使用this.$refs.row获取添加特性的DOM元素 -->
<template id="temp-2">
<div>
<h1>{{message}}</h1>
<ul >
<li v-for="item in list" v-on:click="updateStyle" style="color:blue" ref="row">{{item}}</li>
</ul>
</div>
</template>
<script>
//子组件向父组件传递数据，是发布订阅模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
updateStyle: function(ev) {
ev.target.style.color = 'red';
// this.$refs.row.style.color = 'red';
console.log(this.$refs.row);
this.$refs.row.forEach(element => {
console.log(element);
element.style.color = 'red';
});
}
}
}
}
});
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWas sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel). 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
1393
52
1209
24
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
So fügen Sie Funktionen zu Schaltflächen für Vue hinzu
Apr 08, 2025 am 08:51 AM
Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.
So verwenden Sie Watch in Vue
Apr 07, 2025 pm 11:36 PM
Mit der Watch -Option in Vue.js können Entwickler auf Änderungen in bestimmten Daten anhören. Wenn sich die Daten ändert, löst sich eine Rückruffunktion aus, um Aktualisierungsansichten oder andere Aufgaben auszuführen. Zu den Konfigurationsoptionen gehören unmittelbar, die festlegen, ob ein Rückruf sofort ausgeführt werden soll, und Deep, das feststellt, ob Änderungen an Objekten oder Arrays rekursiv anhören sollen.
So verweisen Sie auf die JS -Datei mit Vue.js
Apr 07, 2025 pm 11:27 PM
Es gibt drei Möglichkeiten, sich auf JS -Dateien in Vue.js zu beziehen: Geben Sie den Pfad direkt mit dem & lt; Skript & gt an. Etikett;; Dynamischer Import mit dem montierten () Lebenszyklushaken; und importieren über die Vuex State Management Library.
Was bedeutet VUE Multi-Page-Entwicklung?
Apr 07, 2025 pm 11:57 PM
VUE Multi-Page-Entwicklung ist eine Möglichkeit, Anwendungen mithilfe des Vue.js-Frameworks zu erstellen, in dem die Anwendung in separate Seiten unterteilt ist: Code-Wartung: Die Aufteilung der Anwendung in mehrere Seiten kann das Verwalten und Wartungsbereich erleichtern. Modularität: Jede Seite kann als separates Modul für eine einfache Wiederverwendung und den Austausch verwendet werden. Einfaches Routing: Die Navigation zwischen Seiten kann durch einfache Routing -Konfiguration verwaltet werden. SEO -Optimierung: Jede Seite hat eine eigene URL, die SEO hilft.
So kehren Sie von Vue zur vorherigen Seite zurück
Apr 07, 2025 pm 11:30 PM
VUE.JS hat vier Methoden, um zur vorherigen Seite zurückzukehren: $ router.go (-1) $ router.back () verwendet & lt; Router-Link to = & quot;/& quot; Komponentenfenster.history.back () und die Methodenauswahl hängt von der Szene ab.
So verwenden Sie Vue Traversal
Apr 07, 2025 pm 11:48 PM
Es gibt drei gängige Methoden für Vue.js, um Arrays und Objekte zu durchqueren: Die V-für-Anweisung wird verwendet, um jedes Element zu durchqueren und Vorlagen zu rendern; Die V-Bind-Anweisung kann mit V-für dynamisch Attributwerte für jedes Element verwendet werden. und die .MAP -Methode kann Array -Elemente in Neuarrays umwandeln.
Wie man zum Div von Vue springt
Apr 08, 2025 am 09:18 AM
Es gibt zwei Möglichkeiten, Divelemente in Vue zu springen: Verwenden Sie Vue Router und fügen Sie Router-Link-Komponente hinzu. Fügen Sie den @click Event -Listener hinzu und nennen Sie dies. $ Router.push () Methode zum Springen.
