前端學習總結(二十一)Vue.js

Vue概述

實質:構建數據驅動的 web 界面的庫

目標:通過盡可能簡單的 API 實現響應的數據綁定組合的視圖組件

特點:

隻聚焦於視圖層,簡單易於學習,容易與其它庫或已有項目整合。

在與相關工具和支持庫一起使用時,能完美地驅動復雜的單頁應用。

Vue和其他技術的對比

VS Angular:

1.比 Angular 簡單得多,可以快速掌握

2.更加靈活開放,允許以希望的方式組織應用程序,而不是任何時候都遵循 Angular 的規則。僅僅是一個視圖層,可以嵌入到一個現有頁面而不一定要做成一個龐大的單頁應用。

配合其他庫方面有更大的的空間,但相應的也需要做更多的架構決策。如,Vue.js 核心默認不包含路由和 Ajax 功能,並通常假定在應用中使用一個模塊構建系統。

3.Angular 使用雙向綁定,Vue 也支持雙向綁定,默認為單向綁定數據從父組件單向傳給子組件。在大型應用中使用單向綁定讓數據流易於理解

4.Vue中指令和組件分得更清晰指令隻封裝 DOM 操作,而組件代表一個自給自足的獨立單元 —— 有自己的視圖和數據邏輯。在 Angular 中兩者有不少相混的地方。

5.Vue有更好的性能,且非常容易優化,因為它不使用臟檢查。*Angular,當 watcher 越來越多時會變得越來越慢,因為作用域內的每一次變化,所有 watcher 都要重新計算。並且,如果一些 watcher 觸發另一個更新,臟檢查循環可能要運行多次*。

Angular 用戶常常要使用深奧的技術,以解決臟檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的作用域。Vue.js 則根本沒有這個問題,因為它使用基於依賴追蹤的觀察系統並且異步列隊更新,所有的數據變化都是獨立地觸發,除非它們之間有明確的依賴關系。唯一需要的優化是在 v-for 上使用 track-by。

而Angular 2 和 Vue 用相似的設計解決瞭一些 Angular 1 中存在的問題。

VS React

同:都提供數據驅動、可組合搭建的視圖組件。

異:

1.內部實現本質不同。React 的渲染建立在 Virtual DOM 上——一種在內存中描述 DOM 樹狀態的數據結構。當狀態發生變化時,React 重新渲染 Virtual DOM,比較計算之後給真實 DOM 打補丁

2.Virtual DOM 提供瞭函數式的方法描述視圖,它不使用數據觀察機制,每次更新都會重新渲染整個應用,因此從定義上保證瞭視圖與數據的同步。它也開辟瞭 JavaScript 同構應用的可能性。

3.Vue.js 不使用 Virtual DOM 而是使用真實 DOM 作為模板,數據綁定到真實節點。Vue.js 的應用環境必須提供 DOM。但是,相對於常見的誤解——Virtual DOM 讓 React 比其它的都快, Vue.js 實際上性能比 React 好,而且幾乎不用手工優化。而* React,為瞭最優化的渲染需要處處實現 shouldComponentUpdate 和使用不可變數據結構*

4.在 API 方面,React(或 JSX)的一個問題是,渲染函數常常包含大量的邏輯,最終看著更像是程序片斷而不是界面的視覺呈現。對於部分開發者來說,他們可能覺得這是個優點,但對那些像我一樣兼顧設計和開發的人來說,模板能讓我們更好地在視覺上思考設計和 CSS。JSX 和 JavaScript 邏輯的混合幹擾瞭我將代碼映射到設計的思維過程。相反,Vue.js 通過在模板中加入一個輕量級的 DSL (指令系統),換來一個依舊直觀的模板,且能將邏輯封裝進指令和過濾器中。

5.React 的另一個問題是:DOM 更新完全交給 Virtual DOM,想要自己控制 DOM 時就比較棘手。如果應用需要特別的自定義 DOM 操作,特別是復雜時間控制的動畫,這個限制就很討厭。在這方面,Vue.js 更靈活。

React的函數式特質,可以很好地使用函數式編程模式。但是對於初級開發者和初學者這也導致較大的學習難度。Vue 更易學習和開發。

對於大型應用,React 社區已經創造瞭大量的狀態管理方案,如 Flux/Redux。Vue 本身不解決這個問題,但是可以輕松地修改狀態管理模式,實現一個類似的架構。Vue 有自己的狀態管理方案 Vuex,而且 Vue 也可以與 Redux 一起用

Vue 的 單文件組件 在把 CSS 封裝到組件模塊的同時仍然允許你使用喜歡的預處理器。

Vue 實例

