新手如何做網站運營搜一搜
1
2.1 案例——學習計劃表
2.1.1 準備工作
在開發(fā)“學習計劃表”案例之前，需要先完成一些準備工作，具體步驟如下。
① 打開命令提示符，切換到 D:\vue\chapter02 目錄，在該目錄下執(zhí)行如下命令，創(chuàng)建
項目。
npm create vite@4.1.0 learning_schedule -- --template vue
項目創(chuàng)建完成后，執(zhí)行如下命令進入項目目錄，啟動項目。
cd learning_schedule
npm install
npm run dev
項目啟動后，可以使用 URL 地址 http://127.0.0.1:5173/ 進行訪問。
② 使用 VS Code 編輯器打開 D:\vue\chapter02\learning_schedule 目錄。
③ 將 src\style.css 文件中的樣式代碼全部刪除，從而避免項目創(chuàng)建時自帶的樣式代碼
影響本案例的實現效果。
④ 打開 D:\vue\chapter02\ learning_schedule 目錄，找到 index.html 文件。在文件中引
入 BootStrap 樣式文件，具體代碼如下。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 ……（原有代碼）
5 <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.c
ss" rel="stylesheet">
6 </head>
7 </html>
上述代碼中，第 5 行代碼引入 Bootstrap 的 CSS 文件，引用后即可使用 Bootstrap 快速
開發(fā)響應式網頁，使用全局 CSS 樣式美化標簽。
⑤ 修改 src\App.vue 文件中的默認內容，具體代碼如下。
1 <template>
2 學習計劃表
3 </template>
至此，“學習計劃表”案例準備工作已完成。 2
2.1.2 渲染表格區(qū)域數據
接下來正式進入“學習計劃表”案例的開發(fā)。在 App 組件中編寫表格區(qū)域的頁面結
構和樣式，并在頁面上渲染表格數據，具體實現步驟如下。
① 在 <script setup> 標簽中定義渲染表格所需的數據，具體代碼如下。
1 <script setup>
2 import { ref } from 'vue'
3 const list = ref([
4 {
5 id: '1',
6 subject: 'Vue.js 前端實戰(zhàn)開發(fā) ',
7 content: ' 學習指令，例如 v-if 、 v-for 、 v-model 等 ',
8 place: ' 自習室 ',
9 status: false,
10 },
11 ])
12 </script>
上述代碼中， list 數組表示渲染表格區(qū)域所需的數據， id 屬性表示序號， subject 屬性
表示學習科目， content 屬性表示學習內容， place 屬性表示學習地點， status 屬性表示學
習計劃的完成狀態(tài)，若屬性值為 false ，表示“未完成”，若屬性值為 true 表示“已完
成”。
② 根據 Bootstrap 文檔找到 Tables ，根據實際需要合適的樣式，本案例中表格的結
構樣式具體如下。
1 <template>
2 <table class="table table-striped table-hover table-bordered">
3 <thead>
4 <tr>
5 <th scope="col"> 序號 </th>
6 <th scope="col"> 學習科目 </th>
7 <th scope="col"> 學習內容 </th>
8 <th scope="col"> 學習地點 </th>
9 <th scope="col"> 完成狀態(tài) </th>
10 <th scope="col"> 操作 </th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr> 3
15 <td> 序號 </td>
16 <td> 學習科目 </td>
17 <td> 學習內容 </td>
18 <td> 學習地點 </td>
19 <td> 完成狀態(tài) </td>
20 <td> 操作 </td>
21 </tr>
22 </tbody>
23 </table>
24 </template>
保存上述代碼后，在瀏覽器中打開 http://127.0.0.1:5173/ ，初始頁面如圖 2-1 所示。
圖 2-1
初始頁面
③ 接下來通過 v-for 指令循環(huán)渲染表格行的數據，修改 <tbody> 標簽中的代碼，具
體如下。
1 <tbody>
2 <tr v-for="item in list" :key="item.id" >
3 <td>{{ item.id }}</td>
4 <td>{{ item.subject }}</td>
5 <td>{{ item.content }}</td>
6 <td>{{ item.place }}</td>
7 <td>
8 <div class="form-check form-switch">
9 <input class="form-check-input" type="checkbox" role="switch"
id="flexSwitchCheckDefault" v-model="item.status" />
10 <label class="form-check-label" for="flexSwitchCheckDefault" v
if="item.status"> 已完成 </label>
11 <label class="form-check-label" for="flexSwitchCheckDefault" v
else> 未完成 </label>
12 </div>
13 </td>
14 <td>
15 <a href="javascript:;"> 刪除 </a> 4
16 </td>
17 </tr>
18 </tbody>
上述代碼中，第 2~17 行代碼通過 v-for 指令渲染表格行，將 list 數組中的數據渲染到
頁面上，每項必須提供一個唯一 key 值；第 3~6 行代碼將列表項中序號、學習科目、學
習內容、學習地點通過 Mustache 語法渲染到頁面上；第 7~13 行代碼將表格行渲染為
switch 開關效果，其中，第 8 行代碼將 <input> 標簽渲染為開關的效果，通過 v-model 指令
綁定綁定 data 中的 list 數組中每個對象的 status 屬性，第 10~11 行代碼通過 v-if 、 v-else
條件渲染指令根據 status 屬性的屬性值渲染“已完成”或“未完成”的 <label> 標簽；第
15 行代碼定義了 <a> 標簽，通過單擊刪除字段，即可將該行學習計劃刪除。
保存上述代碼后，在瀏覽器中打開 http://127.0.0.1:5173/ ，渲染表格數據的頁面效果
如圖 2-2 所示。
圖 2-2
渲染表格數據的頁面效果
從圖 2-2 中可以看出，學習計劃列表中的數據被成功渲染。
至此，學習計劃表渲染表格區(qū)域數據已實現。
2.1.3 實現學習計劃的刪除功能
在單擊表格行最后一列“刪除”時，可以對整行的學習計劃進行刪除操作。在實現
該功能時，在單擊“刪除”時，傳遞該行數據所對應的 id 屬性，通過調用數組中的
filter() 方法實現數據的過濾。在刪除學習計劃時，如果完成狀態(tài)為“未完成”時禁止刪
除，完成狀態(tài)為“已刪除”時該學習計劃可以進行刪除操作。實現學習計劃刪除功能的
具體步驟如下。
① 修改 <a> 標簽，添加單擊事件，具體代碼如下。
<a href="javascript:;" @click="remove(item.id) "> 刪除 </a>
上述代碼中，加粗代碼為新增代碼，為 <a> 標簽綁定單擊事件，并傳遞參數 id 。
② 在 <script setup> 標簽中編寫 remove() 方法，實現學習計劃的刪除，具體代碼如
下。
1 let remove = id => {
2 list.value = list.value.filter(item => item.id !== id)
3 } 5
上述代碼中，第 2 行代碼通過調用 filter() 方法創(chuàng)建一個新數組，新數組為通過檢查指
定 list 數組中符合條件的所有元素。
③ 修改 <a> 標簽，在單擊“刪除”時傳遞該學習計劃的完成狀態(tài)，具體代碼如下。
<a href="javascript:;" @click="remove(item.id, item.status )"> 刪除 </a>
④ 修改 remove() 方法，實現對學習計劃完成狀態(tài)的判斷，具體代碼如下。
1 let remove = (id, status ) => {
2 if (status) {
3 list.value = list.value.filter(item => item.id !== id)
4 } else {
5 alert(' 請完成該學習計劃后再進行刪除操作！ ')
6 }
7 }
上述代碼中，通過 if 進行判斷，若 status 為 true ，則執(zhí)行第 3 行代碼進行刪除操作，
否則執(zhí)行第 5 行代碼，彈出警告。
保存上述代碼后，在瀏覽器中打開 http://127.0.0.1:5173/ 進行測試。
至此，學習計劃表的刪除功能已實現。
2.1.4 實現學習計劃的添加功能
接下來實現添加學習計劃的功能，學生可以自主填寫學習科目、學習內容和學習地
點。該功能通過表單來進行實現，在單擊“添加”按鈕時實現表單中所有信息的提交，
進行添加學習計劃的操作。實現學習計劃的添加功能具體實現步驟如下。
① 首先在 <script setup> 標簽中定義頁面所需的數據，具體代碼如下。
1 let subject = ref('')
2 let content = ref('')
3 let nextId = ref('')
4 let selectedOption = ref(' 自習室 ')
5 let options = ref([
6 { placeCode: 0, place: ' 自習室 ', },
7 { placeCode: 1, place: ' 圖書館 ', },
8 { placeCode: 2, place: ' 宿舍 ', },
9 ])
上述代碼中，第 1 行代碼定義了 subject ，表示學習科目；第 2 行代碼定義了 content ，
表示學習內容；第 3 行代碼定義了 nextId ，表示新添加數據的 id ；第 4 行代碼定義了默認
選中的學習地點；第 5~9 行代碼定義了 options 數組，表示學習地點，其中 placeCode 屬性
表示地點編號， place 屬性表示地點名稱。
② 卡片區(qū)域的整體頁面結構，具體代碼如下。 6
1 <template>
2 <div class="card">
3 <!-- 標題區(qū)域 -->
4 <div class="card-header"> 學習計劃表 </div>
5 <!-- 提交區(qū)域 -->
6 <div class="card-body">
7 <form>
8 <div class="row g-4">
9 <!-- 學習科目 -->
10 <div class="col-auto"></div>
11 <!-- 學習任務 -->
12 <div class="col-auto"></div>
13 <!-- 學習地點 -->
14 <div class="col-auto"></div>
15 <!-- 添加按鈕 -->
16 <div class="col-auto">
17 <button type="submit" class="btn btn-primary"> 添加 </button>
18 </div>
19 </div>
20 </form>
21 </div>
22 </div>
23 <table class="table table-striped table-hover table-bordered">
24 ……（原有代碼）
25 </table>
26 </template>
上述代碼中，第 2~22 行代碼為新增代碼，表示卡片區(qū)域。第 4 行代碼定義了標題區(qū)
域，名稱為“學習計劃表”，第 7~20 行代碼定義了表單區(qū)域，實現學習計劃的添加功
能。第 10 、 12 、 14 行代碼分別定義了學習科目、學習任務、學習地點區(qū)域，這 3 個區(qū)域
的實現在后續(xù)步驟中進行講解。第 16~18 行代碼中，定義了“添加”按鈕， type 類型為
submit ，當單擊該按鈕時會觸發(fā) <form> 標簽的 submit 事件提交表單信息。
③ 添加卡片區(qū)域中學習科目區(qū)域的頁面結構，具體代碼如下。
1 <div class="col-auto">
2 <div class="input-group mb-3">
3 <span class="input-group-text" id="basic-addon1"> 學習科目 </span>
4 <input type="text" class="form-control" placeholder=" 請輸入學習科目 "
v-model.trim="subject" />
5 </div> 7
6 </div>
上述代碼中，第 2~5 行代碼定義了學習科目區(qū)域，通過 <input> 標簽定義的文本框可
以輸入學習科目，通過 v-model 指令，將 <input> 標簽與 subject 實現數據的雙向綁定，即
當更改文本框中的值時 subject 的值更改。同時為 v-model 指令添加了 trim 修飾符，用于
自動過濾用戶輸入的首尾空白字符。
④ 添加卡片區(qū)域中學習任務區(qū)域的頁面結構，具體代碼如下。
1 <div class="col-auto">
2 <div class="input-group mb-3">
3 <span class="input-group-text" id="basic-addon1"> 學習內容 </span>
4 <textarea class="form-control" v-model.trim="content" placeholder="
請輸入學習內容 " :style="{ height: '32px' }"></textarea>
5 </div>
6 </div>
上述代碼中，第 2~5 行代碼定義了學習內容區(qū)域，通過 <textarea> 標簽定義的多行文
本框可以輸入學習內容，通過 v-model 指令與 content 綁定，實現視圖與數據的雙向綁
定。同時為 v-model 指令添加了 trim 修飾符，用于自動過濾用戶輸入的首尾空白字符。
⑤ 添加卡片區(qū)域中學習地點區(qū)域的頁面結構，具體代碼如下。
1 <div class="col-auto">
2 <div class="input-group mb-3">
3 <span class="input-group-text" id="basic-addon1"> 學習地點 </span>
4 <select class="form-select form-select-sm" v-model="selectedOption" >
5 <option v-for="option in
options" :value="option.place" :key="option.placeCode" >
6 {{ option.place }}
7 </option>
8 </select>
9 </div>
10 </div>
上述代碼中，第 2~9 行代碼定義了學習地點區(qū)域，其中，第 4~8 行代碼通過 <select>
標簽定義了下拉列表，通過 v-model 指令與 selectedOption 綁定，實現數據的雙向綁定。
如果 v-model 指令的初始值不匹配任何一個選項， <select> 標簽會渲染成未選擇的狀態(tài)，
所以 selectedOption 屬性值為“自習室”，表示 <select> 標簽的初始值為“自習室”，自習
室為下拉列表中定義的一個值。第 5~7 行代碼通過 v-for 條件渲染指令實現學習地點的渲
染，當下拉列表中選項改變時， selectedOption 屬性更改。
⑥ 為 <form> 標簽添加 submit 事件，實現單擊“添加”按鈕時添加信息，具體代碼
如下。
<form @submit.prevent="add" >
……（原有代碼） 8
</form>
上述代碼中，黑色加粗部分為新增代碼，添加事件處理函數為 add() ，同時為 submit
事件添加事件修飾符 prevent ，用來阻止表單的默認提交行為。實現在單擊按鈕后提交表
單，執(zhí)行 add() 方法。
⑦ 在 <script setup> 標簽中編寫 add() 方法，實現學習計劃的添加，具體代碼如下。
1 let add = () => {
2 if (subject.value === '') {
3 alert(' 學習科目為必填項！ ')
4 return
5 }
6 nextId.value = Math.max(...list.value.map(item => item.id)) + 1
7 const obj = {
8 id: nextId.value,
9 subject: subject.value,
10 content: content.value,
11 place: selectedOption.value,
12 status: false,
13 }
14 list.value.push(obj)
15 subject.value = ''
16 content.value = ''
17 selectedOption.value = ' 自習室 '
18 }
上述代碼中，第 2~5 行代碼通過 if 進行判斷，若學習科目字段 subject 為空，則彈出
提示，且不執(zhí)行接下來的添加操作；第 6 行代碼，通過調用 max() 方法，找到 list 數組中
id 中最大值，新添加數據的 id 為最大值加 1 ；第 7~13 行代碼為需要新添加的數據，包括
id 、 subject 、 content 、 place 等，在默認情況下 status 為 false ，表示未完成該學習計劃；第
14 行代碼調用 push() 方法實現將 obj 對象添加到 list 數組的末尾；第 15~16 行代碼將
subject 、 content 中的數據清空；第 17 行代碼定義下拉列表的默認值。
保存上述代碼后，在瀏覽器中打開 http://127.0.0.1:5173/ ，查看頁面效果。
至此，學習計劃表的添加功能已實現。
2.1.5 實現狀態(tài)的切換功能
在實現學習計劃的添加功能后，可以添加多條學習計劃。在之前遺留如下問題：在表
格中更改添加后的幾條學習計劃的完成狀態(tài)時，單擊 <input> 標簽生成的開關按鈕可以實現 9
“未完成”與“已完成”狀態(tài)之間的切換，但是單擊 <label> 標簽“未完成”與“已完成”
不能實現該表格行的完成狀態(tài)的切換，只會切換表格第 1 行的完成狀態(tài)。
若想實現單擊文字也可實現某條學習計劃完成狀態(tài)的切換，則可以通過動態(tài)生成
<input> 標簽的 id 屬性，修改完成狀態(tài)列的代碼，具體如下。
1 <div class="form-check form-switch">
2 <input class="form-check-input" type="checkbox" role="switch" :id="'cb
' + item.id" v-model="item.status" />
3 <label class="form-check-label" :for="'cb' + item.id" v-if="item.statu
s"> 已完成 </label>
4 <label class="form-check-label" :for="'cb' + item.id" v-else> 未完成
</label>
5 </div>
上述代碼中，黑體加粗部分代碼為修改代碼， <label> 標簽中的 for 屬性規(guī)定 <label> 標
簽與哪個表單元素綁定，所以在第 3~3 行代碼中通過 <label> 標簽中 for 屬性與 <input> 標簽
綁定， for 屬性的屬性值為 <input> 標簽的 id 屬性值，實現單擊 <label> 標簽中的文本時，瀏
覽器自動將焦點轉到和 <label> 標簽的相關控件 <input> 控件中，實現單擊文本完成某條學習
計劃的完成狀態(tài)的改變。
保存上述代碼后，在瀏覽器中打開 http://127.0.0.1:5173/ 進行測試。
至此，“學習計劃表”案例開發(fā)完成。