Maison > Article > interface Web > Expliquer en détail comment utiliser les composants et leurs fonctions dans Vue.js ?
Expliquer en détail comment utiliser les composants et leurs fonctions dans Vue.js ?
- 亚连original
- 2018-06-08 14:04:053339parcourir
Le composant est l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML, encapsulant du code réutilisable. Cet article présente principalement les composants de vue.js. Si vous en avez besoin, veuillez vous référer à
Introduction
Lors de l'utilisation de Vue.js, Les composants Vue.js sont très importants. Dans ce didacticiel, nous approfondirons les composants Vue.js, comprendrons les bases et les appliquerons à votre application. Commençons.
Que sont les composants ?
Les composants nous permettent de diviser des applications complexes en petits morceaux. Par exemple, une application Web typique comportera des sections telles que l’en-tête, la barre latérale, le contenu et le pied de page.
Vue.js nous permet de diviser chaque partie en code modulaire distinct appelé composants. Ces composants peuvent être étendus puis attachés à l'application sur laquelle vous travaillez. L'utilisation de composants est un excellent moyen de réutiliser le code tout au long de l'écriture de votre application.
Supposons que vous disposiez d'une application de blog et que vous souhaitiez afficher une colonne d'articles de blog. En utilisant les composants Vue, vous pouvez faire :
<blog-post></blog-post>
Vue gère le reste.
Créez une page HTML simple qui monte une instance Vue sur un élément DOM. Vous l'utiliserez pour en savoir plus sur les composants. Voici un exemple de page HTML :
<!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>Dans ce qui précède, vous avez créé une instance Vue simple sans aucun composant dans le code. Maintenant, si vous souhaitez que le message de bienvenue apparaisse deux fois, que faites-vous ?
Vous pensez peut-être laisser p apparaître deux fois là où l'instance Vue est montée. Cela ne fonctionnera pas. Essayez de le changer d'identifiant en classe et vous obtiendrez :
<!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>Cela ne fonctionnera toujours pas !
La seule façon de résoudre ce problème est de créer un composant. Comment créer un composant ? Le composant
est créé à l'aide du constructeur Vue.component（）. Ce constructeur prend deux paramètres : le nom de votre composant (également appelé nom de balise) et un objet contenant les options du composant.
Créons un composant en utilisant le contenu ci-dessus.
Vue.component('welcome-message', {
data: function() {
return {
domain: 'Tutsplus'
}
},
template: '<p>Welcome to {{ domain }}</p>'
}) Ci-dessus, le nom du composant s'appelle welcome-message. Votre composant peut porter le nom de votre choix. Mais il est important de noter que ce nom n'affecte aucune balise HTML car vous ne souhaitez pas le remplacer.
L'objet options passé au constructeur contient des données et des modèles. Lors de la création d'un composant, vos données doivent être une fonction, comme vu ci-dessus. Les données enregistrées doivent être renvoyées sous forme d'objet.
Sans aucune donnée à transmettre, transmettez un modèle comme celui-ci :
Vue.component('welcome-message', {
template: '<p>Welcome to Tutsplus</p>'
})Une fois terminé, vous pouvez le traiter comme un élément HTML normal en utilisant le nom transmis au constructeur. utilisé dans les applications. Il s'appelle ainsi : b96f265ddb2ff8b5c74c4b8864998c55 99483aea6b39271594c4a1f67cf42565.
Pour afficher le modèle plusieurs fois, vous pouvez appeler le composant autant de fois que nécessaire, comme indiqué ci-dessous.
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>
De cette façon, le message de bienvenue sera affiché quatre fois.
Stocker les données dans le composant
J'ai mentionné ci-dessus que les données doivent être une fonction et que les informations qu'elles contiennent doivent être renvoyées sous forme d'objet. Pourquoi est-ce ?
Lorsque les données renvoyées ne sont pas un objet, les composants utilisant ces données partagent la même source : les données partagées. Par conséquent, les modifications de données dans un composant affecteront un autre composant. Ce n'est pas la même chose lorsque les données sont renvoyées sous forme d'objet.
Il est important de voir comment cela fonctionne réellement. Examinons d’abord le cas où les données sont renvoyées sous forme d’objet.
<!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>Pouvez-vous deviner ce qui s'est passé ci-dessus ?
a deux composants, et les deux composants partagent la même source de données car les données ne sont pas renvoyées en tant qu'objet. Comment prouvez-vous que j'ai raison ? Lorsque vous consultez la page ci-dessus à partir d'un navigateur, vous verrez que les modifications apportées à un composant entraînent la modification des données d'un autre composant. Alors à quoi devrait-il ressembler ?
Comme ceci :
<!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>Les données ici sont renvoyées sous forme d'objet et les modifications apportées à un composant n'affecteront pas un autre composant. Cette fonction est réalisée pour un seul composant. Il est important de ne pas l'oublier lors de la création de votre application.
Création et utilisation de composants
En utilisant ce que nous avons appris jusqu'à présent, implémentons-le en démarrant un nouveau projet Vue.js à partir de zéro en utilisant vue -cli. Si vue-cli n'est pas installé sur votre machine, vous pouvez démarrer votre nouveau projet Vue.js en exécutant :
npm install -g vue-cli
Accédez à votre application :
vue init webpack vue-component-app
, installez les dépendances et exécutez votre serveur de développement à l'aide des commandes ci-dessous.
cd vue-component-app npm install npm run dev
Tout d'abord, vous allez renommer le composant HelloWorld qui a été créé lors de l'initialisation de l'application en Hello.vue. Vous enregistrerez ensuite ce composant en tant que composant global à utiliser dans votre application.
Votre composant Hello devrait donc ressembler à ceci.
#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>Vous avez le texte de bienvenue montrant le message de bienvenue et le nom passé en données. Lorsque vous cliquez sur le bouton situé sous le message de bienvenue, la méthode changeName est appelée. Le nom sera changé de Henry à Mark.
Pour utiliser ce composant globalement, il doit être enregistré. Pouvez-vous deviner où cela devrait être fait ? Si vous avez dit main.js, félicitations, vous avez la bonne réponse !
要注册一个组件，可以导入它，然后使用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允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!