Vue.js基礎知識有哪些

本篇內容主要講解“Vue.js基礎知識有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue.js基礎知識有哪些”吧!

一、遇見Vue.js

1.MVP，從MVC演化而來，Controller/Presenter負責邏輯的處理，完全把View和Model進行了分享，主要的程序邏輯在Presenter里實現，與具體的View是沒有直接關聯的，而是通過定義好的接口進行交互，從而使得在變更View的時候可以保持Presenter不變

2.MVVM，只是把MVC的Controller和MVP的Presenter改成了ViewModel，View的變化會自動更新到ViewModel，ViewModel的變化也會自動同步到View上顯示

二、數據綁定

三、指令

1.指令（Directive）是特殊的帶有前綴v-的特性，指令的值限定為綁定表達式，指令的職責就是當其表達式的值改變時把某些特殊的行為應用到DOM上

2.v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁地切換，使用v-show較好；如果在運行時條件不大可能改變，則用v-if較好

3.v-model指令參數：number，將用戶的輸入自動轉換為Number類型；lazy，將數據改到在change事件中發生；debounce，設置一個最小延遲，在每次敲擊之后延時同步輸入框的值與數據

4.應該盡量避免直接設置數據綁定的數組元素，因為這些變化 不會被Vue.js檢測到，因而也不會更新視圖渲染

5.使用v-for，將得到一個特殊的作用域，類似于AngularJS的隔離作用域，需要明確指定props屬性傳遞數據，否則在組件 內將獲取不到數據

四、計算屬性

1. 計算屬性就是當其依賴屬性的值發生變化 時，這個屬性的值會自動更新，與之相關的DOM部分也會同步自動更新

   
   

五、表單控件綁定

1.多個復選框放入一個數組中

2.當被選中的option有value屬性時，vm.selected為對應option的value值；否則為對應option的text值

六、過濾器

1.過濾器，本質上都是函數，作用在于用戶輸入數據后，它能夠進行處理，并返回一個數據結果；過濾器函數將始終以表達 式的值作為第一個參數，帶引號的參數會被當作字符串處理，而不帶引號的參數會被當作 數據屬性名來處理

2.內置過濾器：

字母操作：capitalize、uppercase、lowercase

json過濾器：son

限制：limitBy、filterBy、orderBy處理并返回過濾后的數組

currency過濾器：將數字值轉換為貨幣形式輸出

debounce過濾器：延遲處理器一定的時間執行

七、Class與Style綁定

1.可以傳給v-bind:class一個對象，以動態地切換class，v-bind:class指令可以與普通的class特性共存

2.v-bind:style綁定內聯css

八、過濾

1.transition特性可以與這些資源一起搭配使用：v-if、v-show、v-for、動態組件

2.內置Class類名：.xxx-transition、.xxx-enter、.xxx-leave

3.只使用js鉤子時，為js過渡顯式聲明css:false，Vue.js將跳過CSS檢測，這樣也會防止css規則對過渡的干擾

九、Method

1.所有的Vue.js事件處理方法和表達式都嚴格綁定在當前視圖的ViewModel上

2.需要注意：

• methods中定義的方法內的this始終指向創建的Vue實例

• 與事件綁定的方法支持參數event即原生DOM事件的傳入

• 方法在普通元素上時，只能監聽原生DOM事件；用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件

3.四個事件修飾符：.prevent、.stop、.capture、.self

十、Vue實例方法

1.組件樹訪問：$parent、$root、$children、$refs

2.DOM訪問：$el、$els

3.數據訪問：$data、$options

4.實例方法：$appendTo()、$before()、$after()、$remove()、$nextTick()

5.實例event方法：$on()、$once()、$emit()、$dispatch()、$broadcast()、$off()

十一、組件

1.Vue.js的組件可以理解為預先定義好行為的ViewModel類，一個組件可以預定義很多選項，但最核心的：

模板（template）、初始數據（data）、接受的外部參數（props）、方法（methods）、生命周期鉤子函數（lifecycle hooks）

2.props是組件數據的一個字段，期望從父組件傳下來數據，組件的作用域是孤立的，意味著不能并且不應該在子組件的模板內直接引用父組件的數據，所以子組件需要顯式地用props選項來獲取父組件的數據

