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>

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

Logo

前往低代码交流专区

更多推荐