Maison >interface Web >Voir.js >Premiers pas avec VUE3 pour les débutants : utilisation des composants Vue.js pour créer des tables dynamiques

Premiers pas avec VUE3 pour les débutants : utilisation des composants Vue.js pour créer des tables dynamiques

PHPzoriginal: 2023-06-15 16:38:132030parcourir

Vue.js est un framework JavaScript frontal dont la bibliothèque principale se concentre sur la couche de vue. En même temps, il s'agit également d'un cadre progressif pour créer des interfaces utilisateur qui peuvent être mélangées avec d'autres bibliothèques ou des projets existants. Vue.js sépare l'état d'exécution de l'application de la représentation visuelle de l'état, aidant ainsi les développeurs à gérer et à mettre à jour l'interface utilisateur plus facilement.

Dans cet article, nous présenterons les composants Vue.js et leur application dans la création de tables dynamiques.

Les composants Vue.js sont des blocs de code réutilisables et autonomes qui peuvent être utilisés pour exprimer une seule fonctionnalité, un élément ou une zone de votre application. Dans Vue.js, le concept de composants est incarné dans les instances Vue, où chaque instance est un composant. Considérez un composant comme un élément personnalisé contenant ses propres options et méthodes de cycle de vie.

Afin de créer un composant Vue.js, vous pouvez utiliser la méthode Vue.component(), qui reçoit deux paramètres. Le premier paramètre est le nom du composant et le deuxième paramètre est l'objet du composant, qui contient le modèle HTML de l'élément, les propriétés calculées, les méthodes et d'autres options.

Dans l'exemple ci-dessous, nous allons créer un composant Vue.js appelé "dynamic-table" qui rendra une table dynamique :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <dynamic-table></dynamic-table>
    </div>

    <script>
        Vue.component('dynamic-table', {
            data: function() {
                return {
                    tableData: [
                        { id: 1, name: '张三', age: 20 },
                        { id: 2, name: '李四', age: 25 },
                        { id: 3, name: '王五', age: 30 },
                        { id: 4, name: '赵六', age: 35 }
                    ],
                    headings: ['编号', '姓名', '年龄']
                }
            },
            template: `
                <table>
                    <thead>
                        <tr>
                            <th v-for="heading in headings">{{ heading }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="data in tableData">
                            <td>{{ data.id }}</td>
                            <td>{{ data.name }}</td>
                            <td>{{ data.age }}</td>
                        </tr>
                    </tbody>
                </table>
            `
        })

        var app = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

Dans cet exemple, nous l'avons créé en utilisant la méthode Vue.component() Un composant nommé " table-dynamique". Dans l'attribut data du composant, nous définissons les données (tableData) et les en-têtes (headings) du tableau dynamique. Nous utilisons la syntaxe de modèle de Vue pour définir le modèle HTML du tableau dans l'attribut template et utilisons la directive v-for pour générer des lignes et des colonnes de tableau dynamiques.

Lorsque le composant est rendu, nous utilisons le composant enregistré avec la méthode Vue.component() dans l'instance Vue afin qu'il puisse être utilisé sur la page. Si vous souhaitez utiliser le composant "dynamic-table" sur la page, il vous suffit d'utiliser l'élément personnalisé de la table dynamique, qui est 73d601c6a7c14b1e13dee41c258da8f8c827662688a4c3a3cc8d8e08f83fc0df.

Grâce aux exemples ci-dessus, nous avons appris à utiliser les composants Vue.js pour créer des tables dynamiques de base. Dans les projets réels, des fonctions de table plus complexes peuvent être implémentées en définissant davantage de propriétés, de méthodes et d'événements calculés. Avec l'aide de Vue.js, la création de tables dynamiques devient plus simple et plus pratique.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Un guide de développement rapide indispensable pour les débutants de VUE3Article suivant：Un guide de développement rapide indispensable pour les débutants de VUE3

Articles Liés

Voir plus