用vue制作todolist

好的，下面是用Vue制作todolist的步骤：

1. 创建Vue实例

首先需要在HTML文件中引入Vue.js库，然后创建一个Vue实例，代码如下：

<div id="app">
  <input v-model="newTodo" @keyup.enter="addTodo">
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
      <button @click="removeTodo(index)">X</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push(this.newTodo.trim());
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
});
</script>

2. 添加数据和方法

在Vue实例中，需要定义数据和方法。数据包括一个用于输入新任务的变量 `newTodo` 和一个用于存储所有任务的数组 `todos`。方法包括添加任务的 `addTodo` 和删除任务的 `removeTodo`。

data: {
  newTodo: '',
  todos: []
},
methods: {
  addTodo() {
    if (this.newTodo.trim() !== '') {
      this.todos.push(this.newTodo.trim());
      this.newTodo = '';
    }
  },
  removeTodo(index) {
    this.todos.splice(index, 1);
  }
}

3. 绑定数据和事件

在HTML文件中，需要使用Vue的指令来绑定数据和事件。使用 `v-model` 指令将输入框和 `newTodo` 变量绑定在一起，使用 `v-for` 指令将任务列表和 `todos` 数组绑定在一起，使用 `@keyup.enter` 指令监听回车键，使用 `@click` 指令监听删除按钮的点击事件。

<input v-model="newTodo" @keyup.enter="addTodo">
<ul>
  <li v-for="(todo, index) in todos" :key="index">
    {{ todo }}
    <button @click="removeTodo(index)">X</button>
  </li>
</ul>

4. 样式美化

最后，可以对todolist进行样式美化，使其更加美观。

<style>
#app {
  font-family: Arial, sans-serif;
  margin: 50px auto;
  max-width: 600px;
}
input[type="text"] {
  padding: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
button {
  background-color: #ff4d4d;
  color: #fff;
  border: none;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  cursor: pointer;
}
</style>

完成以上四个步骤后，就可以得到一个简单的todolist应用。