Vue基礎（未完）

概念介紹

Vue.js介紹

基本概念

1. Vue.js 是目前最火的一個前端框架，React是最流行的一個前端框架
   React除了開發網站，還可以開發手機原生App， Vue語法也是可以用於進行手機App開發的，需要藉助於Weex
2. Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，並稱爲前端三大主流框架
3. Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或已有項目整合
   Vue有豐富的配套三方類庫，可以整合起來做大型項目的開發

官網

1. English Site
2. 中文網站

介紹

1. Vue.js是一個漸進式框架，動態構建用戶界面
2. 作者：尤雨溪，華裔，前Google 工程師

特點

1. Vue.js 是基於MVVM架構
2. 編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發
3. 它本身只關注 UI, 可以輕鬆引入 vue 插件或其它第三庫開發項目
4. 參考了React的組件化和虛擬DOM技術，借鑑了angular的模板和數據綁定技術

Vue的生態

1. Vue.js ：關注UI層面
2. 工具：DevTools、vue-cli: vue 腳手架、vue-loader
3. 核心插件
   vue-router: 路由
   vuex: 狀態管理
   vue服務器端渲染
   vue-resource(axios): ajax 請求

MVC、MVP、MVVM

MVC

1. 概念：M是指業務模型，V是指用戶界面，C則是控制器
   M即model模型,  數據層，負責數據的處理和獲取的數據接口層
   V即View視圖, 視圖層, 是指用戶看到並與之交互的界面。比如由html元素組成的網頁界面，或者軟件的客戶端界面
   C即controller控制器, 控制器層，它是 Model 和 View 之間的膠水或者說是中間人
2. MVC各個部分之間通信的方式
   圖示
   
   1）Models： 數據層，負責數據的處理和獲取的數據接口層
   2）Views： 展示層(GUI)，對於web來說所有以.html開頭的文件基本都屬於這層
   3）Controller： 控制器層，它是 Model 和 View 之間的膠水或者說是中間人
   當用戶對 View 有操作時它負責去修改相應 Model
   當 Model 的值發生變化時它負責去更新對應 View
   4）理論上：所有通信都是單向的
   1. M和View應該是完全隔離的，由C作爲中間人來負責二者的交互
   2. 同時三者是完全獨立分開的，這樣可以保證M和V的可測試性和複用性
   3. 由於C都是爲特別的應用場景下的M和V做中介者，所以很難複用；而且V和M有時候也會存在耦合
   4. V和M很多時候會存在耦合，view會依賴於Model
3. 好處
   1）耦合性低
   2）重用性高
   3）拓展性好
   4）可維護性高
4. MVC並不適用於前端
   1）前端的View其實已經具備了獨立處理用戶事件的能力，當每個事件都流經Controller時，這層會變得十分臃腫
   2）MVC中View和Controller一般是一一對應的，捆綁起來表示一個組件，視圖與控制器間的過於緊密的連接讓Controller和View都變得無法複用

MVP

1. 概念
   1）MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出
   2）和MVC的相同之處在於：Controller/Presenter負責業務邏輯，Model管理數據，View負責顯示
   3）圖示
   
2. 特點
   1）在MVC裏，View是可以直接訪問Model的，但MVP中的View並不能直接使用Model，而是通過爲Presenter提供接口，讓Presenter去更新Model，再通過觀察者模式更新View
   2）與MVC相比，MVP模式通過解耦View和Model，完全分離視圖和模型，使職責劃分更加清晰
   3）View不依賴Model，可以將View抽離出來做成組件，它只需要提供一系列接口提供給上層操作
3. 存在問題
   1）Presenter作爲View和Model之間的“中間人”，除了基本的業務邏輯外，還有大量代碼需要對從View到Model和從Model到View的數據進行“手動同步”，這樣Presenter顯得很重，維護起來會比較困難
   2）而且由於沒有數據綁定，如果Presenter對視圖渲染的需求增多，一旦視圖需求發生改變，Presenter也需要改動

