一、vue介紹

1、核心點(diǎn)

①、響應(yīng)的數(shù)據(jù)綁定

當(dāng)數(shù)據(jù)發(fā)生改變時 ---> 自動更新視圖
利用Object.definedProperty中的setter / getter代理數(shù)據(jù)，監(jiān)控對數(shù)據(jù)的操作

②、組合的視圖組件

• UI頁面映射為組件樹

• 劃分組件可維護(hù)、可重用、可測試

  
  

2、虛擬DOM

只會改變需要改變的地方，最小代價改變DOM

虛擬DOM示意圖.png

3、MVVM模式

m ---> Model 本地數(shù)據(jù)和數(shù)據(jù)庫中的數(shù)據(jù),
v ---> View 用戶看到的視圖
vm ---> ViewModel：監(jiān)聽DOM，綁定數(shù)據(jù)
ViewModel 只關(guān)心數(shù)據(jù)和業(yè)務(wù)的處理，不關(guān)心 View 如何處理數(shù)據(jù)
ViewModel 將視圖中的狀態(tài)和用戶的行為分離出一個抽象

圖片.png

二、vue實例

vue實例

每一個應(yīng)用都是通過vue這個構(gòu)造函數(shù)創(chuàng)建根實例啟動new Vue(選項對象)
需要傳入選項對象，對象包含掛載元素，數(shù)據(jù)，模板，方法等
el：掛載元素選擇器 string | HtmlElement
data：代理數(shù)據(jù) object | Function
methods：定義方法 Object

三、聲明式渲染

聲明式

只需要聲明在哪里做什么，而無需關(guān)心如何實現(xiàn)的

命令式

需要以具體代碼表達(dá)在哪里做什么如何實現(xiàn)的
eg：求數(shù)組中的每一項的倍數(shù)
聲明式
使用map方法，關(guān)注如何求值
命令式
使用for循環(huán)拿到每一項，然后求值完成后再放入另一個數(shù)組里

vue聲明式渲染

初始化根實例，vue自動將數(shù)據(jù)綁定在DOM模板上

四、指令

指令是一種特殊的自定義行間屬性
指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時相應(yīng)的將某些行為應(yīng)用到DOM上
在vue中指令以 v-開頭

內(nèi)置指令

• v-bind 動態(tài)的綁定數(shù)據(jù)。簡寫為：
• v-on 綁定事件監(jiān)聽器，簡寫為@
• v-text 更新數(shù)據(jù)，會覆蓋已有結(jié)構(gòu)
• v-html 可以解析數(shù)據(jù)中的HTML結(jié)構(gòu)
• v-show 根據(jù)值的真假，切換元素的display屬性
• v-if 根據(jù)值的真假，切換元素會被銷毀，重建
• v-else-if 多條件判斷，為真則渲染
• v-else 多條件都不符合渲染
• v-for 基于源數(shù)據(jù)多次渲染元素或模板塊
• v-model 在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定
• v-pre跳過元素和子元素的編譯過程
• v-once只渲染一次，隨后數(shù)據(jù)更新不重新渲染
• v-cloak 隱藏未編譯的Mustache語法，css中設(shè)置[v-cloak]{display:none}

template 模板
render函數(shù)