Vue.js Learning 4 : bases des composants Vue
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment Vue implémente-t-il la réutilisation et l'extension des composants ?
Jun 27, 2023 am 10:22 AM
Avec le développement continu de la technologie front-end, Vue est devenu l'un des frameworks les plus populaires en matière de développement front-end. Dans Vue, les composants sont l'un des concepts de base, qui peuvent diviser les pages en parties plus petites et plus faciles à gérer, améliorant ainsi l'efficacité du développement et la réutilisabilité du code. Cet article se concentrera sur la façon dont Vue implémente la réutilisation et l'extension des composants. 1. Mixins de réutilisation des composants Vue Les mixins sont un moyen de partager les options de composants dans Vue. Les mixins permettent de combiner les options de composants de plusieurs composants en un seul objet pour un maximum
Communication des composants Vue : utilisez $destroy pour la communication de destruction de composants
Jul 09, 2023 pm 07:52 PM
Communication entre composants Vue : utilisez $destroy pour la communication de destruction de composants Dans le développement de Vue, la communication entre composants est un aspect très important. Vue propose diverses façons d'implémenter la communication entre les composants, tels que les accessoires, l'émission, la vuex, etc. Cet article présentera une autre méthode de communication entre composants : utiliser $destroy pour la communication de destruction de composants. Dans Vue, chaque composant a un cycle de vie, qui comprend une série de fonctions hook de cycle de vie. La destruction de composants en fait également partie. Vue fournit un $de.
Pratique Vue : développement de composants de sélecteur de date
Nov 24, 2023 am 09:03 AM
Vue Practical Combat : Développement de composants de sélecteur de dates Introduction : Le sélecteur de dates est un composant souvent utilisé dans le développement quotidien. Il peut facilement sélectionner des dates et fournit diverses options de configuration. Cet article expliquera comment utiliser le framework Vue pour développer un composant de sélecteur de date simple et fournira des exemples de code spécifiques. 1. Analyse des besoins Avant de commencer le développement, nous devons effectuer une analyse des besoins pour clarifier les fonctions et les caractéristiques des composants. Selon les fonctions communes des composants du sélecteur de date, nous devons implémenter les points de fonction suivants : Fonctions de base : capables de sélectionner des dates et
Communication des composants Vue : utilisation de la montre et calcul pour la surveillance des données
Jul 10, 2023 am 09:21 AM
Communication des composants Vue : utilisation de la surveillance et du calcul pour la surveillance des données Vue.js est un framework JavaScript populaire, et son idée principale est la composantisation. Dans une application Vue, les données doivent être transférées et communiquées entre différents composants. Dans cet article, nous présenterons comment utiliser la montre et le calcul de Vue pour surveiller et répondre aux données. watch Dans Vue, watch est une option qui peut être utilisée pour surveiller les modifications dans une ou plusieurs propriétés.
Notes de développement de Vue : Comment gérer des structures de données et des algorithmes complexes
Nov 22, 2023 am 08:08 AM
Dans le développement de Vue, nous rencontrons souvent des situations dans lesquelles nous traitons de structures de données et d'algorithmes complexes. Ces problèmes peuvent impliquer un grand nombre d'opérations de données, la synchronisation des données, l'optimisation des performances, etc. Cet article présentera quelques considérations et techniques pour gérer des structures de données et des algorithmes complexes afin d'aider les développeurs à mieux relever ces défis. 1. Sélection des structures de données Lorsqu'il s'agit de structures de données et d'algorithmes complexes, il est très important de choisir des structures de données appropriées. Vue fournit une multitude de structures et de méthodes de données, et les développeurs peuvent choisir la structure de données appropriée en fonction des besoins réels. numéros couramment utilisés
Comment utiliser des bibliothèques tierces dans les projets Vue
Oct 15, 2023 pm 04:10 PM
Vue est un framework JavaScript populaire qui fournit une multitude d'outils et de fonctionnalités pour nous aider à créer des applications Web modernes. Bien que Vue elle-même fournisse déjà de nombreuses fonctions pratiques, nous pouvons parfois avoir besoin d'utiliser des bibliothèques tierces pour étendre les capacités de Vue. Cet article expliquera comment utiliser des bibliothèques tierces dans les projets Vue et fournira des exemples de code spécifiques. 1. Introduire des bibliothèques tierces La première étape pour utiliser des bibliothèques tierces dans un projet Vue est de les introduire. Nous pouvons le présenter des manières suivantes
Développement de composants Vue : méthode d'implémentation du composant de page à onglet
Nov 24, 2023 am 08:41 AM
Développement de composants Vue : méthode d'implémentation du composant Tab Dans les applications Web modernes, la page à onglet (Tab) est un composant d'interface utilisateur largement utilisé. Le composant Tab peut afficher plusieurs contenus associés sur une seule page et les changer en cliquant sur l'onglet. Dans cet article, nous présenterons comment utiliser Vue.js pour implémenter un composant d'onglet simple et fournirons des exemples de code détaillés. La structure du composant onglet Vue Le composant onglet se compose généralement de deux parties : Onglet et Panneau. Les étiquettes sont utilisées pour identifier les surfaces
Communication des composants Vue : utilisation de Vuex pour la communication de gestion d'état
Jul 09, 2023 am 10:16 AM
Communication entre les composants Vue : Utilisation de Vuex pour la communication de gestion d'état Introduction : Dans le développement de Vue, la communication entre les composants est un problème clé. Vue propose diverses façons d'implémenter la communication entre composants, parmi lesquelles l'utilisation de Vuex pour la gestion des états est une méthode courante. Cet article expliquera comment utiliser vuex pour la communication entre composants et fournira des exemples de code pour aider les lecteurs à mieux comprendre. 1. Qu'est-ce que vuexVuex est la bibliothèque officielle de gestion d'état de Vue.js, qui peut réaliser la gestion globale de l'état et la communication entre les composants. Vue