MVVM

1. 概念
   1）MVVM（Model-View-ViewModel）最早由微軟提出
   2）ViewModel指 “Model of View”——視圖的模型
   3）圖示

2. 特點
   1）MVVM把View和Model的同步邏輯自動化了
   2）以前Presenter負責的View和Model同步不再手動地進行操作，而是交給框架所提供的數據綁定功能進行負責，只需要告訴它View顯示的數據對應的是Model哪一部分即可
   3）通過ViewModel進行數據綁定，當Model發生變化，ViewModel就會自動更新；ViewModel變化，Model也會更新

3. MVVM
   1）概念
   1）MVVM（Model-View-ViewModel）最早由微軟提出
   2）ViewModel指 “Model of View”——視圖的模型
   3）圖示
   
   2）特點
   1）MVVM把View和Model的同步邏輯自動化了
   2）以前Presenter負責的View和Model同步不再手動地進行操作，而是交給框架所提供的數據綁定功能進行負責，只需要告訴它View顯示的數據對應的是Model哪一部分即可
   3）通過ViewModel進行數據綁定，當Model發生變化，ViewModel就會自動更新；ViewModel變化，Model也會更新

總結

1. 整體上看，MVVM比MVC/MVP精簡了很多，不僅僅簡化了業務與界面的依賴，還解決了數據頻繁更新的問題
   jQuery操作DOM就很頻繁
2. 在MVVM中，View不知道Model的存在，ViewModel和Model也察覺不到View，這種低耦合模式可以使開發過程更加容易，提高應用的可重用性
3. MVVM更適合視圖更多的前端項目進行工程化開發

安裝DevTool

DevTool是什麼？

vue-devtools是一款基於chrome瀏覽器的插件，用於調試vue應用，能夠極大地提高我們的調試效率

安裝

chrome商店直接安裝

You Need FQ

手動安裝

1）找到vue-devtools的github項目，並將其clone到本地
git clone https://github.com/vuejs/vue-devtools.git
2）安裝項目所需要的npm包
npm install
3）編譯項目文件
npm run build
4）添加至chrome瀏覽器
瀏覽器輸入地址“chrome://extensions/”進入擴展程序頁面，點擊“加載已解壓的擴展程序…”按鈕，選擇vue-devtools>shells下的chrome文件夾
圖示

安裝vue-cli

vue-cli是什麼？

vue-cli是vue官方提供的腳手架工具，默認搭建好了一個項目的基本架子，我們在其基礎上進行相應修改即可。
https://github.com/vuejs/vue-cli：下載模板項目
1）全局安裝vue-cli
npm install -g @vue/cli
2）查看版本/是否安裝成功
vue -V

初始化Vue項目

vue create hk-demo

按鍵盤上下鍵可以選擇默認（default）還是手動（Manually），如果選擇default，一路回車執行下去就行了， 繼續手動一下

選擇配置：空格鍵是選中與取消，A鍵是全選

選項說明

1. Babel將高階ES6.7.8語法轉換爲ES5語法
2. TypeScript 支持使用 TypeScript 書寫源碼
3. Progressive Web App (PWA) Support PWA 支持
   PWA不是API或技術，但它是一種Web開發方法，它使用已有的工具和技術組合來創建有針對性的理想用戶體驗
   漸進式網絡應用程序
4. Router 支持 vue-router
5. Vuex 支持 vuex
6. CSS Pre-processors 支持 CSS 預處理器
7. Linter / Formatter 支持代碼風格檢查和格式化
8. Unit Testing 支持單元測試
9. E2E Testing 支持 E2E 測試

選擇將這些配置文件寫入到什麼地方 (In dedicated config files)

專用配置文件中

是否保存這份預設配置？（n）

選是的話，下次創建一個vue項目，可以直接使用這個預設文件，而無需再進行配置

運行項目

