目錄

組件化編碼流程（通用）

1.實現靜態組件：抽取組件，使用組件實現靜態頁面效果

2.展示動態數據：

1. 常規 HTML 屬性

3.交互——從綁定事件監聽開始

什么時候要用 event：

什么時候不需要用 event：

總結TodoList案例

總結不易！本章節對我有很大的收獲， 希望對你也有幫助！！！

---

本節文件素材自取：https://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/vue-06/src

組件化編碼流程（通用）

1.實現靜態組件：抽取組件，使用組件實現靜態頁面效果

2.展示動態數據：

實際上是寫成 v-for = "(title, index) in todos"

傳入值給MyItem 進行值的接收~ 打印這里的生命周期鉤子中todo對象

v-bind就是得到Vue里面的值 然后進行傳給html標簽里面的屬性值使用！

1. 常規 HTML 屬性

• href: 鏈接的 URL

• src: 圖像、視頻或其他資源的來源

• alt: 圖像的替代文本

• title: 元素的提示信息

• disabled: 控制按鈕、輸入框等元素的禁用狀態

• readonly: 使輸入框成為只讀

• checked: 復選框或單選框的選中狀態

• value: 表單控件的值

• placeholder: 表單控件的占位符文本

• maxlength: 輸入框允許的最大字符數

• type: 表單控件的類型，如 text、password、checkbox 等

就好比 給img :src=“”圖片傳入地址

3.交互——從綁定事件監聽開始

• @keyup 是 v-on:keyup 的簡寫，它用于監聽 keyup 事件。keyup 事件會在用戶松開按鍵時觸發。

• .enter 是一個修飾符，它限制只在用戶按下 Enter 鍵 時觸發事件。也就是說，只有當用戶按下 Enter 鍵并松開時，才會觸發 add 方法。

• add 是你在 Vue 組件中定義的方法，當這個事件觸發時，Vue 會調用 add 方法。

這里有兩種辦法來接受輸入框的數據：

1. 給這個add函數來進行添加

• event 是觸發 keyup 事件時，瀏覽器傳遞給事件處理函數的原生 DOM 事件對象。

• event.target 是觸發事件的元素（即 <input> 輸入框）。

• event.target.value 獲取的是這個輸入框的當前值，也就是用戶輸入的內容。

什么時候要用 event：

1. 你需要獲取觸發事件的元素（比如按鈕、輸入框等）： 比如你點擊了一個按鈕，想知道是哪個按鈕觸發了事件，或者想獲取這個按鈕的某個屬性（比如按鈕的文本、值等）。這時需要 event.target 來拿到這個元素。

