Maison > Article > interface Web > Vue.js Learning 4 : bases des composants Vue
Vue.js Learning 4 : bases des composants Vue
- coldplay.xixiavant
- 2020-10-16 14:43:372283parcourir
La colonne
Tutoriel Vue.js vous présente aujourd'hui les connaissances de base des composants Vue.
Jusqu'à présent, les notes de cette série ont montré des applications Web extrêmement simples d'une seule page, souvent avec seulement quelques éléments interactifs simples sur la page. Cependant, dans les environnements de production réels, l'interface utilisateur des applications Web est souvent composée de plusieurs pages complexes. À ce stade, nous devons commencer à prêter attention à la réutilisabilité du code. Pour résoudre ce problème, la solution proposée par le framework Vue.js consiste d'abord à diviser les éléments de l'interface utilisateur en composants indépendants selon différentes fonctions, telles que comme colonne de navigation, tableau d'affichage, formulaire de données, formulaire d'inscription utilisateur, interface de connexion utilisateur, etc. De cette façon, dans nos travaux ultérieurs, nous pourrons combiner ces composants dans diverses applications spécifiques selon les besoins, tout comme jouer avec des jouets Lego. Dans l’ensemble, le système de composants est un concept important que nous devons maîtriser lors de l’apprentissage du framework Vue.js. Ci-dessous, cette note écrira une série d'exemples expérimentaux pour découvrir les méthodes de base de création et d'utilisation de composants dans le framework Vue.js.
Avant le début de toutes les expériences, je dois créer un répertoire nommé code dans le répertoire 00_test pour stocker la prochaine série de projets expérimentaux, car ces projets ne peuvent être utilisés que pour découvrir comment construire et utiliser Composants Vue, il n'a pas de fonctions d'application réelles, je lui ai donc donné le numéro 00. Alors commençons la première expérience ! Pour ce faire, je dois continuer à créer un autre répertoire expérimental nommé code/00_test dans le répertoire component_1, et exécuter la commande npm install vue dans ce répertoire pour installer le framework Vue.js. Enfin, il me suffit de créer un fichier nommé code/00_test/component_1 dans le répertoire index.htm et de saisir le code suivant :
<!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>
Dans l'expérience ci-dessus, j'ai créé et enregistré chacun de deux manières différentes say-hello et welcome-you deux composantes. Ensuite, nous utiliserons ces deux composants pour introduire l'utilisation de ces deux composants. Le premier est le composant say-hello, qui est créé et enregistré dans l'application en appelant la méthode Vue.component(). Les composants créés à l'aide de cette méthode sont généralement appelés « composants globaux » et nous devons les fournir lors de son appel.
Le premier paramètre doit être un objet chaîne utilisé pour spécifier le nom du composant, qui est également l'élément de balise personnalisé que nous souhaitons utiliser dans le document HTML puisque le code HTML ne l'est pas. sensible à la casse, je vous suggère personnellement d'essayer d'utiliser des lettres minuscules lorsque vous nommez les composants, et vous pouvez utiliser des délimiteurs comme
-pour séparer les mots.-
Le deuxième paramètre doit être un objet JavaScript, utilisé pour définir divers paramètres spécifiques du composant. Les trois paramètres les plus basiques suivants sont définis ici :
-
template: Ce paramètre est un objet chaîne utilisé pour spécifier le code du modèle HTML du composant. Il est à noter que ce code correspond à The. L'objet DOM doit avoir un et un seul nœud racine. Cet objet sera représenté par la balise personnalisée correspondant au composant dans le document HTML final, en l'occurrence<say-hello>. -
props: Ce paramètre est un tableau de chaînes. Chaque élément du tableau est un attribut de la balise personnalisée correspondant au composant. Les utilisateurs du composant peuvent passer la commandev-bindà Cette propriété est liée. à certaines données afin de transmettre les données dans le composant. Par exemple, ici, j'ai utilisé la directive<say-hello>dans la balisev-bindpour lier l'attributwhode la balise aux donnéeswhode l'objet instance Vue, et je l'ai transmis au composantsay-hello. -
data: Ce paramètre est une fonction utilisée pour définir les données du composant lui-même, commeyouici, je lui ai attribué leswhodonnées obtenues de l'appelant. Pour ce dernier, on peut utiliser la référencethispour l'obtenir.
Bien sûr, en plus des trois paramètres de base ci-dessus, nous pouvons également définir davantage de paramètres pour le composant, tels que les événements personnalisés et leurs fonctions de traitement, etc., que j'écrirai dans la suite. programme Montré dans l'expérience.
-
下面，我们再来看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>
在上述 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'
}
});
在上述 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;
在这部分代码中，我先定义了一个局部组件，然后再使用 ES6 新增的export default语句将其导出为模块。当然，考虑到各种 Web 浏览器对 ES6 规范的实际支持情况，以及 Vue.js 框架本身使用的是 CommonJS 模块规范，所以上述实验依然可能不是编写 Vue.js 项目的最佳方式，其中可能还需要配置 babel 和 webpack 这样的转译和构建工具来辅助。在下一篇笔记中，我就来记录如何使用这些工具来构建具体的 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!