最近在學習vue，寫了一段時間的代碼，結果草稿丟了。這讓我倍感苦惱和煩躁。

這份草稿中，我嘗試使用vue來搭建一個簡單的任務切換應用。它是一個基于組件的單頁面應用，支持增加、刪除、編輯任務。以下是一段代碼片段，代表了其中一個組件：

<template>
<div class="task-list">
<h3>{{title}}</h3>
<ul>
<li v-for="task in tasks" :key="task.id">
<CompleteCheckBox :task="task" @toggleComplete="toggleComplete"></CompleteCheckBox>
<div class="task-content" :class="{ completed: task.completed }">
<p>{{task.description}}</p>
<div class="task-controls">
<button @click="editTask(task)">Edit</button>
<button @click="deleteTask(task)">Delete</button>
</div>
</div>
</li>
</ul>
<button @click="addTask">Add Task</button>
</div>
</template>

這段代碼中，我們定義了一個叫做TaskList的組件，它接受一個title和一個tasks數組作為props。我們使用v-for指令來循環渲染每一個任務，用CompleteCheckBox組件來表示是否完成任務，用task-controls控制編輯和刪除任務的操作。

在寫這段代碼時，我充滿了激情和信心。但是一旦草稿丟失，一切都消失殆盡。我不得不重新開始，浪費了很多寶貴的時間和努力。