Vue.js 入门教程：构建简单的待办事项列表

Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。它易于学习和使用，并且拥有强大的功能。在本教程中，我们将使用 Vue.js 创建一个简单的待办事项列表应用程序，帮助你快速入门 Vue.js 开发。

代码示例

<!DOCTYPE html>
<html>
  <head>
    <title>Vue Todo List</title>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  </head>
  <body>
    <div id='app'>
      <h1>Todo List</h1>
      <input v-model='newTodo' placeholder='Add new todo' />
      <button @click='addTodo'>Add</button>
      <ul>
        <li v-for='(todo, index) in todos' :key='index'>
          {{ todo }}
          <button @click='removeTodo(index)'>Remove</button>
        </li>
      </ul>
    </div>

    <script>
      // 创建一个Vue实例
      new Vue({
        el: '#app',
        data() {
          return {
            todos: [],
            newTodo: ''
          }
        },
        methods: {
          addTodo() {
            if (this.newTodo !== '') {
              this.todos.push(this.newTodo);
              this.newTodo = '';
            }
          },
          removeTodo(index) {
            this.todos.splice(index, 1);
          }
        }
      });
    </script>
  </body>
</html>

代码解读

引入 Vue.js 库：在 HTML 的 <head> 部分中，我们引入了 Vue.js 库。
创建 Vue 实例：我们使用 new Vue() 创建了一个 Vue 实例，并指定了应用的根元素 #app。
数据定义：在 data 属性中，我们定义了两个数据：todos 用于存储待办事项列表，newTodo 用于存储新的待办事项。
方法定义：在 methods 属性中，我们定义了两个方法：addTodo 用于添加新的待办事项，removeTodo 用于删除待办事项。
双向绑定：v-model 指令实现了双向绑定，将输入框的值绑定到 newTodo 属性上。
循环遍历：v-for 指令用于循环遍历 todos 数组，并动态生成任务列表。

总结

本教程展示了使用 Vue.js 构建简单待办事项列表的基本步骤。你可以根据自己的需求和 Vue.js 的文档进一步学习和扩展，构建更复杂和功能强大的应用程序。