【Vue项目实战】

Vue项目实战可以包括很多方面，比如构建一个简单的待办事项列表应用、创建一个博客平台、开发一个电子商务网站等等。这里我以一个简单的待办事项列表应用为例进行介绍。

首先，在你的项目目录下使用Vue CLI创建一个新的Vue项目：

vue create todo-list

然后进入到项目目录中：

cd todo-list

安装必要的库和依赖：

npm install

创建一个名为TodoList.vue的组件，用于显示待办事项列表。在该组件中，你可以定义一个数组用来存储待办事项，以及相关的方法来添加、删除和更新待办事项。

在App.vue中引入TodoList.vue组件，并在模板中使用它：

<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>

现在我们可以在TodoList.vue组件中实现待办事项列表的功能。具体实现方式可以根据需求来定，以下是一个示例：

<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>

这样，你就可以在浏览器中看到一个简单的待办事项列表应用了。

猜你喜欢