Vue.js基礎特性是什么

這篇文章主要講解了“Vue.js基礎特性是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue.js基礎特性是什么”吧！

一、Vue.js簡介

二、基礎特性

A.實例及選項

1.一個Vue實例相當于一個MVVM模式中的ViewModel，在實例化的時候，我們可以傳入一個選項對象，包含數據、模板、掛載元素、方法、生命周期勾子等選項

2.只有初始化時傳入的對象才是響應式的

3.如果需要在實例化之后加入響應式變量，需要調用實例方法$set，我們應盡量在初始化的時候，把所有的變量都設定好，如果沒有值，也可以用undefined或null占位

4.組件類型的實例可以通過props獲取數據，同data一樣，也需要在初始化時預設好

5.可以通過選項屬性methods對象來定義方法，并且使用v-on指令來監聽DOM事件

6.Vue.js實例生命周期：

beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed、beforeUpdate、updated、activated、deactivated

B.數據綁定

1.Vue2.0已經去除內置過濾器

2.指令（Directives），當表達式的值發生改變時，會有些特殊行為作用到綁定的DOM上。Vue中是前綴帶有v-的屬性，指令的值限定為綁定表達式；修飾符（Modifiers）是以半角句號.開始的特殊后綴，用于表示指令應該以特殊方式綁定

3.表單參數特性：修飾符lazy、修飾符number、修飾符trim

C.模板渲染

1.v-show會渲染并顯示在DOM中，只是切換元素的css屬性display，而v-if不會顯示DOM，v-show消耗的性能要小

D.事件綁定與監聽

1.提供了v-on指令用于監聽DOM事件，通常在模板內直接使用，v-on:后參數接受所有的原生事件名稱

2.提供了修飾符：.stop、.prevent、.capture、.self

3.提供了按鍵修飾符：enter、tab、delete、esc、space、up、down、left、right

三、指令

A.內置指令

1.v-bind主要用于動態綁定DOM元素屬性（attribute）,即元素屬性實際的值是由vm實例中的data屬性提供的；三種修飾符：.camel，將綁定的我名字團圓駝峰命名 

2.v-model用于input、select、textarea標簽中，具有lazy、number、trim修飾符

3.v-if/v-else/v-show，用于根據條件展示對應的模板內容，v-if在條件為false的情況下并不進行模板的編譯，而v-show則會隱藏，v-if的切換消耗要比v-show高，但初始條件為false的情況下，v-if的初始渲染要稍快

4.v-for循環

5.v-on，事件綁定

6.v-text，參數類型為String，作用是更新元素的textContent，與{{}}不同的是，v-text需要綁定到某個元素上，能避免未編譯前的閃現問題

7.v-HTML，接受的字符串不會進行編譯等操作，按普通HTML處理，同v-text類似

8.v-el，為DOM元素注冊了一個索引，使得我們可以直接訪問DOM元素，可以通過擴展性實例的$els屬性調用，或者在vm內部通過this進行調用

9.v-ref，與v-el類似，只不過作用于子組件上，實例可以通過$refs訪問子組件

10.v-pre，就是路過編譯這個元素和子元素，顯示原始的{{}}標簽，用來減少編譯時間

11.v-cloak，相當于在元素上添加了一個[v-cloak]屬性，直到關聯的實例結束編譯

12.v-once，用于標明元素或組件只渲染一次，即使隨后發生綁定數據的變化或更新，該元素或組件及包含的子元素都不會再次被編譯和渲染，可以提升頁面性能，忽略一些明確 不需要變化的步驟

B.自定義指令基礎

1.可以通過Vue.directive(id, definition)方法注冊一個全局自定義指令，id是指令的唯一標識，定義對象則是指令的相關屬性及鉤子函數；也可以通過在組件 的directives選項注冊一個局部的自定義指令

2.定義對象主要包含三個鉤子函數：

• bind：只被調用一次，在指令第一次綁定到元素上時使用

• update：指令在bind之后以初始值為參數進行第一次調用，之后每次當綁定值發生變化時調用，接收到的參數為newValue和oldValue

• ubind：指令從元素上解綁時調用，只調用一次

3.指令屬性this.xxx：(2.0取消了this，沒有指令實例這一概念，通過參數的形式傳給勾子函數，如update:function(el, binding,vnode,oldVNode){….})

• el：指令綁定的元素

• vm：該指令的上下文ViewModel，可以為new Vue0的實例，也可以為組件實例

• expression：指令的表達式，不包括參數和過濾器

• arg：指令的參數

• name：指令的名字，不包括v-前綴

• modifiers：一個對象，包含指令的修飾符

• descriptor：一個對象，包含指令的解析結果

C.指令的高級選項

1.定義對象中可以接受一個params數組，將自動提取自定義指令綁定元素上的這些屬性

