写vue

好的，以下是一个简单的Vue组件示例代码，用于展示一个待办事项列表：

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodo" placeholder="Add a new task">
      <button>Add</button>
    </form>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.done" @change="updateTodo">
        <span :class="{ done: todo.done }">{{ todo.title }}</span>
        <button @click="deleteTodo">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { title: 'Learn Vue', done: false },
        { title: 'Build an app', done: false },
        { title: 'Deploy to production', done: false }
      ]
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ title: this.newTodo, done: false })
      this.newTodo = ''
    },
    updateTodo() {
      // Implement update logic
    },
    deleteTodo() {
      // Implement delete logic
    }
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

该组件包括一个待办事项列表，用户可以添加新的任务，标记已完成的任务，删除任务等。在Vue中，数据和视图是响应式的，当数据发生变化时，视图也会自动更新。在该组件中，数据存储在组件的 `data` 对象中，通过 `v-model` 指令绑定到视图上，即当用户在表单中输入文本或勾选复选框时，数据会被更新。此外，该组件也涉及到了一些事件处理方法，例如添加任务、标记任务已完成、删除任务等，这些方法可以在 `methods` 对象中定义，并通过事件绑定到视图上。

这只是一个简单的示例，Vue的功能和特性远不止于此。如果您想深入了解Vue的用法和技巧，可以参考Vue的官方文档或其他相关教程。