Vue1是一個流行的JavaScript框架，它使創建交互性Web應用程序變得更容易。Vue1的一個示例程序是ToDoList。ToDoList是一個Web應用程序，允許用戶創建任務列表并完成任務。在此文章中，我們將深入探討如何使用Vue1創建一個ToDoList。

首先，我們需要創建一個Vue實例。Vue實例是Vue應用程序的核心，其中包括應用程序的數據、方法和狀態。以下是創建Vue實例的代碼：

var app = new Vue({
el: '#app',
data: {
tasks: [
{ text: 'Buy groceries', done: false },
{ text: 'Clean the house', done: false },
{ text: 'Do laundry', done: false }
],
newTaskText: ''
},
methods: {
addTask: function () {
if (this.newTaskText.trim()) {
this.tasks.push({ text: this.newTaskText.trim(), done: false })
this.newTaskText = ''
}
},
removeTask: function (task) {
this.tasks.$remove(task)
}
}
})

在上面的代碼中，我們定義了一個名為“app”的Vue實例。該實例擁有“tasks”數組，該數組包含所有任務以及“newTaskText”變量，該變量用于存儲正在添加的新任務。此外，該實例定義了兩個方法：addTask和removeTask，這些方法用于添加和刪除任務。

下一步是創建HTML頁面。HTML頁面應該包含一個任務列表和一個添加任務的表單。當用戶提交表單時，我們將運行addTask方法以將新任務添加到任務列表中。以下是HTML代碼：

{{ task.text }}Delete
Add Task

在上面的代碼中，我們使用Vue指令來處理任務列表和任務添加表單。v-for指令用于迭代所有任務，并將每個任務顯示為列表項。v-bind:class指令用于根據任務完成狀態添加CSS類。v-on:click指令用于在點擊刪除按鈕時運行removeTask方法。v-on:submit.prevent指令用于在提交表單時防止頁面刷新。v-model指令用于將表單輸入與newTaskText變量綁定在一起，以便我們可以訪問用戶輸入的值。

我們還可以向ToDoList添加更多功能，例如任務過濾和本地存儲。Vue1提供了許多工具和功能來簡化這些任務，因此Vue1是創建各種Web應用程序的理想選擇。