今天繼續用小專案來練習，我想製作一個代辦事項清單，但覺得畫面只有一個代辦事項區有點無趣，所以打算增加其他區域並設置其他功能，下圖是目前預計的排版

中間放代辦事項，可以新增代辦事項，紀錄完成的事項，將完成事項打勾移除的功能等
左右兩區還在思考要放什麼，目前是想在右邊的區域放一些鼓勵的小圖片或句子，左邊想做可以記錄當天心得的留言區域，目前只有初步想法，或許後面還會有變動。

今天主要先完成大致切版的動作，在寫一點功能

• 版面劃分
  首先我們先將大區塊分出來
  在<template>區域規劃版面

<template>
  <div class= "container">
    <div class="box1"> </div>
    <div class="box2"> </div>
    <div class="box3"> </div>


  </div>
</template>

最外層套用container名稱的css樣式
其中包含三個區塊
分別套用box1、box2、box3的名稱樣式

接著到<style scoped>區塊寫好想要的屬性

<style scoped>
/* 主要版面 */
.container {
  width: 95%;
  height: 90vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20px 30px 30px 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  background: #94a2a4;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}


.box1{
   width: 30%;
   height: 90vh;
   background-color: #6fa290;
   border-radius: 12px;
}
.box2{
   width: 36%;
   height: 90vh;
   background-color: #43917f;
   border-radius: 12px;
}
.box3{
   width: 30%;
   height: 90vh;
   background-color: #135647;
   border-radius: 12px;
}

要注意的是container是三個box的父元件，他的屬性設定會影響三個box
解釋一下container的屬性
display: flex; 將容器設定為彈性盒子(flex container)，讓其中的子元素可以用Flexbox的方式排列。(Flexbox是一種CSS的布局模型)
flex-dirction: row; 設定主軸方向，定義為row表示子元素以橫向由左到右的方式排列，雖然就算不寫這項，預設好像也是橫向排列，但我想做個紀錄讓我後面回來檢查時知道自己在想甚麼
justify-content: space-around; 水平方向布局方式設定，space-around表示子元素平均分布，個元素間的間距相同，且左右側也有間距，是中間間距的一半。
justify-content 有多種排列方式，各位可以上網查詢，套用自己喜歡的方式。
我通常會先將各區域設定背景顏色background-color，這樣方便檢查各區域的分布或大小是否符合自己的預想
目前畫面長這樣

• 變數設定
  現在到<script setup>區域，先定義一個響應式變數，一個響應式陣列

<script setup>
import { ref } from 'vue'
  // 儲存代辦事項
const newTask = ref('') 
const tasks = ref([])
</script>

const newTask = ref('') 用來記錄新增事項(輸入框內的內容)，初始值是空字串
const tasks = ref([]) 用來記錄所有代辦事項，初始值是空陣列

• 建立功能
  建立新增代辦事項功能

// 新增代辦事項
function addTask() {
  if (newTask.value.trim() !== '') {
    tasks.value.push({ text: newTask.value, done: false })
    newTask.value = ''
  }
}

function addTask() 定義一個函式命名為addTask()，大括號內{ }寫主要功能
if (newTask.value.trim() !== '') newTask.value代表取newTask的值，.trim()則是移除字串兩端的空白字元， !== ''表示判斷輸入的是否為空字串，所以整段的用意就是，用if來判斷輸入框內的新增事項是否為空白字元或沒有內容，如果為否則可以進行下一步動作。
tasks.value.push({ text: newTask.value, done: false })
.push()將元素加到陣列尾端，這表示會將newTask的值加到tasks陣列
{ text: newTask.value, done: false }定義要加入陣列的物件
text 表示文字，讀取newTask.value值
done 布林值，判斷是否完成的依據，預設值是false

newTask.value = '' 將newTask.value 值設為空字串，就是將輸入框清空的意思

在box2區域加入新增代辦事項的功能

 <div class="box2">
      <h1>代辦事項清單</h1>


      <!-- 輸入框 -->
      <div class="input-box">
        <input v-model="newTask" placeholder="輸入新的代辦事項..." @keyup.enter="addTask" />
        <button @click="addTask">新增</button>
      </div>


    </div>

<input>是HTML的輸入框標籤，v-model="newTask" 利用雙向綁定，在輸入框打字時會自動更新newTask，且會顯示改變後的newTask
placeholder="輸入新的代辦事項..." 表示當當輸入框是空的時候，會顯示灰色提示字
@keyup.enter="addTask" 也可以寫成v-on keyup.enter="addTask" ，當使用者按下enter鍵時，執行addTask函式

<button @click="addTask">新增</button>建立一個按鈕
@click="addTask" 表示當使用者點擊該按鈕時，執行addTask函式

好的到這裡我們新建代辦事項的功能完成
我自己還有再新增或改一些樣式

.box2{
   width: 36%;
   height: 90vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: #43917f;
   border-radius: 12px;
}
.input-box {
  width: 90%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}


.input-box input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}


.input-box button {
  font-size: 15px;
  margin-left: 8px;
  padding: 10px 16px;
  border: none;
  background-color: #07544e;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}


.input-box button:hover {
  background-color: #33544d;
}

目前長這樣

好的今天先用到這，各位晚安，明天見~