<button @click="handleClick">Click me</button>methods: {handleClick(event) {console.log(event.target); // 這里你就可以得到觸發點擊的那個按鈕元素}
}

你需要獲取更多的事件信息： 比如你按了某個鍵，想知道是哪個鍵被按下。你需要 event.key 來獲取按下的鍵的名字（例如 "Enter"，"Escape" 等）。

<input type="text" @keyup="handleKeyup">methods: {handleKeyup(event) {console.log(event.key); // 輸出你按下的鍵名}
}

你需要阻止事件的默認行為： 比如你點擊了一個提交按鈕，但你不想讓它立即提交表單，而是執行其他的操作。你可以使用 event.preventDefault() 來阻止表單的提交。

<form @submit="handleSubmit"><button type="submit">Submit</button>
</form>methods: {handleSubmit(event) {event.preventDefault(); // 阻止表單提交console.log("表單沒有提交");}
}

你需要停止事件冒泡： 有時候你點擊某個元素時，可能不希望事件傳播到父元素（例如，你點擊了按鈕，但父元素的點擊事件也不想被觸發）。這時你可以使用 event.stopPropagation() 來停止事件的傳播。

<div @click="handleDivClick"><button @click="handleClick">Click me</button>
</div>methods: {handleDivClick() {console.log("Div clicked");},handleClick(event) {event.stopPropagation(); // 阻止事件冒泡，不讓父 div 的點擊事件觸發console.log("Button clicked");}
}

什么時候不需要用 event：

• 如果你不需要獲取事件的具體信息（比如你只是希望某個方法被執行），就不需要用 event。比如你用 Vue 的 @click，然后直接調用一個方法，沒有涉及到原生事件信息的處理時，就不需要傳 event。

2. 采用v-modle進行雙向數據綁定，來直接獲取輸入的title值

v-model="title"：實現了輸入框的值與 title 數據的雙向綁定。

為了生成一個絕對不會重復的id號， 這里就推薦一個nanoid庫進行生成唯一的id

安裝好nanoid庫后，直接進行引入：然后打印出輸入的對象看看效果！

由于我們現在數據在MyHeader上 需要將數據傳入到MyList內才能將數據進行渲染，但是我們現在實現不了兄弟組件之間的互傳，就比如上面之前的List組件傳至item組件， 它們之間的關系就是父子組件的關系， List引入了item組件，所以才可以通過props進行傳輸數據！

這里我們只能先將header數據傳入App 然后 才從App傳入至List的方法可行！！！

1. 先實現比較簡單的這條線，將數據從App組件傳向List就是用props即可，將todos數組放入App組件，進行傳輸：

App組件：

List獲取App組件傳來的todos 然后再傳給item單個事件進行渲染：

2.第二條線就是， 要將Header輸入框的值傳送給App組件！

然后就只需要將receive名字換成addTodo 并且獲得的todoObj進行unshift數組todos即可！

Header組件進行數據檢驗！

if(!event.target.value.trim()) return alert('輸入不能為空')

export default {name: 'MyHeader',props:['addTodo'],methods: {add(event) {// 檢驗數據if(!event.target.value.trim()) return alert('輸入不能為空')// 將用戶的輸入包裝成一個todo對象// console.log(event.target.value)const todoObj = {id:nanoid(), title: event.target.value, done:false}// console.log(todoObj)// 通知App組件添加一個todoObj對象this.addTodo(todoObj)event.target.value = ''}}
}

當我想要改變當前標簽值的done時， 首先第一步就是要獲得該事件的id號！再Item組件中~

那么仍然再App組件內進行定義函數：來進行勾選或取消勾選當前事件，得到該id后 將當前事件的done進行反轉！

那么就要將該函數進行傳遞至item組件內， 就要進行連續傳遞兩次

item勾選or取消勾選的另一種方法！直接利用v-model的雙向數據綁定， 來獲取props傳來的數組todo.done來控制當前的checkbox的勾選效果!

但是這里有一個很明顯的沖突：

這里的todo.done 是props傳進來的 是只讀的 但是這里卻被修改了

1. ? ? ?但是Vue的監測比較寬松，比如：let obj = {a: 1, b: 2}
2. ? ? ?obj.a = 666 這種只修改屬性值， Vue是監測不到的
3. ? ? ?obj = {x: 100, y: 200} 這種修改整個對象 才是Vue能夠監測到的

所以強烈不建議這種寫法，還是不要直接對props進行修改的好~

定義刪除item任務， 跟勾選是用養一個效果， 再App組件內進行創建deleteTodo函數 然后進行傳遞給item組件中！

Footer計算任務：

Footer組件要接收App傳入的todos 然后來計算當前的全部任務和已完成任務數！

<span>已完成{{ doneTotal }}</span> / 全部{{ todos.length }}

export default {name:'MyFooter',props:['todos'],// 計算屬性 因為我們要計算已完成的任務數computed: {// 簡寫 寫成函數形式doneTotal() {// 寫法不高級// let i = 0// this.todos.forEach(todo => {if(todo.done) i++})// return i// 第一個參數就是一個函數 第二個參數 用來做統計的初始值 就像是定義 i = 0// 數組的長度是幾 這個函數就被調用幾次// pre 就是上一次的值， current就是當前的值// 返回值就是下一次執行這個函數的pre來進行接收// 最后一次調用函數的返回值就是整個reduce方法的返回值// current就是每一個todo對象 就是數組里面的下標為pre當前內容// const x = this.todos.reduce((pre, current) => {//   return pre + (current.done ? 1 : 0)// }, 0)// return xreturn this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)}}
}

計算已完成任務數，這里用到了reduce這個數組內置函數，用來進行篩選計算作用，那么就要放入計算函數內部進行返回！

reduce()?方法對數組中的每個元素按序執行一個提供的?reducer?函數，每一次運行?reducer?會將先前元素的計算結果作為參數傳入，最后將其結果匯總為單個返回值。

全部勾選 or 全部不勾選按鈕 以及 清除已經完成的任務

Footer的input checkbox復選框：

但是這里input 又采用:checkbox 進行獲取isAll的值 還進行@click進行點擊事件 所以二者可以進行合并為v-model= "isAll"

正常流程是： get() → 用戶修改 → set(value) → 響應式數據變了 → 自動觸發 get() → 頁面刷新

清除已完成任務：

?本節文件素材自取：https://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/vue-06/src

總結TodoList案例

1. 組件化編碼流程：

   ? (1).拆分靜態組件：組件要按照功能點拆分，命名不要與html元素沖突。

   ? (2).實現動態組件：考慮好數據的存放位置，數據是一個組件在用，還是一些組件在用：

   ? 1).一個組件在用：放在組件自身即可。

   ? 2). 一些組件在用：放在他們共同的父組件上（<span style="color:red">狀態提升</span>）。

   ? (3).實現交互：從綁定事件開始。

2. props適用于：

   ? (1).父組件 ==> 子組件 通信

   ? (2).子組件 ==> 父組件 通信（要求父先給子一個函數）

1. 使用v-model時要切記：v-model綁定的值不能是props傳過來的值，因為props是不可以修改的！

2. props傳過來的若是對象類型的值，修改對象中的屬性時Vue不會報錯，但不推薦這樣做。

總結不易！本章節對我有很大的收獲， 希望對你也有幫助！！！