VUE基礎總結

Leon Aries發表於2018-10-30

3-1 

MVP模式

VUE基礎總結

MVVM模式

VUE基礎總結

元件化開發:把頁面拆分成不同的區域,每一個區域就是一個元件,分元件開發可以把一個頁面的佈局和邏輯進行拆分,利於維護


3-2 選項:Dom

el:提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標。可以是 CSS 選擇器,也可以是一個 HTMLElement 例項。

template:一個字串模板作為 Vue 例項的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略,除非模板的內容有分發插槽。

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

VUE基礎總結

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的情況,將當前標籤元素替換為元件

VUE基礎總結


ref  

在html標籤上  獲取的是該dom節點

在元件上  獲取到子元件的引用

4-2 父子元件間的資料傳遞

Vue中採用的是單向資料流,子元件不能直接改變父元件傳下來的資料,這樣會影響別的子元件引用這個資料,必須克隆一份,修改克隆以後的資料

父元件通過props給子元件傳值,子元件通過$emit給父元件傳遞事件和引數

4-3 元件引數校驗與非 props 特性

校驗字串:

VUE基礎總結

校驗數字或字串 :

VUE基礎總結

校驗多種條件 :

VUE基礎總結

自定義校驗器:

VUE基礎總結

4-4 給元件繫結原生事件

可以給HTML標籤直接繫結原生事件,在元件上繫結的事件是自定義事件,如果需要直接給元件繫結原生事件,需要在事件後加上native修飾符

VUE基礎總結

4-5 非父子元件間的傳值

1 VUEX

2 匯流排機制/釋出訂閱模式/Bus/觀察者模式

VUE基礎總結

4-6 在Vue中使用插槽

子元件裡面宣告插槽 ,父元件傳遞插槽內容 

VUE基礎總結

4-7 作用域插槽

VUE基礎總結

VUE基礎總結

當子元件作迴圈時,它的dom結構應該由外部傳進來決定時

4-8 動態元件與 v-once 指令

VUE基礎總結

v-once 在第一次建立元件以後可以將元件快取到記憶體中 , 當切換到別的元件再切換回來時不需要重新建立這個元件,當靜態元件切換顯示隱藏時可以使用,這樣可以提升效能

5-1 Vue動畫 - Vue中CSS動畫原理

VUE基礎總結

VUE基礎總結

顯示時的動畫週期

VUE基礎總結

隱藏時的動畫週期

VUE基礎總結

5-2 在Vue中使用 animate.css 庫

VUE基礎總結

5-3 在Vue中同時使用過渡和動畫

在transition上加上  appear-active-class=‘animated swing’自定義類名  並且寫上appear屬性來呼叫,type 屬性決定 動畫和過渡時間效果時間以過渡為主, :duaration自定義 過渡時間

VUE基礎總結

5-4 Vue中的 Js 動畫與 Velocity.js 的結合

在transition標籤上 自定義事件

 @before-enter  動畫開始前 @enter 動畫開始後  處理函式 function(el,done)  最後需要呼叫done()才能進入 after-enter事件  @after-enter  動畫結束後

Velocity.js JS動畫 

下載velocity.js   可以配置動畫效果  持續時間 以及結束後的done回撥

VUE基礎總結

5-5 Vue中多個元素或元件的過渡

需要給transition中包裹的元素 加上不同的key ,因為vue中元素顯示切換時預設快取

元件進行切換時可以使用動態元件component 通過:is=‘type’ type值為子元件的name

5-6 Vue中的列表過渡

用 transition-group 包裹需要迴圈的列表元素   迴圈時的key最好不要用index,用資料中唯一的id更好

5-7 Vue中的動畫封裝

VUE基礎總結


相關文章