2.在自定議指令中，如果需要向Vue實例寫回數據，就需要在定義對象中使用twoWay:ture，這樣可以在指令中使用this.set(value)來寫回數據

*2.0大大削弱了指令相關功能

四、過濾器

1.Vue.js提供了全局方法Vue.filter()注冊一個自定義過濾器，接受過濾器的ID和過濾器函數兩個參數

2.在2.0中取消了內置過濾器，即capitalize、uppercase、json等，建議盡量使用單獨的插件來按需加入你所需要的過濾器；取消了對v-model和v-on的支持，只能使用在{{}}標簽中；修改了過濾器參數的使用方式，采用函數的形式而不是空格來標記參數

五、過渡

A.CSS過渡

1.使用transition綁定一個DOM元素，過濾系統自動給元素添加*-transition的class類名，在插入和移除時添加了另外兩個糊鍋：*-enter和*-leave

2.Vue.js提供了在插入或DOM元素時類名變化的鉤子函數，通過Vue.transition(’name’,{})的方式來執行具體的函數操作，包括beforeEnter、enter、afterEnter、enterCancelled、beforeLeave、leave、afterLeave、leaveCancelled；enter和leave函數都有第二個可選的回調參數，用于控制過渡何時結束，而不是監聽transitionend和animationend事件

3.自定義過渡類名，enterClass屬性和leaveClass屬性

4.Vue.js官方推薦CSS動畫庫，animate.css，需要先給元素附上animated類名，然后再添加預設的動效類名

B.JavaScript過渡

1.Velocity.js

C.過渡系統在Vue.js 2.0中的變化 

1.取消了v-transition指令，新增transition的內置標簽，包含name、appear、css、type、mode屬性，如<transition name=‘xxx’>zzzz</transition>

2.新增了兩個類名enter-active和leave-active，用于你也說了元素本身樣式和過渡樣式，可以把過渡樣式放到*-enter-active、*-leave-active中，*-enter、*-leave中則定義元素過渡前的樣式

3.添加了三個新的鉤子函數，before-appear、appear、after-appear，before-appear：用于元素的首次渲染，再次渲染時會調用enter，另兩個類似

4.取消了v-if時的leave-cancelled，但使用v-show時仍然有效

5.提供了transition-group標簽，方便作用到多個DOM元素上，主要作用是給其子元素設定一個統一的過渡樣式，而不需要給每單個元素都用transition包裹起來，不是一個虛擬DOM，會真實渲染在DOM樹中，默認會是span標簽，可以通過屬性tag來設定

六、組件

A.組件注冊

1.var MyComponent = Vue.extend({...});

2.全局注冊：Vue.component(‘my-component’, MyComponent);

3.局部注冊：限定了組件只能在被注冊的組件中使用，而無法在其他組件中使用，Vue.extend({…,components:{‘my-child’:Child}})

4.可以直接在注冊組件的時候定義組件構造器

B.組件選項

1.組件可能會有多個實例，如果將對象data直接傳遞給了Vue.extend()，那所有組件的實例會共享一個data對象，所以需要通過函數來返回一個新對象

2.選項props起到了父子組件間橋梁的作用

• 組件實例的作用域是孤立的，子組件的模板和模塊中是無法直接調用父組件的數據，所以通過props將父組件的數據傳遞給子組件，子組件在接受數據時需要顯式聲明props

• 組件名使用-分隔

• 可以使用v-bind動態傳遞數據給子組件，數字類型需要通過變量傳遞

• props默認是單向xepg，父組件的數據發生變化時，子組件的數據變化，但在子組件中修改數據不影響父組件，修飾符.sync和.once顯示的聲明綁定為雙向或單次綁定，props是引用傳遞，如果傳遞的是一個對象或數組，則會影響父組件的狀態，不管是不是單向綁定

C.組件間通信

1.直接訪問，Vue.js中提供了三個屬性對其父子組件及根實例進行直接訪問，建議還是使用props傳遞

• $parent：父組件實例

• $children：所有子組件實例

• $root：組件所在的根實例

2.在初始化實例或注冊子組件的時候，可以直接傳給選項events一個對象；也在可以在特定情況下或方法內采用$on方法來監聽事件；

3.事件觸發

• $emit，在實例本身上觸發事件

• $dispatch，事件沿父鏈冒泡，并且在第一次觸發回調之后自動停止冒泡，除非觸發函數明確返回true

• $broadcast，廣播事件，事件會向下傳遞給所有的后代

D.內容分發

1.Vue.js使用<slot>元素為原始內容的插槽

2.父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯；

3.<slot>標簽允許有一個匿名slot，不需要name值，作為找不到匹配的內容片段的回退插槽，如果沒有默認的slot，這些找不到匹配的內容片段將被忽略

4.在父組件中，也可以定義多個相同slot屬性的DOM標簽，這樣會依次插入到對應的子組件的slot標簽中，以兄弟節點的方式呈現

