Vue.js學習筆記（參考官網）

起步：

兼容性：

Vue.js 不支持 IE8 及其如下版本，由於 Vue.js 使用了 IE8 不能實現的 ECMAScript 5 特性。 Vue.js 支持全部兼容 ECMAScript 5 的瀏覽器。

雙向綁定：

 

渲染列表：

 

概述

Vue.js（讀音 /vjuː/, 相似於 view）是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。

ue.js 自身不是一個全能框架——它只聚焦於視圖層。在與相關工具和支持庫一塊兒使用時，Vue.js 也能完美地驅動複雜的單頁應用。

 

響應的數據綁定

Vue.js 的核心是一個響應的數據綁定系統，它讓數據與 DOM 保持同步很是簡單。Vue.js 擁抱數據驅動的視圖概 念。通俗地講，它意味着咱們在普通 HTML 模板中使用特殊的語法將 DOM 「綁定」到底層數據。一旦建立了綁定，DOM 將與數據保持同步。

Vue實例

構造器：一個 Vue 實例其實正是一個 MVVM 模式中所描述的 ViewModel - 所以在文檔中常常會使用 vm 這個變量名。

在實例化 Vue 時，須要傳入一個選項對象，它能夠包含數據、模板、掛載元素、方法、生命週期鉤子等選項。所有的選項能夠在 API 文檔中查看。

能夠擴展 Vue 構造器，從而用預約義選項建立可複用的組件構造器：

全部的 Vue.js 組件其實都是被擴展的 Vue 實例。

 

屬性與方法：

實例生命週期：

Vue 實例在建立時有一系列初始化步驟——例如，它須要創建數據觀察，編譯模板，建立必要的數據綁定。在此過程當中，它也將調用一些生命週期鉤子，給自定義邏輯提供運行機會。例如 created 鉤子在實例建立後調用：

生命週期圖示:

數據綁定語法：

Vue.js 的模板是基於 DOM 實現的。這意味着全部的 Vue.js 模板都是可解析的有效的 HTML，且經過一些特殊的特性作了加強。

綁定表達式：過濾器：

指令:

指令 (Directives) 是特殊的帶有前綴 v- 的特性。指令的值限定爲綁定表達式，所以上面提到的 JavaScript 表達式及過濾器規則在這裏也適用。指令的職責就是當其表達式的值改變時把某些特殊的行爲應用到 DOM 上。

參數：v-bind 指令用於響應地更新 HTML 特性：

這裏 href 是參數，它告訴 v-bind 指令將元素的 href 特性跟表達式 url 的值綁定。

另外一個例子是 v-on 指令，它用於監聽 DOM 事件：

縮寫：

v-bind:

v-on縮寫：

 

計算屬性：

在模板中綁定表達式是很是便利的，可是它們實際上只用於簡單的操做。若是須要多於一個表達式的邏輯，應當使用計算屬性。

 

計算屬性 vs $watch（貌似差很少）

計算setter：

 

Class與style綁定

綁定html Class:

對象語法：

咱們能夠傳給 v-bind:class 一個對象，以動態地切換 class。注意 v-bind:class 指令能夠與普通的 class 特性共存：

數組語法：

咱們能夠把一個數組傳給 v-bind:class，以應用一個 class 列表：

 

綁定內聯樣式：

對象語法/數組語法

 

條件渲染：

v-if：若是條件爲true元素顯示

v-show：

　　和v-if類似，不一樣的是有 v-show 的元素會始終渲染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display。

 

v-if VS v-show

通常來講，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換 v-show 較好，若是在運行時條件不大可能改變 v-if 較好。

 

列表渲染：

v-for：可使用 v-for 指令基於一個數組渲染一個列表。這個指令使用特殊的語法，形式爲 item in items，items 是數據數組，item 是當前數組元素的別名：

 

在 v-for 塊內咱們能徹底訪問父組件做用域內的屬性，另有一個特殊變量 $index，正如你猜到的，它是當前數組元素的索引。

 

數組變更檢測：

變異方法：

  push()
   pop()
   shift()
   unshift()
   splice()
   sort()
   reverse()

替換數組：

filter()
concat()
slice()

 

對象v-for：

也可使用 v-for 遍歷對象。除了 $index 以外，做用域內還能夠訪問另一個特殊變量 $key。

 

方法與事件處理器:

方法處理器：跳過。。

內聯語句處理器：

事件修飾符：

鍵盤事件：。。。

 

表單控件綁定

基本用法：

　　能夠用 v-model 指令在表單控件元素上建立雙向數據綁定。根據控件類型它自動選取正確的方法更新元素。

Text。。。

Mutiline text。。。。

Checkbox。。。

Radio。。。

Select。。。

 

過渡：

。。。。。。

 

組件：

註冊：

以前說過，咱們能夠用 Vue.extend() 建立一個組件構造器：

要把這個構造器用做組件，須要用 Vue.component(tag, constructor) 註冊 ：

註冊語法糖：

爲了讓事件更簡單，能夠直接傳入選項對象而不是構造器給 Vue.component() 和 component 選項。Vue.js 在背後自動調用 Vue.extend()：

組件選項問題：

Props：

組件實例的做用域是孤立的。這意味着不能而且不該該在子組件的模板內直接引用父組件的數據。可使用 props 把數據傳給子組件。

prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，可是反過來不會。

動態Props：

 

父子組件通訊：

子組件能夠用 this.$parent 訪問它的父組件。根實例的後代能夠用 this.$root 訪問它。父組件有一個數組 this.$children，包含它全部的子元素。

儘管能夠訪問父鏈上任意的實例，不過子組件應當避免直接依賴父組件的數據，儘可能顯式地使用 props 傳遞數據。另外，在子組件中修改父組件的狀態是很是糟糕的作法，由於：

1. 這讓父組件與子組件緊密地耦合；

2. 只看父組件，很難理解父組件的狀態。由於它可能被任意子組件修改！理想狀況下，只有組件本身能修改它的狀態。

自定義事件：

Vue 實例實現了一個自定義事件接口，用於在組件樹中通訊。這個事件系統獨立於原生 DOM 事件，用法也不一樣。

每一個 Vue 實例都是一個事件觸發器：

• 使用 $on() 監聽事件；

• 使用 $emit() 在它上面觸發事件；

• 使用 $dispatch() 派發事件，事件沿着父鏈冒泡；

• 使用 $broadcast() 廣播事件，事件向下傳導給全部的後代。

不一樣於 DOM 事件，Vue 事件在冒泡過程當中第一次觸發回調以後自動中止冒泡，除非回調明確返回 true。

 

 子組建索引：

 儘管有 props 和 events，可是有時仍然須要在 JavaScript 中直接訪問子組件。爲此可使用 v-ref 爲子組件指定一個索引 ID。例如：

v-ref 和 v-for 一塊兒用時，ref 是一個數組或對象，包含相應的子組件。

 

使用Slot分發內容：

。。。