第二天
TODOMVC
一 : 準備工作
-
演示效果 :
當前任務:敲代碼、視頻、遊戲
-
git clone https://github.com/tastejs/todomvc-app-template.git -
安裝依賴包 :
npm i
二 : 配置 vue
-
安裝 vue :
npm i vue -
導入 vue :
<script src="./node_modules//vue/dist/vue.js"></script>在
index.html裏的app.js導入之前導入,因爲 app.js 裏 就要用到 vue 了 -
實例化 vue :在
app.js中創建 vue 示例,並設置好邊界el:'#app'找到 index.html ,給 section 標籤添加一個 id
-
測試 vue :
data 中隨便來一個 msg 看能不能顯示到視圖中
三: 列表渲染
-
todoList 數組裏面都是對象
id name doneid : (唯一標識 ) 刪除需要 name : (名稱) 展示需要done : (是否完成任務) 選中狀態需要
-
去掉線 :
:class="{ completed : item.done }" -
多選框選中狀態 :
v-model='item.done'
四 : 添加任務
/**
* 添加任務
*/
addTodo( e ) {
console.log('添加任務',this.todoName);
// 0. 判斷不能爲空
if (this.todoName.trim() === '') {
return;
}
// 1. 添加任務
if (e.keyCode === 13) {
this.todoList.push({
id : 4,
name : this.todoName,
done:false
})
//2. 清空文本框內容
this.todoName = ''
}
}
五 : 刪除任務
傳 id,過濾不是 id 的
this.todoList = this.todoList.filter(item => item.id != id)
六 : 編輯任務 (難點)
畫圖
三步 :
-
在
data中存一個數據 :editId, 記錄選中的文本框 -
:class = {editing: item.id === editId }判斷 選中的是哪一個,是選一個都返回true, 顯示編輯狀態 -
雙擊 :
@dblclick="editTodo(item.id)" -
在editTodo 函數裏 保存選中的id
this.editId = id -
回車 : 編輯狀態消除 : this.editId = -1
-
Vue中數據更新的特點：只要Vue中的數據發生改變，頁面中所有的指令和表達式都會被重新計算一次
七 : 按鍵修飾符
記住 keyCode 太麻煩了
-
只有在鍵盤事件中生活效, (keydown keypress keyup)
-
語法 : @keyup.enter='事件函數'.enter 就是一個按鍵修飾符,意思就是當按回車的時候,事件纔會被觸發
-
@keyup.13 也可以,但是 keyCode 也是要記住的
-
完善 TodoMVC + 按鍵修飾符
八 : v-if 和 v-show
-
代碼
-
<h1 v-if='isShow'>我是h1 v-if</h1> <h1 v-show='isShow'>我是h1 v-show</h1>
-
異同點
-
v-if 和 v-show 的異同點 1. 相同點 : 可以切換元素的顯示與隱藏 2. 不同點 : 切換顯示和隱藏的實現不同 v-if : 顯示:創建節點 隱藏: 刪除節點 v-show : 顯示: display:block 隱藏 : display:none 3. 使用場景 : v-if因爲要不斷的創建和刪除來切換顯示與隱藏 ,所以性能不高 v-if : 切換次數不頻繁的時候, v-show : 切換次數頻繁的時候
-
完善 TodoMVC + v-show
九 : Footer 的顯示與隱藏
-
直接寫
v-show="todoList.length > 0" -
封裝到一個函數裏
-
組件 :
v-show="isFooter()" -
// 代碼顯示 isFooterShow() { // 只要 vue裏的數據發生了變化, 頁面中所有的指令和表達式都會重新計算 // 所以只要文本框裏的內容發生改變,.todoName也會發送改變,這裏就會不斷的打印,,性能不好 console.log('改變了'); return this.todoList.length > 0 } -
有問題
3.1 只要 vue 裏的數據發生了變化, 頁面中所有的指令和表達式都會重新計算3.2 所以只要文本框裏的內容發生改變,.todoName 也會發送改變,這裏就會不斷的打印,,性能不好3.3 我們要做的是 只要數組列表的個數改變纔會影響底部的變化, 文本不管內容文字再多都不應該影響底部的變化3.4 下面需要
計算屬性
十 : 計算屬性 computed
計算屬性其實就是一個屬性
-
說明 : 計算屬性只跟隨相關的數據變化而變化 ,解決底部顯示隱藏問題,
-
怎麼使用?
-
在 computed 裏面
-
寫起來像一個方法
-
用起來像一個屬性
-
-
特點 :
-
計算屬性一定要有返回值, 返回的值,就會標籤要展示的內容
-
計算屬性可以使用data裏之前已知的值
-
(重要) 只要 計算屬性
相關的數據發生了變化,計算屬性會重新計算 -
(說一下 :) num1就是totalNum計算屬性的相關屬性,所以num1變了,計算屬性會重新計算,
但是num2不是相關的屬性,所以不管你num2怎麼變,計算屬性都不會重新計算
-
-
注意點 :
-
4.1. 一定要有返回值
-
4.2. 用起來的時候,不能當方法用,因爲它本來就是一個屬性
-
4.3. 計算屬性(computed裏面的屬性) 不能和 data裏的屬性重名
-
-
什麼時候使用 計算屬性?
-
根據已知的值,得到一個新值
-
並且 , 新值只想跟相關的數據(已知的值)的變化而變化 (實時更新)
-
-
案例 : 計算器
num1 <input type="text" v-model="num1" /> +
num2 <input type="text" v-model="num2" /> = <span>{{ num3 }}</span>
<hr />
<input type="text" v-model="test" />
-
完善 TodoMVC + 計算屬性 + 底部顯示與隱藏 / 左邊的剩餘未完成數 / 右邊清除完成按鈕顯示與隱藏
十一 : key
-
說明 :
-
Vue 中推薦, 在使用 v-for 的時候,添加 key 屬性
-
看官網
-
介紹 就地複用
<!-- 顯示組件 -->
<p v-for="(item,index) in list" :key="index">
{{ item.name}} <input type="text" />
</p>
<!-- 數據 -->
data: { list : [
{ id : 1, name : '老羅' },
{ id : 2, name : '濤濤' },
{ id : 3, name : '聰聰' }
]}
<!-- 演示 -->
vm.list.unshift({id:4,name:'馬哥'})
-
怎麼使用 key
-
如果數組的元素是一個對象 : 使用對象裏固定屬性,唯一
-
一般情況下,對象裏都有 id, 99%都是取
item.id -
如果數組的元素是一個簡單類型,不是一個對象, 就可以取索引作爲 key
-
語法 :
:key='item.id' -
以後,寫了
v-for之後,立馬寫好:key
-
-
完善 TodoMVC + key
十二 : 其他指令 v-else-if 和 v-else
-
v-else : 兩種情況的
<h1 v-if="num > 40">第一個</h1> <h1 v-else>第三個</h1>
-
v-else-if : 三種以上情況
<h1 v-if="num >= 40">第一個</h1> <h1 v-else-if="num >= 30 && num < 40">第二個</h1> <h1 v-else>第三個</h1>