進入新建的項目中，npm run serve

解讀項目的目錄結構

main.js

如果想配置在整個項目中都能用的全局的數據，在main.js中進行配置

Vue.config.productionTip = false

阻止啓動生產消息
爲false的時候，啓動項目只有以下輸出

true

這個函數的作用就是生成一個 VNode節點，render 函數得到這個 VNode 節點之後，返回給 Vue.js 的 mount 函數，渲染成真實 DOM 節點，並掛載到根節點上
$mount 手動掛載 `$mount(’#app’)`
掛載在index.html中的app中

render：h=>h(App) 逆推：

/**
 *
 ES5
 render：function（createElement）{
  return createElement(App);
 }

 ES6
 render(createElement){
  return createElement(App);
 }

 簡化
 render(h){
  return h(App);
 }

 箭頭函數
 render:h =>h(App);
 */

App.vue 類似於模板文件：描述一個組件（結構、樣式、腳本）

template 模板：組件的結構 唯一出口，只能有一個div

HelloWorld是一個組件

引入組件三部曲：

1. 引入：import
   
2. 註冊：在components中註冊組件
   
3. 使用
   

script 腳本文件：ES6

style 樣式文件

HelloWorld.vue：組件

向外界暴露名稱HelloWorld
scoped

樣式僅作用於當前組件

理解Vue的 MVVM

一個組件（例如：HelloWorld.vue就是一個小的MVVM=> V VM M）
例如：在HelloWorld.vue中
V是：

VM是：一個實例

數據在VM中的一個掛載鉤子上，如上圖中，其實：在二級組件中，鉤子以函數的形式出現


model有數據後，通過VM傳遞數據給vue。數據綁定
通過{{數據標識}}進行數據綁定：例如：{{msg}}，即可實現自動化更新數據。
同時，這種更新是雙向的,通過更新input中的數據，可以實現更新msg中的數據

綜上：model和mv中數據是可以相互傳遞的，mv中數據和view中數據是雙向綁定的

切記

1）雙向綁定僅僅是一種高級語法糖
2）數據流傳遞還是單向的

基礎知識

組件的定義與使用

vue文件的組成

1. 模板頁面
   
2. JS 模塊對象
   
3. 樣式

基本使用

1. 引入組件
   
2. 映射成標籤
   
3. 使用組件標籤
   

模板語法

類似於Node中的EJS，可以讓HTML頁面動態化

1. 大括號表達式
2. 指令（以v-開頭的自定義標籤屬性）

雙大括號表達式

語法：{{exp}}
功能

1. 向頁面輸出數據
2. 內部可以是變量、對象調用、表達式

注意：

1. 大括號內一定要有結果
2. 雙括號表達式僅適用於標籤之間的數據渲染，不適用於標籤屬性

強制數據綁定

語法：v-bind:aaa='bbb'：bbb會作爲表達式解析執行
簡潔寫法：:aaa='bbb'
功能

1. 向頁面輸出數據
2. 內部可以是變量、對象調用、表達式
   注意
   一定要有結果
   

綁定事件監聽

語法：v-on:click='aaa'：aaa是指綁定指定事件名的回調函數
簡潔寫法：@click='aaa'
功能：觸發一個事件
vm中另外一個鉤子，methods



帶有參數的函數

計算屬性(computed)和偵聽器(watch)

計算屬性(computed)：僅進行運算

1. 作用
   1）減少模板中的計算邏輯
   2）進行數據緩存
   3）依賴固定的數據類型（響應式數據）

2. 使用
   1）在computed屬性（配置計算屬性）對象中定義計算屬性的方法
   
   2）在頁面中使用{{方法名}}來顯示計算的結果
   ① 單向：實現get
   

   ② 雙向：實現get與set
   
   
   3）通過getter/setter實現對屬性數據的顯示和監視

偵聽器(watch)：可以執行任何邏輯，僅能實現單向

