[Vue projet combat]

Le combat de projet Vue peut inclure de nombreux aspects, tels que la création d'une simple application de liste de tâches, la création d'une plateforme de blogs, le développement d'un site Web de commerce électronique, etc. Ici, je prends une simple application de liste de tâches comme exemple à présenter.

Tout d'abord, créez un nouveau projet Vue à l'aide de Vue CLI dans votre répertoire de projet :

vue create todo-list

Entrez ensuite dans le répertoire du projet :

cd todo-list

Installez les bibliothèques et dépendances nécessaires :

npm install

Créez un TodoList.vuecomposant appelé pour afficher une liste de tâches. Dans ce composant, vous pouvez définir un tableau pour stocker les éléments à faire et les méthodes associées pour ajouter, supprimer et mettre à jour les éléments à faire.

App.vueIntroduisez le composant dans TodoList.vueet utilisez-le dans le modèle :

<template>
  <div id="app">
    <h1>Todo List</h1>
    <TodoList/>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>

Nous pouvons maintenant TodoList.vueimplémenter la fonctionnalité de la liste de tâches dans le composant. La méthode de mise en œuvre spécifique peut être déterminée en fonction des besoins. Voici un exemple :

<template>
  <div>
    <input v-model="newItem" placeholder="Add a new item">
    <button @click="addItem">Add</button>

    <ul>
      <li v-for="(item, index) in items" :key="index">
        {
   
   { item }}
        <button @click="deleteItem(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      items: []
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim() !== '') {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    }
  }
}
</script>

De cette façon, vous pouvez voir une simple application de liste de tâches dans le navigateur.