Vue front-end implémente l'ajout, la suppression, la modification et la requête

Vue.js est un framework frontal populaire pour créer des applications monopage hautes performances. Cet article explique comment utiliser Vue.js pour implémenter les fonctions d'ajout, de suppression, de modification et de vérification.

1. Créez un framework de base avec Vue.js

Tout d'abord, nous devons installer Vue.js. Vous pouvez télécharger le fichier compressé de Vue.js depuis le site officiel ou référencer la bibliothèque Vue.js via CDN.

Créez un fichier HTML et importez la bibliothèque Vue.js. Ensuite, nous allons initialiser une instance Vue et définir une liste dans le modèle :

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3']
    }
  })
</script>

La directive v-for dans le modèle est utilisée pour parcourir chaque élément de la liste d'éléments. Parce que nous avons spécifié la valeur initiale des éléments lors de l'instanciation, la liste ci-dessus affichera ces trois éléments. Ceci est un exemple d'application Vue.js simple.

2. Implémentez la fonction d'ajout d'éléments

Tapez le code suivant :

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3'],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    }
  })
</script>

Dans le modèle, nous avons ajouté une zone de saisie de texte et un Bouton "Ajouter un élément" et liez la directive v-model à la propriété newItem dans data. Dans l'instance Vue, nous avons défini une méthode appelée addItem qui sera appelée lorsque l'utilisateur clique sur le bouton "Ajouter un élément" pour ajouter l'élément à la liste.

La valeur de la zone de saisie est enregistrée dans l'attribut newItem. Lorsque la méthode addItem est appelée, nous l'insérons dans la liste des éléments puis réinitialisons la valeur de l'attribut newItem. Enfin, Vue.js restitue automatiquement la liste et l'affiche dans le navigateur.

3. Implémentez la fonction de suppression d'éléments

Ensuite, nous implémenterons la fonction de suppression d'éléments. Nous devons ajouter un bouton pour supprimer chaque élément de la liste en un seul clic.
Tapez le code suivant :

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="(item, index) in items">
      {{ item }}
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3'],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = '';
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      }
    }
  })
</script>

Nous avons ajouté une méthode appelée RemoveItem et l'avons liée au bouton "Supprimer" dans la liste. Lorsque l'utilisateur clique sur le bouton "Supprimer", la méthode RemoveItem sera appelée et supprimera l'élément correspondant dans la liste. Ici, nous pouvons l'appeler avec le deuxième paramètre (index) pour supprimer un élément spécifique.

4. Implémentez la fonction de modification des éléments

Ensuite, nous implémenterons la fonction d'édition des éléments. Nous pouvons placer une zone de saisie dans chaque élément de la liste. Lorsque l'utilisateur clique sur la zone de saisie, cela deviendra un état d'édition, permettant à l'utilisateur de modifier le contenu du texte de l'élément. Tapez le code suivant :

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="(item, index) in items">
      <input v-model="item.text" v-show="!item.editing">
      <span v-show="item.editing">{{ item.text }}</span>
      <button @click="editItem(index)">{{ item.editing ? 'Save' : 'Edit' }}</button>
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { text: 'item 1', editing: false },
        { text: 'item 2', editing: false },
        { text: 'item 3', editing: false }
      ],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push({ text: this.newItem, editing: false });
        this.newItem = '';
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      },
      editItem: function(index) {
        var item = this.items[index];
        if (item.editing) {
          item.editing = false;
        } else {
          item.editing = true;
        }
      }
    }
  })
</script>

Nous avons ajouté une zone de saisie et deux boutons à chaque élément de la liste : un bouton d'édition et un bouton de suppression. Dans l'instance Vue, nous avons ajouté une méthode appelée editItem qui sera appelée lorsque l'utilisateur clique sur le bouton Modifier.

Avec cette méthode, nous pouvons définir le statut d'édition (édition) sur vrai ou faux. Si l'élément est en cours de modification, nous afficherons le contenu textuel de l'élément, sinon nous afficherons une zone de saisie pour permettre à l'utilisateur d'apporter des modifications.

Enfin, il nous suffit de réinitialiser la propriété d'édition sur false après avoir enregistré les modifications.

5. Résumé

Grâce à cet article, nous avons appris à utiliser le framework Vue.js pour implémenter une simple fonction d'ajout, de suppression, de modification et de vérification. L'utilisation de Vue.js peut aider les développeurs à créer rapidement des applications complexes d'une seule page et à rendre le développement plus efficace.

Vue.js possède de nombreuses autres fonctions et fonctionnalités que les développeurs peuvent explorer en profondeur et appliquer à leurs propres projets.

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!