Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Verwendung von Komponenten in Vue.js

Detaillierte Erläuterung der Verwendung von Komponenten in Vue.js

php中世界最好的语言Original: 2018-04-13 09:27:111544Durchsuche

Dieses Mal werde ich Ihnen die Verwendung von Komponenten in Vue.js ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Komponenten in Vue.js?

Einführung

Vue.js-Komponenten sind bei der Verwendung von Vue.js 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?

Mithilfe von Komponenten können wir komplexe Anwendungen in kleine Teile zerlegen. Eine typische Webanwendung verfügt beispielsweise über Abschnitte wie Kopfzeile, Seitenleiste, Inhalt und Fußzeile.

Mit Vue.js können wir jeden Teil in separate modulare Codes namens Komponenten aufteilen. 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 Blog-Anwendung und möchten eine Spalte mit Blog-Beiträgen anzeigen. Mit Vue-Komponenten können Sie Folgendes tun:

<blog-post></blog-post>

Vue kümmert sich um 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?

Sie vermuten, dass p dort, wo die Vue-Instanz gemountet ist, zweimal erscheint. Das wird nicht funktionieren. Versuchen Sie es von „id“ in „class“ zu ändern und Sie erhalten:

<!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?

Komponenten werden 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.

Erstellen wir eine Komponente mit dem oben genannten Inhalt.

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.

Wenn keine zu übergebenden Daten vorhanden sind, übergeben Sie die folgende Vorlage:

 Vue.component('welcome-message', {
  template: '<p>Welcome to Tutsplus</p>'
 })

Sobald dies erledigt ist, kann die Komponente in Ihrer Anwendung verwendet werden, indem sie unter Verwendung des an den Konstruktor übergebenen Namens als reguläres HTML-Element behandelt wird. Es heißt so: <welcome-message> </ welcome-message>.

Um die Vorlage mehrmals auszugeben, können Sie die Komponente so oft wie nötig aufrufen, wie unten gezeigt.




VueJs Components


 
 
 
 
 
 
 
 
 
 
 <script>
 Vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'Tutsplus'
  }
  },
  template: '&lt;p&gt;Welcome to {{ domain }}&lt;/p&gt;'
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: '#app'
 });
 </script>

Dadurch wird die Willkommensnachricht viermal angezeigt.

Speichern Sie Daten in der Komponente

Oben habe ich 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 es sich bei den zurückgegebenen Daten nicht um ein Objekt handelt, haben die Komponenten, die die Daten verwenden, dieselbe Quelle: die gemeinsam genutzten 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>

Können Sie erraten, was oben passiert?

Es gibt 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 werden hier als Objekt zurückgegeben und Änderungen an 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 Sie Komponenten

使用到目前为止学到的内容，让我们使用 vue -cli 从头开始一个新的Vue.js项目来实现它。如果你的机器上没有安装 vue -cli ，你可以通过运行：

npm install -g vue-cli

开始你的新的Vue.js项目：

vue init webpack vue-component-app

导航到你的应用程序，安装依赖关系，并使用下面的命令运行你的开发服务器。

cd vue-component-app
npm install
npm run dev

首先，你将重命名HelloWorld组件，这个组件是你将应用程序初始化为Hello.vue时创建的组件。然后你将注册这个组件作为一个全局组件在你的应用程序中使用。

所以你的Hello组件应该看起来像这样。

#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>

你有欢迎文本显示欢迎消息和作为数据传递的名称。当点击欢迎消息下方的按钮时，将调用changeName方法。名字将从亨利改为马克。

要全局使用此组件，必须被注册。你能猜到应该在哪里完成这个操作吗？如果你说main.js，恭喜你，答对了！

要注册一个组件，可以导入它，然后使用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允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen