Heim >Web-Frontend >js-Tutorial >Erklären Sie im Detail, wie Komponenten und ihre Funktionen in Vue.js verwendet werden.
Erklären Sie im Detail, wie Komponenten und ihre Funktionen in Vue.js verwendet werden.
- 亚连Original
- 2018-06-08 14:04:053441Durchsuche
Komponente ist eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. In diesem Artikel werden hauptsächlich die Komponenten in vue.js vorgestellt. Wenn Sie sie benötigen, lesen Sie bitte
Einführung
Bei der Verwendung von Vue.js. Vue.js-Komponenten sind sehr wichtig. In diesem Tutorial tauchen wir tief in die Komponenten von Vue.j ein, verstehen die Grundlagen und wenden sie auf Ihre Anwendung an. Fangen wir an.
Was sind Komponenten?
Komponenten ermöglichen es uns, komplexe Anwendungen in kleine Teile zu zerlegen. Eine typische Webanwendung verfügt beispielsweise über Abschnitte wie Kopfzeile, Seitenleiste, Inhalt und Fußzeile.
Vue.js ermöglicht es uns, jeden Teil in separaten modularen Code, sogenannte Komponenten, zu unterteilen. Diese Komponenten können erweitert und dann an die Anwendung angehängt werden, an der Sie arbeiten. Die Verwendung von Komponenten ist eine hervorragende Möglichkeit, Code beim Schreiben Ihrer Anwendung wiederzuverwenden.
Angenommen, Sie haben eine Blogging-Anwendung und möchten eine Spalte mit Blogbeiträgen anzeigen. Mit Vue-Komponenten können Sie Folgendes tun:
<blog-post></blog-post>
Vue erledigt den Rest.
Erstellen Sie eine einfache HTML-Seite, die eine Vue-Instanz an ein DOM-Element anhängt. Sie werden es verwenden, um mehr über Komponenten zu erfahren. Das Folgende ist eine Beispiel-HTML-Seite:
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- p where Vue instance will be mounted -->
<p id="app"></p>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
// A new Vue instance is created and mounted to your p element
new Vue({
el: '#app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>Oben haben Sie eine einfache Vue-Instanz ohne Komponenten im Code erstellt. Wenn Sie nun möchten, dass die Willkommensnachricht zweimal angezeigt wird, was tun Sie dann?
Ihre Vermutung könnte sein, p zweimal dort erscheinen zu lassen, wo die Vue-Instanz gemountet ist. Das wird nicht funktionieren. Versuchen Sie es von „id“ in „class“ zu ändern und Sie erhalten Folgendes:
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- p where Vue instance will be mounted -->
<p class="app"></p>
<p class="app"></p>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
// A new Vue instance is created and mounted to your p element
new Vue({
el: '.app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>Es wird immer noch nicht funktionieren!
Die einzige Möglichkeit, dieses Problem zu lösen, besteht darin, eine Komponente zu erstellen. Wie erstellt man eine Komponente? Die
-Komponente wird mit dem Vue.component（）-Konstruktor erstellt. Dieser Konstruktor benötigt zwei Parameter: den Namen Ihrer Komponente (auch Tag-Name genannt) und ein Objekt, das die Komponentenoptionen enthält.
Lassen Sie uns eine Komponente mit dem obigen Inhalt erstellen.
Vue.component('welcome-message', {
data: function() {
return {
domain: 'Tutsplus'
}
},
template: '<p>Welcome to {{ domain }}</p>'
}) Oben heißt der Komponentenname welcome-message. Ihre Komponente kann einen beliebigen Namen haben. Wichtig ist jedoch, dass dieser Name keine Auswirkungen auf HTML-Tags hat, da Sie ihn nicht überschreiben möchten.
Das an den Konstruktor übergebene Optionsobjekt enthält Daten und Vorlagen. Beim Erstellen einer Komponente sollten Ihre Daten eine Funktion sein, wie oben gezeigt. Die gespeicherten Daten sollten als Objekt zurückgegeben werden.
Ohne Daten zu übergeben, übergeben Sie eine Vorlage wie diese:
Vue.component('welcome-message', {
template: '<p>Welcome to Tutsplus</p>'
})Sobald Sie fertig sind, können Sie es als reguläres HTML-Element in Ihrer Anwendung behandeln, indem Sie den Namen verwenden, der an die verwendeten Konstruktorkomponenten übergeben wurde In. Es heißt so: b96f265ddb2ff8b5c74c4b8864998c55 99483aea6b39271594c4a1f67cf42565.
Um die Vorlage mehrmals auszugeben, können Sie die Komponente so oft wie nötig aufrufen, wie unten gezeigt.
VueJs Components <script> Vue.component(&#39;welcome-message&#39;, { data: function() { return { domain: &#39;Tutsplus&#39; } }, template: &#39;<p>Welcome to {{ domain }}</p>&#39; }) // A new Vue instance is created and mounted to your p element new Vue({ el: '#app' }); </script>
Die Willkommensnachricht wird viermal angezeigt.
Daten in der Komponente speichern
Ich habe oben erwähnt, dass die Daten eine Funktion sein müssen und die darin enthaltenen Informationen als Objekt zurückgegeben werden müssen. Warum ist das so?
Wenn die zurückgegebenen Daten kein Objekt sind, teilen Komponenten, die diese Daten verwenden, dieselbe Quelle: gemeinsame Daten. Daher wirken sich Datenänderungen in einer Komponente auf eine andere Komponente aus. Dies ist nicht dasselbe, wenn die Daten als Objekt zurückgegeben werden.
Es ist wichtig zu sehen, wie das tatsächlich funktioniert. Schauen wir uns zunächst den Fall an, in dem die Daten als Objekt zurückgegeben werden.
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- p where Vue instance will be mounted -->
<p id="app">
<welcome-message></welcome-message>
<welcome-message></welcome-message>
</p>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
var data = { name: 'Henry' }
Vue.component('welcome-message', {
data: function() {
return data
},
template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
methods :{
changeName: function() {
this.name = 'Mark'
}
}
})
// A new Vue instance is created and mounted to your p element
new Vue({
el: '#app'
});
</script>
</body>
</html>Kannst du erraten, was oben passiert ist?
besteht aus zwei Komponenten, und beide Komponenten nutzen dieselbe Datenquelle, da die Daten nicht als Objekt zurückgegeben werden. Wie beweisen Sie, dass ich Recht habe? Wenn Sie die obige Seite in einem Browser anzeigen, werden Sie feststellen, dass Änderungen in einer Komponente dazu führen, dass sich Daten in einer anderen Komponente ändern. Wie soll es also aussehen?
So:
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- p where Vue instance will be mounted -->
<p id="app">
<welcome-message></welcome-message>
<welcome-message></welcome-message>
</p>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('welcome-message', {
data: function() {
return {
name: 'Henry'
}
},
template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
methods :{
changeName: function() {
this.name = 'Mark'
}
}
})
// A new Vue instance is created and mounted to your p element
new Vue({
el: '#app'
});
</script>
</body>
</html>Die Daten hier werden als Objekt zurückgegeben und Änderungen in einer Komponente wirken sich nicht auf eine andere Komponente aus. Diese Funktion wird für eine einzelne Komponente ausgeführt. Es ist wichtig, dies beim Erstellen Ihrer Anwendung nicht zu vergessen.
Erstellen und Verwenden von Komponenten
Lassen Sie uns das, was wir bisher gelernt haben, umsetzen, indem wir mit vue -cli ein neues Vue.js-Projekt von Grund auf starten. Wenn vue-cli nicht auf Ihrem Computer installiert ist, können Sie Ihr neues Vue.js-Projekt starten, indem Sie Folgendes ausführen:
npm install -g vue-cli
:
vue init webpack vue-component-app
Navigieren Sie zu Ihrer Anwendung, installieren Sie die Abhängigkeiten und führen Sie Ihr aus Entwicklungsserver mit dem folgenden Befehl.
cd vue-component-app npm install npm run dev
Zunächst benennen Sie die HelloWorld-Komponente, die bei der Initialisierung der Anwendung erstellt wurde, in Hello.vue um. Anschließend registrieren Sie diese Komponente als globale Komponente zur Verwendung in Ihrer Anwendung.
Ihre Hello-Komponente sollte also so aussehen.
#src/components/Hello.vue
<template>
<p class="hello">
<p>Welcome to TutsPlus {{ name }}</p>
<hr>
<button @click="changeName">Change Display Name</button>
</p>
</template>
<script>
export default {
name: 'Hello',
data () {
return {
name: 'Henry'
}
},
methods: {
changeName () {
this.name = 'Mark'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>Sie haben den Begrüßungstext mit der Begrüßungsnachricht und dem als Daten übergebenen Namen. Wenn auf die Schaltfläche unter der Willkommensnachricht geklickt wird, wird die Methode „changeName“ aufgerufen. Der Name wird von Henry in Mark geändert.
Um diese Komponente global nutzen zu können, muss sie registriert werden. Können Sie erraten, wo dies erfolgen sollte? Wenn Sie main.js gesagt haben, herzlichen Glückwunsch, Sie haben richtig geantwortet!
要注册一个组件，可以导入它，然后使用Vue.component（）构造函数进行设置。自己动手试试。
我敢打赌，这个对你来说小菜一碟。以下是main.js文件中的内容。
#src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Home from './components/Hello'
Vue.config.productionTip = false
Vue.component('display-name', Home)
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})这里除了导入你的Hello组件的那一行之外，没有什么新东西。然后使用构造函数注册该组件。最后，对于这部分，组件需要使用你输入的组件名称来显示。在这种情况下，组件是显示名称。这将在你的App.vue文件中完成。
打开src / App.vue并使其看起来像这样。
#src/App.vue
<template>
<p id= "app" >
<display-name/>
</p>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: 'Avenir' , Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>打开服务器，打开http：// localhost：8080。 点击按钮，名称应该改变。
我们来看看如何在本地使用一个组件。
在组件目录中创建一个名为Detail.vue的文件。 这个组件不会做任何特殊的事情 - 它将被用在Hello组件中。
使你的Detail.vue文件就像这样。
#src/components/Detail.vue
<template>
<p class="hello">
<p>This component is imported locally.</p>
</p>
</template>
<script>
export default {
name: 'Detail'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>要在Hello组件中使用它，可以像导入Hello组件一样将其导入。 接下来，把它注册，但这次你不需要使用Vue.component（）构造函数。
你可以使用导出内的组件对象进行注册。将用作元素标记的组件的名称必须作为值传递给对象。 完成后，你现在可以使用元素标记来输出组件。
为了理解这一点，Hello组件应该长这样：
#src/components/Hello.vue
<template>
<p class="hello">
<p>Welcome to TutsPlus {{ name }}</p>
<hr>
<button @click="changeName">Change Display Name</button>
<!-- Detail component is outputted using the name it was registered with -->
<Detail/>
</p>
</template>
<script>
// Importation of Detail component is done
import Detail from './Detail'
export default {
name: 'HelloWorld',
data () {
return {
name: 'Henry'
}
},
methods: {
changeName () {
this.name = 'Mark'
}
},
/**
* Detail component gets registered locally.
* This component can only be used inside the Hello component
* The value passed is the name of the component
*/
components: {
Detail
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>刷新页面以查看新页面。
范围组件样式
Vue.js允许你为组件提供全局和本地样式。是什么意思呢？在某些情况下，你希望组件中的某些元素与另一个组件中的对应元素的样式不同。Vue.js能够帮助你。
一个很好的例子是你刚刚建立的小应用程序。App.vue中的样式是全局的; 这怎么可能？ 打开你的App.vue，风格部分看起来像这样。
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>这与Detail.vue不同，看起来像这样。
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>将 scoped 添加到样式标签是造成这个差别的原因。 尝试通过删除 scoped 来编辑一种组件样式，你会看到这是如何运作的。
结论
虽然这个文章有点长，但是我相信你会喜欢它。
现在你知道如何有效地使用组件，并且了解如何在现有应用程序中构建组件。在使用vue-cli时，你还可以在本地和全局范围内创建和使用组件。当你想为一个组件使用特定的风格时，你已经看到了如何使用scoped来做到这一点。
你现在可以继续构建使用组件的复杂Vue.js应用程序。了解Vue.js允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Das obige ist der detaillierte Inhalt vonErklären Sie im Detail, wie Komponenten und ihre Funktionen in Vue.js verwendet werden.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse