const app = new Vue({ el: "#todoapp", data: { // 总数据 todoList: ["四级考试", "前端大作业", "离散数学考试"], // 输入的内容 inputValue: "", }, // 方法 methods: { // 增加任务 add() { this.todoList.push(this.inputValue); }, // 删除任务 remove(index) { this.todoList.splice(index, 1); }, clear() { this.todoList = []; } } });

这段代码是一个基于 Vue.js 框架的待办事项列表应用程序，它包含以下几个部分：

1. el: "#todoapp"：指定 Vue 实例要挂载的 HTML 元素的选择器。
2. data：定义了该应用程序的总数据，包括待办事项列表(todoList)和输入框中的内容(inputValue)。
3. methods：定义了该应用程序的方法，包括添加任务(add)、删除任务(remove)和清空任务列表(clear)。

在 HTML 中，可以通过绑定 Vue 实例的属性和方法来实现与用户的交互，例如：

<div id="todoapp">
  <input type="text" v-model="inputValue" />
  <button @click="add">添加</button>
  <ul>
    <li v-for="(item, index) in todoList" :key="index">
      {{ item }}
      <button @click="remove(index)">删除</button>
    </li>
  </ul>
  <button @click="clear">清空</button>
</div>

在这个 HTML 中，v-model="inputValue" 表示将输入框中的内容与 Vue 实例中的 inputValue 属性进行双向绑定，即输入框中的内容发生变化时，inputValue 属性也会随之改变；@click="add" 表示当用户点击“添加”按钮时，调用 Vue 实例中的 add 方法；v-for="(item, index) in todoList" 表示遍历 todoList 数组中的每一个元素，将每个元素显示为一个列表项；:key="index" 表示为每个列表项指定一个唯一的键值，以便 Vue.js 进行优化；@click="remove(index)" 表示当用户点击“删除”按钮时，调用 Vue 实例中的 remove 方法，并传入该列表项的索引值作为参数；@click="clear" 表示当用户点击“清空”按钮时，调用 Vue 实例中的 clear 方法。