使用vue js 3创建待办事项列表

Vue.js是一种流行的JavaScript框架，用于构建用户界面。它具有简单易学、灵活性强、性能优越等特点，因此被广泛应用于前端开发中。

待办事项列表是一种常见的任务管理工具，用于记录和跟踪待完成的任务。使用Vue.js 3可以轻松创建一个动态的待办事项列表。

首先，需要安装Vue.js 3。可以通过以下方式在项目中引入Vue.js 3：

<script src="https://unpkg.com/vue@next"></script>

接下来，创建一个Vue实例，并定义待办事项列表的数据和方法：

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

在HTML中，使用Vue指令绑定数据和方法到DOM元素上：

<div id="app">
  <input v-model="newTodo" type="text" placeholder="输入待办事项">
  <button @click="addTodo">添加</button>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
      <button @click="removeTodo(index)">删除</button>
    </li>
  </ul>
</div>

最后，将Vue实例挂载到一个DOM元素上：