E.動態組件

1.動態組件，即多個組件可以使用同一掛載點，根據條件來切換不同的組件 ，使用保留標簽<component>，通過綁定到is屬性的值來判斷掛載哪個組件 

2.使用keep-alive屬性可以將切換出去的組件保留在內存中，避免重新渲染

3.Vue.js提供了activate勾子函數，作用于動態組件切換或靜態組件初始化的過程中，接受一個回調函數為參數，使用函數后組件才進行之后的渲染過程

F.Vue.js2.0中的變化

1.廢棄了event選項，自定義事件都通過$emit、$on、$off函數來進行觸發、監聽和取消監聽；廢棄了$dispatch和$broadcast方法；官方推薦使用集中式的事件管理機制來處理組件中的通信，而不是依賴于組件本身的結構

2.keep-alive不再是component標簽的屬性，而是成為了單獨的標簽

3.slot不再支持多個相同plot屬性的DOM插入到對應的slot標簽中，一個slot只被使用一次，不再保存自身的屬性及樣式，均由父元素或被插入的元素提供樣式和屬性

4.子組件索引v-ref不再是指令，而替換成一個子組件的特殊屬性

七、Vue.js常用插件

A.Vue-router

1.路由對象：

• $route.path，當前路徑

• $route.params，包含路由中動態片段和全匹配片段的鍵值對

• $route.query，包含路由中查詢參數的鍵值對

• $route.router，路由實例，可以調用go、replace方法進行跳轉

• $route.matched，包含當前匹配的路徑中所有片段對應的配置參數對象

• $route.name，為當前路由設置的name屬性

2.v-link指令是vue-router應用中用于路徑間跳轉的指令，本質是調用路由實例router本身的go函數進行跳轉，指令接受一個js表達式，也可以直接使用組件內綁定的數據，包含其他的參數：activeClass、exact、replace、append

3.路由器配置

• hashbang，默認true，只在hash模式下可用

• history，默認false，設為true時會啟動HTML5 history模式，利用history.pushState()和history.replaceState()來管理瀏覽歷史記錄

• abstract，默認false，提供了一個不依賴于瀏覽器的歷史管理工具

• root，默認為null，可設置一個應用的根路徑，僅在H5 history模式下可用

• linkActiveClass，默認為v-link-active，符合匹配規則的鏈接會加上linkActiveClass設定的類名

• saveScrollPosition，默認為false，僅在H5 history下可用，當點擊后退按扭時重置頁面滾動位置

• transitionOnLoad，默認為false，在router-view中組件初次加載時是否使用過渡效果

• supppressTransitionError，默認false，設定為true后，將忽略場景切換鉤子函數中發生的異常

4.route鉤子函數

• canActivate()，在組件創建之前被調用

• activate()，在組件創建且將要加載時調用

• data()，在activate之后，用于加載和設置當前組件的數據

• canDeactivate()，在組件被移出前被調用

• deactivate()，在組件移出時調用

• canReuse()，決定組件是否可被重用

5.路由實例屬性及方法

• router.app，路由管理的Vue根實例

• router.mode，值可為H5、hash和abstract

• router.stop()，停止監聽popstate和hashchange事件

• router.map()，定義路由規則的方法

• router.on()，添加一條頂級 的路由配置

• router.go(path)，跳轉到一個新路由

6.vue-router2.0變化：初始化方式、路由規則配置和啟動方式、取消了v-link使用<router-link>等

B.Vue-resource

C.Vue-devtools

八、Vue.js工程實例

A.準備工作

1.webpack是一款模塊加載及處理工具，它能把各種資源，例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模塊來作用和處理，可以把ES6語法的js文件，sass樣式等無法直接在瀏覽器中使用的語言編譯成瀏覽器支持的形式，也可以把需要的文件進行合并、壓縮混淆

2.vue-loader是webpack的一個loader加載器，用于處理我們編寫的.vue文件，可以將一個組件的html、css、js放在一個文件中，用不同的標簽包裹住即可

B.目錄結構

1.vue-cli工具，npm全局安裝后，可以vue init webpack，包含五種腳手架：webpack、webpack-simple、browerify、browerify-simple、simple

九、狀態管理：Vuex

1.Vuex是狀態管理模式的一種實現庫，主要以插件的形式和Vue.js進行配合使用，能夠使我們在Vue.js中管理復雜的組件事件流，核心概念包括Store（倉庫）、State（狀態）、Mutations（變更）、Actions（動作）

十、Vue.js 2.0新特性

A.Render函數

1.提供了自由度更高的模板編程能力，而不僅僅限于之前的v-if/v-else指令

B.服務端渲染

感謝各位的閱讀，以上就是“Vue.js基礎特性是什么”的內容了，經過本文的學習后，相信大家對Vue.js基礎特性是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！