3-1
MVP模式
MVVM模式
元件化開發:把頁面拆分成不同的區域,每一個區域就是一個元件,分元件開發可以把一個頁面的佈局和邏輯進行拆分,利於維護
3-2 選項:Dom
el:提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標。可以是 CSS 選擇器,也可以是一個 HTMLElement 例項。
template:一個字串模板作為 Vue 例項的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略,除非模板的內容有分發插槽。
3-3 Vue的模板語法
X值表示式 {{}}
v-text ='a' el.innerText = a
v-html ='b' el.innerHtml = b
這三個語法中都可以寫JS表示式
3-4 計算屬性,方法與偵聽器
computed 具有快取的概念 ,只有依賴的值發生了改變才會重新計算
methods 可以在模板語法表示式中 直接呼叫來獲取資料
watch 與computed都具有快取的機制,但需要將所有變化的資料都進行監聽,優先使用computed,效能更好
3-5 計算屬性的 getter 和 setter
3-6 Vue中的樣式繫結
在dom上動態繫結class 或者style,然後在data中宣告class或者 style的值 ,值可以通過陣列和物件的方式進行繫結
3-7 Vue中的條件渲染
v-if dom節點是否被移除 v-else 、v-else-if需要配合 v-if一起用
v-show 頁面元素消失時 display = none 頻繁切換時 效能更好 不會把dom節點去除
給一個元素標籤加入key值,vue通過diff演算法發現key值不同時,不會去複用這個元素
3-8 Vue中的列表渲染
v-for迴圈時 key值最好唯一
遍歷陣列
1 Vue中 運算元組的7個變異方法可以使得資料改變 檢視響應
pop、 push 、shift、 unshift 、sort、 reverse、 splice
2 也可以讓陣列對應的資料data指向一個新的引用地址
template模板佔位符 ,可以用於包裹迴圈的dom,但是template不會出現在dom結構中
遍歷物件
也可以讓物件對應的資料data指向一個新的引用地址
3-9 Vue中的set方法
改變陣列或者物件資料 頁面隨之改變的方法
物件
Vue.set(obj,key,value) 例項上 vm.$set(obj,key,value)
陣列
Vue.set(arr,index,value) 例項 vm.$set(arr,index,value)
4-1 使用元件的細節點
is 用於標籤上出現BUG的情況,將當前標籤元素替換為元件
ref
在html標籤上 獲取的是該dom節點
在元件上 獲取到子元件的引用
4-2 父子元件間的資料傳遞
Vue中採用的是單向資料流,子元件不能直接改變父元件傳下來的資料,這樣會影響別的子元件引用這個資料,必須克隆一份,修改克隆以後的資料
父元件通過props給子元件傳值,子元件通過$emit給父元件傳遞事件和引數
4-3 元件引數校驗與非 props 特性
校驗字串:
校驗數字或字串 :
校驗多種條件 :
自定義校驗器:
4-4 給元件繫結原生事件
可以給HTML標籤直接繫結原生事件,在元件上繫結的事件是自定義事件,如果需要直接給元件繫結原生事件,需要在事件後加上native修飾符
4-5 非父子元件間的傳值
1 VUEX
2 匯流排機制/釋出訂閱模式/Bus/觀察者模式
4-6 在Vue中使用插槽
子元件裡面宣告插槽 ,父元件傳遞插槽內容
4-7 作用域插槽
當子元件作迴圈時,它的dom結構應該由外部傳進來決定時
4-8 動態元件與 v-once 指令
v-once 在第一次建立元件以後可以將元件快取到記憶體中 , 當切換到別的元件再切換回來時不需要重新建立這個元件,當靜態元件切換顯示隱藏時可以使用,這樣可以提升效能
5-1 Vue動畫 - Vue中CSS動畫原理
顯示時的動畫週期
隱藏時的動畫週期
5-2 在Vue中使用 animate.css 庫
5-3 在Vue中同時使用過渡和動畫
在transition上加上 appear-active-class=‘animated swing’自定義類名 並且寫上appear屬性來呼叫,type 屬性決定 動畫和過渡時間效果時間以過渡為主, :duaration自定義 過渡時間
5-4 Vue中的 Js 動畫與 Velocity.js 的結合
在transition標籤上 自定義事件
@before-enter 動畫開始前 @enter 動畫開始後 處理函式 function(el,done) 最後需要呼叫done()才能進入 after-enter事件 @after-enter 動畫結束後
Velocity.js JS動畫
下載velocity.js 可以配置動畫效果 持續時間 以及結束後的done回撥
5-5 Vue中多個元素或元件的過渡
需要給transition中包裹的元素 加上不同的key ,因為vue中元素顯示切換時預設快取
元件進行切換時可以使用動態元件component 通過:is=‘type’ type值為子元件的name
5-6 Vue中的列表過渡
用 transition-group 包裹需要迴圈的列表元素 迴圈時的key最好不要用index,用資料中唯一的id更好