1. 作用
   1）比computed更加靈活
   2）watch中可以執行任何邏輯，比如：函數節流、Ajax異步數據獲取、甚至操作DOM
   3）依賴固定的數據類型（響應式數據）
2. 使用
   1）通過通過vm對象的$watch()或watch配置來監視指定的屬性
   2）當屬性變化時, 回調函數自動調用, 在函數內部進行計算
   
   

總結

1. computed能做的，watch都能做，反之則不行
2. 能用computed的地方，儘可能使用computed
3. computed 是計算一個新的屬性，並將該屬性掛載到 vm（Vue 實例）上，而 watch 是監聽已經存在且已掛載到 vm 上的數據，所以用 watch 同樣可以監聽 computed 計算屬性的變化（其它還有 data、props）
4. computed 本質是一個惰性求值的觀察者，具有緩存性，只有當依賴變化後，第一次訪問 computed 屬性，纔會計算新的值，而 watch 則是當數據發生變化便會調用執行函數
5. 從使用場景上說，computed 適用一個數據被多個數據影響，而 watch 適用一個數據影響多個數據

class與style

概念

在模板界面中，某些元素的樣式是變化的，class/style用於動態綁定類和樣式
class/style綁定技術就是專門用來處理動態樣式效果

class

:class='aaa'
aaa取值：字符串、對象、數組

style

:style="{ backgroundColor: bgColor, fontSize: fSize}"
其中 bgColor/fSize 都是 data 屬性

條件渲染指令

v-if/v-else/v-else-if

v-show

兩者區別

v-if是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建
v-show不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換
如果需要頻繁切換 v-show 較好

列表渲染

數組遍歷

對象遍歷

爲什麼要綁定Key?

key是給每一個vnode的唯一id，可以依靠key，更準確、更快地拿到oldVnode中對應的vnode節點
使用注意

1. 儘可能不要使用index作爲key
   會帶來狀態bug問題
2. 最好使用靜態key作爲Dom的key
   shortid

過濾遍歷

排序遍歷

其它常用指令和自定義指令

常用內置指令

1. v-text：更新元素的 textContent
2. v-html：更新元素的 innerHTML
   不建議使用
   在網站上動態渲染任意 HTML 是非常危險的，因爲容易導致 XSS 攻擊
3. v-show
4. v-if
5. v-else
6. v-else-if
7. v-for：Array | Object | number | string | Iterable
8. v-on
9. v-bind
10. v-model
11. v-slot：提供具名插槽或需要接收 prop 的插槽（後面講）
12. v-pre：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
13. v-cloak：防止閃現
    和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到實例準備完畢
14. v-once：只渲染元素和組件一次。隨後的重新渲染，元素/組件及其所有的子節點將被視爲靜態內容並跳過。這可以用於優化更新性能。
15. 特殊特性：ref

自定義指令

1. 自定義全局組件

   /*
   註冊全局組件
   el: 指令所在的標籤對象
   binding: 包含指令相關數據的容器對象
   */
   Vue.directive('upper-text', (el, binding)=>{
    console.log(el, binding.value);
    el.textContent = binding.value.toUpperCase()
   });
   

2. 自定義指令

   // 自定義局部組件
   directives: {
       'lower-text'(el, binding) {
           console.log(el, binding);
           el.textContent = binding.value.toLowerCase()
       }
   }
   

事件處理

事件綁定監聽

v-on:xxx="func"
@xxx="func"
@xxx="func(參數)"
v-on:xxx="函數名"

參數

默認事件形參: event
隱含屬性對象: $event
在原生事件中，$event是事件對象
在自定義事件中，$event是傳遞過來的數據

事件修飾符

.prevent：阻止事件的默認行爲 event.preventDefault()
.stop：停止事件冒泡 event.stopPropagation()

按鍵修飾符

.keycode: 操作的是某個keycode值的健
.enter: 操作的是enter鍵
.tab
.delete： (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

綜合小練習