創建Vue實例:

每個 Vue 應用的起步都是通過構造函數 Vue() 創建 Vue 的根實例:

var vm = new Vue({
  // 選項
})

一個 Vue 實例是一個ViewModel (MVVM 模式) 。

在實例化 Vue 時,要傳入一個選項對象,它可以包含數據、模板、掛載元素、方法、生命周期鉤子等選項。

Vue實例的屬性與方法

1.數據屬性

每個 Vue 實例都會代理其 data 對象裡所有的屬性

var data = { a: 1 }
var vm = new Vue({
  el:'id1', //el:綁定id
  data: data //data:綁定數據
})

vm.a === data.a // -> true vm實例的數據與其data所綁定的對象的數據是保持一致的

隻有這些被代理的屬性是響應的。在實例創建之後添加新的屬性到實例上不會觸發視圖更新。

註意隻有這些被代理的屬性是響應的。如果在實例創建之後添加新的屬性到實例上,它不會觸發視圖更新。我們將在後面詳細討論響應系統。

2.其他屬性與方法

除瞭data屬性代理數據,Vue 實例暴露瞭一些有用的實例屬性與方法。這些屬性與方法都有前綴 $ ,如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // Vue實例對象.$data 綁定瞭數據
vm.$el === document.getElementById('example') // .$el綁定瞭id

// $watch 是一個實例方法,當Vue實例的某屬性改變後觸發回調函數
vm.$watch('a', function (newVal, oldVal) {
  // 這個回調在 `vm.a`  改變後調用
})

Vue實例的生命周期

Vue 實例在創建時有一系列初始化步驟,它也將調用一些生命周期鉤子,給自定義邏輯提供運行機會。例如 created 鉤子在實例創建後調用:

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () { //註意這個函數
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }
})

也有一些其它的鉤子,在實例生命周期的不同階段調用,如 compiled、 ready 、destroyed。鉤子的 this 指向調用它的 Vue 實例。Vue.js 沒有“控制器”的概念。組件的自定義邏輯可以分割在這些鉤子中

數據綁定

Vue擁抱數據驅動的視圖概念。即:在普通 HTML 模板中用特殊語法將 DOM “綁定”到底層數據。一旦創建綁定,DOM 將與數據保持同步。每當修改數據,DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數據瞭,不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護


Hello {{ name }}!

// 2.這是 Model,即數據量或數據對象
var exampleData = {
  name: 'Vue.js'
}

// 3.這是Vue 實例(作為ViewModel)
// 它連接 View 與 Model
// 通過new Vue()創建,el綁定視圖的id,data綁定data的數據
var exampleVM = new Vue({
  el: '#example-1',
  data: exampleData
})    

DOM 會自動響應數據的變化。

Vue.js 模板通過一些特殊的特性做瞭html的增強。Vue 模板因而從根本上不同於基於字符串的模板。

綁定值

1.文本(雙大括號綁定顯示)

Message: {{ msg }}

每當這個屬性變化時標簽中顯示的值也會更新。

