如果出現錯誤，請在評論中指出，我也好自己糾正自己的錯誤
author： thomaszhou
todolist簡易版
我們在topNav這個頁面上插入一個todolist子元件
我不知道怎麼回事，這裡的markdown的程式碼總是序列。。所以程式碼看得不舒服，見諒啊，我最後會放github的原始碼地址。
如果可以，希望可以star！！！，給我動力以後繼續出更進階的實戰教程 完整程式碼
1. 父元件topNav中註冊子元件，引入子元件
<template>
<div>
<p>下面這一行就是定義的元件名稱</p>
<todo-list></todo-list>
<router-view></router-view>
</div>
</template>
<script>
/*
1. 通過import來引入我們的子元件drawerLayout
2. 引入子元件，並重新取名為todoList，然後在components組冊一下
3.在我們的template中按照html標籤的形式使用元件，todoList就是<todo-list>
注意：
(1) 子元件的名字無所謂，但是我們引入的那個子元件名todoList，第二個單詞的首字母一定要大寫（不然你會踩坑的）
(2) 使用標籤時，todoList，就是todo-list，就是寫成駝峰命名法（通俗說就是在第二個單詞的大寫首字母改成小寫形式，然後前面加一個 “-”）
*/
import todoList from '../components/todoList.vue'
export default {
components: {
todoList
},
data() {
return {
};
}
}
</script>
複製程式碼2. 先看看元件的功能
首先我們先大體看看元件長啥樣，然後我才去構思如何寫
- 首先我們看到的是一個input輸入框，預設顯示edit..，當我們沒有新增資料的時候，下方顯示的“暫無內容”
- 接著，我們輸入資料“第一個例子”然後敲擊回車，就會出現一行list
- list包括一個單選框，文字，還有一個刪除的按鈕
- 那怎麼刪除呢？那既然要做，肯定稍微做多一點功能，把一些內部指令都用一下，我們設定的刪除規則是
- 先選中該list，然後點選刪除，然後該條記錄就沒有了，如果刪除這個資料後，就沒有list了，那“暫無內容”就要顯示出來了
3. 開始寫我們的todo子元件了
關於程式碼中的樣式我放在最後，所以此刻你可以忽略一些class
- 我們先把這個todolist的大體框架搭好，然後往裡面增加功能
<template>
<div class="ex1">
<div class="input-text">
<label for="inputNum">請輸入：</label>
<input type="text"
id="inputNum"
name="inputNum"
placeholder="edit..">
<!--列表內容-->
<ul>
<li>
<input type="checkbox" >
<span>dd</span>
<button>刪除</button>
</li>
</ul>
<p class="empty" v-if="!inputList.length">暫無內容</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
inputList: [],
inputItem: {
content: '',
finished: false,
deleted: false
}
}
},
methods: {
//將輸入框的資料新增到list中
addItem: function() {}
//改變選中狀態
changeState: function(index) {},
//刪除列表元素
deleteItem: function(index) {}
}
}
</script>
複製程式碼
接下來我就不針對每一小步都給出程式碼來更新了，因為篇幅太大，我會更具一個功能塊來寫（我會很詳細的）
首先我們先理清以下思路
- 在輸入框中輸入資料，按下回車就會在下方顯示一行list列表（包括一個單選框，輸入的資料，藍色操作按鈕）
- 將輸入框的值和inputItem.content進行雙向繫結
- 給輸入框繫結回車事件(@keydown.13)到addItem方法中，每次輸入回車，就將輸入框的資料新增進list列表中（inputList陣列中）
- 利用v-for指令遍歷inputList中的值並顯示
- 選中單選框，list的內容變成刪除效果（中間橫線劃過），藍色操作按鈕變成紅色刪除按鈕，點選按鈕，就會刪除該列list
- 將單選框的checked和inputItem的finished進行繫結，繫結後就可以利用這個finished來做一些別的事了
- 剛新增進列表內容的list的按鈕是藍色操作按鈕，如果我們要通過單選框的選中與否的兩種狀態來使content的子新增和移除一個class（就是上面說的刪除效果），以及將按鈕變成紅色的刪除按鈕，那就可以繫結changeState方法來操作
- 那刪除功能呢？首先，我們要選中該行list，再點選刪除才能刪除該行資料，對吧。所以我們將按鈕繫結一deleteItem方法，方法做的事情就是先檢測該行的finished是否是true，如果是true，那麼我們就刪除該行資料
我們先完成新增功能：在輸入框輸入資料，回車，會在下面顯示一行列表（包括單選框，輸入的資料，刪除按鈕）
<template>
<div class="ex1">
<div class="input-text">
<label for="inputNum">請輸入：</label>
<!--@keydow.13表示回車的事件-->
<!--v-model是為了讓輸入的資料和inputItem.content同步-->
<input type="text" id="inputNum" name="inputNum" placeholder="edit.."
@keydown.13="addItem" v-model="inputItem.content" class="edit"
>
<!--列表內容-->
<ul class="task">
<li v-for="(key, item) in inputList">
<input type="checkbox" :checked="item.finished">
<span>{{key.content}}</span>
<button class="del">刪除</button>
</li>
</ul>
<p class="empty" v-if="!inputList.length">暫無內容</p>
</div>
</div>
</template>
複製程式碼<script>
export default {
data () {...省略 },
methods: {
addItem: function() {
this.inputList.push(this.inputItem);
/*
為什麼我們要對inputItem再次初始化？
解答：因為每次在輸入框中輸入資料，都會同時改變inputItem的content屬性，
然後我們點選回車，該inputItem的整個物件都新增進inputList中，
按正常邏輯來說，inputList內的內容和inputItem是沒有聯絡了。
如果我們此時不對inputItem進行再次初始化，那麼就會發現你再次在輸入框中輸入資料的時候，
會同時改變下面的list的值，簡易你們把初始化的程式碼去掉，執行下試試看！
*/
this.inputItem = {
content: '',
finished: false,
deleted: false
};
},
//改變選中狀態
changeState: function(index) {},
//刪除列表元素
deleteItem: function(index) {}
}
}
</script>
複製程式碼我們先看看列表內容的程式碼
<!--列表內容-->
<ul class="task">
<li v-for="(item, index) in inputList">
<!--單選框繫結了item.finished，還新增了點選事件-->
<input type="checkbox"
:checked="item.finished"
@click="changeState(index)"
>
<!--通過item.finished值來動態繫結class-->
<span :class="{'finish':item.finished}">{{item.content}}</span>
<!--按鈕的顏色通過動態新增class來實現，然後按鈕的文字通過改變isDel來實現，isDel的改變也是通過changeState方法來操作的-->
<button @click="deleteItem(index)"
class="del"
:class="{'native':item.finished === true}"
>{{isDel}}</button>
</li>
</ul>
<p class="empty" v-if="!inputList.length">暫無內容</p>
複製程式碼然後我們講解changeState方法
//改變選中狀態
changeState: function (index) {
// this.inputList[index].finished = true 錯誤：這樣如果點選第二次，無法回到false，就會一直true狀態
this.inputList[index].finished = !this.inputList[index].finished;
// 根據finished的值來對應的修改isDel的值，isDel的值就是按鈕的文字
if (this.inputList[index].finished) {
this.isDel = '刪除'
}else {
this.isDel = '操作'
}
},
複製程式碼 //刪除列表元素
deleteItem: function (index) {
if (this.inputList[index].finished) {
his.inputList.splice(index,1);
}
}
複製程式碼完整程式碼 不知道講解的是否還讓人明白，如果講解方面有一些問題，希望指出，後續可以修改講解方法，另外，希望star的