vue todolist小案例

这是一个使用Vue.js实现的简单待办事项列表应用：
1. 首先，确保你已经安装了Vue.js。

如果没有，请参考官方文档进行安装。

2. 创建一个新的Vue项目：
```bash
vue create todolist-app
```
3. 进入项目目录并运行项目：
```bash
cd todolist-app
npm run serve
```
4. 在`src/components`目录下创建一个名为`TodoList.vue`的文件，并添加以下代码：
```html
<template>
<div>
<h1>待办事项列表</h1>
<input v-model="newTask" @keyup.enter="addTask" placeholder="请输入待办事项"> <ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="deleteTask(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTask: '',
tasks: []
};
},
methods: {
addTask() {
if (this.newTask.trim()) {
this.tasks.push(this.newTask);
this.newTask = '';
}
},
deleteTask(index) {
this.tasks.splice(index, 1);
}
}
};
</script>
```
5. 在`src/App.vue`文件中引入并使用`TodoList`组件：
```html
<template>
<div id="app">
<TodoList />
</div>
</template>
<script>
import TodoList from './components/TodoList.vue';
export default {
components: {
TodoList
}
};
</script>
```
现在，你可以在浏览器中访问`localhost:8080`查看并使用这个简单的待办事项列表应用。