如果隻處理單次插值,今後的數據變化不想再引起插值更新,就在{{後加 *。

2.原始的 HTML

為輸出 HTML 字符串,需要用{{{ }}}。

在網站上動態渲染任意 HTML 很危險,容易導致 XSS 攻擊。記住,隻對可信內容使用 HTML 插值,永不用於用戶提交的內容

3.HTML 特性

{{}}也可以用在 HTML 特性內:


 

註意: Vue.js 指令和特殊特性內不能用插值。

綁定 JS 表達式

用{{JS 表達式}},如:

{{ message.split('').reverse().join('') }}

每個綁定隻能包含單個表達式,且不能綁定js語句。

過濾器

{{ message | 過濾器 }} //可接多個 | 過濾器

過濾器接受參數:

{{ message | filterA 'arg1' arg2 }}

過濾器函數始終以表達式的值作為第一個參數。後面跟的參數作為第2,3,…個參數。帶引號的參數視為字符串,而不帶引號的參數按表達式計算

指令

指令帶有前綴 v-,以指示它們是 Vue.js 提供的特殊特性,它們會對綁定的目標元素添加響應式的特殊行為。

指令的值限定為綁定表達式,因此上面提到的 JavaScript 表達式及過濾器規則在這裡也適用。

如:v-if


Hello!

var exampleVM2 = new Vue({
  el: '#example-2',
  data: {
    greeting: true
  }
})

指令綁定參數

有些指令可以名稱後帶一個“參數”,中間用冒號隔開。如,v-bind 指令用於響應地更新 HTML 特性


這裡 href 是參數,它告訴 v-bind 指令將元素的 href 特性跟表達式 url 的值綁定。用特性插值 href=”{{url}}” 能獲得同樣的結果。

再如 v-on 指令,它用於監聽 DOM 事件:


這裡參數是被監聽的事件的名字。

修飾符

修飾符以半角句號 . 開始的特殊後綴,用於表示指令應當以特殊方式綁定。例如 .literal 修飾符告訴指令將它的值解析為一個字面字符串而不是一個表達式:


指令縮寫

Vue.js 為兩個最常用的指令 v-bind 和 v-on 提供特別的縮寫:

(1)v-bind縮寫為冒號(:)



(2)v-on: 縮寫為 @





這些縮寫用的多瞭還是能夠提高編碼效率的。

過渡

Vue指令不僅可以綁定 DOM 文本到數據,也可以綁定 DOM 結構 到數據。而且,Vue提供一個強大的過渡效果系統,可以在 Vue 插入/刪除元素時自動應用過渡效果

通過 Vue.js 的過渡系統,可以在元素從 DOM 中插入或移除時自動應用過渡效果。Vue.js 會在適當的時機為你觸發 CSS 過渡或動畫,你也可以提供相應的 JavaScript 鉤子函數在過渡過程中執行自定義 DOM 操作

為應用過渡效果,需要在目標元素上使用 transition 特性:


 

transition 特性可以與下面資源一起用:
v-if;
v-show;
v-for (隻在插入和刪除時觸發,使用 vue-animated-list 插件);
動態組件 ;
在組件的根節點上,並且被 Vue 實例 DOM 方法(如 vm.$appendTo(el))觸發;

當插入或刪除帶有過渡的元素時,Vue 將:

嘗試以 ID “my-transition” 查找 JS 過渡鉤子對象——通過 Vue.transition(id, hooks) 或 transitions 選項註冊。如果找到,將在過渡的不同階段調用相應的鉤子。

自動嗅探目標元素是否有 CSS 過渡或動畫,並在合適時添加/刪除 CSS 類名。

如果沒有找到 JavaScript 鉤子並且也沒有檢測到 CSS 過渡/動畫,DOM 操作(插入/刪除)在下一幀中立即執行

事件處理

用 v-on 指令監聽 DOM 事件(v-on:事件名=“事件處理方法名”),如:


這裡的greet是事件處理器綁定的事件處理方法,在 Vue 實例中定義這個方法

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 對象中定義方法
  methods: {
    greet: function (event) {
      // 方法內 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 代碼中調用方法
vm.greet() // -> 'Hello Vue.js!'

除瞭直接綁定到一個方法,也可以在v-on 指令的值中使用內聯 JavaScript 語句。


new Vue({
  el: '#example-2',
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
})

這裡的say(‘hi’)就直接使用瞭js語句,並傳入瞭參數。

組件

組件系統是 Vue的一個重要概念,它提供一種抽象,讓我們可以用獨立可復用的小組件構建大型應用

它是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。在較高層面上,組件是自定義元素,Vue.js 的編譯器為它添加特殊功能。在有些情況下,組件也可以是原生 HTML 元素的形式,以 is 特性擴展。

一個典型的用 Vue 構建的大型應用可以抽象為一個組件樹。

Vue.js 組件非常類似於 自定義元素—— Web 組件規范(即WebComponents)的一部分。Vue.js 的組件語法參考瞭該規范,但有幾個關鍵的不同:

Web 組件規范仍遠未完成,且沒有瀏覽器實現。而Vue.js 組件不需要任何補丁,並且在所有支持的瀏覽器下表現一致。

Vue.js 組件提供瞭原生自定義元素所不具備的一些重要功能,比如組件間的數據流,自定義事件系統,以及動態的、帶特效的組件替換。

註冊組件

可以用 Vue.extend() 創建一個組件構造器

var MyComponent = Vue.extend({
  // 選項...
})

要把這個構造器用作組件,需要用 Vue.component(tag, constructor) 註冊

// 全局註冊組件,tag 為 my-component
Vue.component('my-component', MyComponent)

註:對於自定義標簽名,最好遵循 W3C 規則(小寫,並包含一個短杠)。

組件在註冊之後,便可以在父實例的模塊中以自定義元素 如: 的形式使用


// 定義
var MyComponent = Vue.extend({
  template: '

A custom component!

' }) // 註冊 Vue.component('my-component', MyComponent) // 創建根實例 new Vue({ el: '#example' })

渲染的時候回渲染為:


A custom component!

組件的模板會自動替換瞭自定義元素,自定義元素的作用隻是作為一個掛載點。可以用實例選項 replace 決定是否替換。

發佈留言