3.組件通信：this.$parent、this.$children、this.$root，不過子組件應當避免直接依賴父組件的數據，盡量顯式地使用props傳遞數據，在子組件中修改父組件的狀態是非常糟糕的做法，會導致父子緊密地耦合，很難理解父組件的狀態

4.solt作為原始內容的插槽，父組件的內容將被拋棄，除非子組件模板包含<slot>，標簽的內容視為回退內容，回退內容在子組件的作用域內編譯，當宿主元素為空并且沒有內容插入時顯示這個回退內容

5.混合以一種靈活的方式為組件提供分布利用的功能，混合對象可以包含做任意的組件選項，當組件使用了混合對象時，混合對象的所有選項將被“混入”組件自己的選項中

6.生命周期：init、created、beforeCompile、compiled、ready、attached、detached、beforeDestory、destroyed

十二、表單校驗

1.vue-validator

2.v-validate指令語法：v-validate[:field]=“array literal | object literal | binding”

3.內置驗證規則：required、pattern、minlength、maxlength、min、max

4.v-validate所在元素，可以監聽的事件：valid、invalid、touched、dirty、modified

十三、與服務端通信

1.vue-resource

2.vue-async-data，是一個異步加載數據狀態指示的插件，本身并不支持異步獲取服務端數據的功能，僅僅指示數據目前是處于加載 狀態還是已經加載完畢

十四、路由與視圖

1.vue-router

2.vue-router鉤子函數：canReuse、canActivate、activate、data、canDeactivate、deactivate

十五、vue-cli

1.快速生成一個基于Webpack構建的項目：vue init webpack my-project

2.支持的命令：vue init <template-name><project-name>；vue list；

十六、測試開發與調試

1.ESLint

2.工具包：eslint-loader、eslint-friendly-formatter、eslint-config-standard、eslint-plugin-html

3.開發工具：Vue Syntax Highlight、Snippets（sublime）、VUe.js（WebStorm）、Vue（Visual Studio Code）

4.調試工具：Chrome——Vue.js devtools

十七、Scrat+Vue.js的化學反應

1.前端工程化：開發規范、模塊化、組件化、組件庫、性能優化、項目部署、開發流程、工程工具

2.Scrat是UC團隊在百度的FIS基礎上二次開發的webapp模塊化開發框架，最大的特色是模塊化開發和模塊生態，理念是像搭積木一樣開發和維護系統，通過組裝模塊得到一個完整的系統

十八、Vue.js2.0

1.Virtual DOM：通過JS對象表示的樹結構來構建一棵真正的DOM樹，當數據狀態發生變化時可以直接修改這個JS對象，接著對比修改后的JS對象，記錄下需要對頁面做的DOM操作，然后將其應用到真正的DOM樹，實現視圖的更新，這個過程就是Virtual DOM的核心思想

2.服務端渲染優勢：首屏渲染速度更快、SEO、減少HTTP請求

十九、源碼篇——util

1.env：

• 系統判斷：inBrowser、isIE9、isAndroid、isIos、isWechat

• 屬性支持：hasProto

• 過濾屬性：transitionPrep、transitionEndEvent、animationProp、animationEndEvent

2.dom：

• dom操作：query、inDoc、before、after、prepend、extractContent、remove、replace、trimNode、isTemplate、isFragment、getOuterHTML

• 屬性操作：getAttr、getBindAttr、hasBindAttr

• class操作：setClass、addClass、removeClass

• 事件操作：on、off

• 其他：cateAnchor、findRef、mapNodeRange、removeNodeRange

3.lang：

• 對象操作：set、del、hasOwn、extend、isObject、isPlainObject、def

• 名稱轉換：classify、hyphenate、camelize

• 數組操作：indexOf

• 類型轉換：_toString、toNumber、toBoolean、toArray

• 方法綁定：bind

• 其他：debounce、stripQuotes、cancellable、looseEqual、isLiteral、isReserved

4.components：commonTagRe、reservedTagRe、checkComponentAttr

5.options：mergeOptions、resolveAsset

6.debug：warn

到此，相信大家對“Vue.js基礎知識有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！