再學vue

一、不要在實例屬性或者回調函數中（如 vm.$watch('a', newVal => this.myMethod())）使用 箭頭函數。由於箭頭函數綁定父上下文，因此 this 不會像預想的同樣是 Vue 實例，而是 this.myMethod 未被定義。

 

二、「Mustache」 語法（雙大括號）中的js只能包含單個表達式，雙大括號會將數據解釋爲純文本，而非 HTML 。爲了輸出真正的 HTML ，你須要使用 v-html 指令（1.0是{{{ }}}）。經過使用  v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。

 

三、Vue 2.x 中，過濾器只能在 mustache 綁定和 v-bind 表達式（從 2.1.0 開始支持）中使用，由於過濾器設計目的就是用於文本轉換。爲了在其餘指令中實現更復雜的數據變換，你應該使用 計算屬性。過濾器還能夠串聯。過濾器是 JavaScript 函數，所以能夠接受參數。

 

四、計算屬性：

  4.1咱們能夠經過調用表達式中的method來達到一樣的效果：{{ reverseMessage() }}，計算屬性是基於它的依賴緩存，computed: {now: function () {return Date.now()}}Date.now() 不是響應式依賴。相比而言，每當從新渲染的時候，method 調用總會執行函數。若是你不但願有緩存，請用 method 替代。

  4.2計算屬性默認只有 getter ，不過在須要時你也能夠提供一個 setter 。

  4.3雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的 watcher 。這是爲何 Vue 提供一個更通用的方法經過 watch 選項，來響應數據的變化。當你想要在數據變化響應時，執行異步操做或開銷較大的操做，這是頗有用的。

 

五、class與style綁定:

v-bind:class="{ active: isActive, 'text-danger': hasError }"

v-bind:class=「classObject" data: {classObject: {active: true,'text-danger': false}}

也能夠在這裏綁定返回對象的計算屬性

v-bind:class="[activeClass, errorClass]」 data: {activeClass: 'active',errorClass: 'text-danger'}

當你在一個定製的組件上用到 class 屬性的時候，這些類將被添加到根元素上面，這個元素上已經存在的類不會被覆蓋。

 

六、v-if v-show

v-show不支持template寫法（即不能同時控制多個同級連續div）

Vue 嘗試儘量高效的渲染元素，一般會複用已有元素而不是從頭開始渲染。

若是不要複用元素，添加一個屬性 key，key 必須帶有惟一的值。

使用key，它會基於key的變化從新排列元素順序，而且會移除key不存在的元素。

 

七、v-for

  7.1循環數組：(item, index) in items 第一個爲數組成員，第二個是索引

  7.2循環對象：(value, key, index) in obj 第一個爲值，第二個爲鍵，第三個爲索引

  建議儘量使用 v-for 來提供 key ，除非迭代 DOM 內容足夠簡單，或者你是故意要依賴於默認行爲來得到性能提高。

 

八、事件處理

有時須要在出發的方法中訪問原生 DOM 事件。能夠用特殊變量 $event 把它傳入方法。

 

九、表單

你能夠添加一個修飾符 lazy ，從而轉變爲在 change 事件中同步：<input v-model.lazy="msg" >

若是想自動將用戶的輸入值轉爲 Number 類型（若是原值的轉換結果爲 NaN 則返回原值），能夠添加一個修飾符 number給 v-model 來處理輸入值：<input v-model.number="age" type="number">這一般頗有用，由於在 type="number" 時 HTML 中輸入的值也老是會返回字符串類型。

若是要自動過濾用戶輸入的首尾空格，能夠添加 trim 修飾符到 v-model 上過濾輸入：<input v-model.trim="msg">

每次父組件更新時，子組件的全部 prop 都會更新爲最新值。這意味着你不該該在子組件內部改變 prop 。

有時候，你可能想在某個組件的根元素上監聽一個原生事件。可使用 .native 修飾 v-on 。

 

v-model僅僅是一個語法糖。要讓組件的 v-model 生效，它必須：

• 接受一個 value 屬性
• 在有新的 value 時觸發 input 事件

 

除非子組件模板包含至少一個 <slot> 插口，不然父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片斷將插入到 slot 所在的 DOM 位置，並替換掉 slot 標籤自己。

最初在 <slot> 標籤中的任何內容都被視爲備用內容。備用內容在子組件的做用域內編譯，而且只有在宿主元素爲空，且沒有要插入的內容時才顯示備用內容。

<slot> 元素能夠用一個特殊的屬性 name 來配置如何分發內容。多個 slot 能夠有不一樣的名字。具名 slot 將匹配內容片斷中有對應 slot 特性的元素。

 

<slot> 元素自身將被替換。

 

**做用域插槽(2.1.0 新增)

自組件能夠控制佈局循環等，父組件能夠讀取子組件的props值並控制顯示的內容

 

<component v-bind:is="currentView"></component>經過控制變量的值(爲組件名)，來掛載(顯示)哪一個組件    ——  還不如用if

 

 

十、雜項：

核心：Vue 組件的 API 來自三部分 - props, events 和 slots ：

• Props 容許外部環境傳遞數據給組件
  
  
• Events 容許組件觸發外部環境的反作用
  
  
• Slots 容許外部環境將額外的內容組合在組件中。
  
  

$refs 只在組件渲染完成後才填充，而且它是非響應式的。它僅僅做爲一個直接訪問子組件的應急方案——應當避免在模版或計算屬性中使用 $refs

若是組件未經 slot 元素傳遞內容，你甚至能夠在組件名後使用 / 使其自閉合：<my-component/>

 

組件在它的模板內能夠遞歸地調用本身，不過，只有當它有 name 選項時才能夠

 

Circular References Between Components(組件的循環引用)：感受像是二叉樹列表，能夠展開多級菜單那種

 

儘管在 Vue 中渲染 HTML 很快，不過當組件中包含大量靜態內容時，能夠考慮使用 v-once 將渲染結果緩存起來

 

用v-once將低級組件只渲染一次，提高性能

 

十一、進階：

11.1響應式原理

Vue 遍歷data()對象全部的屬性並生成getter,setter。

每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。

Vue 不能檢測到對象屬性的添加或刪除，須要用vm.$set(obj, key, value)和vm.$(obj, key)

數組修改某一值也不能檢測到，應該使用數組方法

vue屬性必須在 data 對象上存在才能是響應的

當數據產生變化，vue異步更新DOM

 

11.2過分效果（不看，看不懂）

 

11.3過分狀態（不看，看不懂）

 

11.4Render函數

用JSX語法編寫template組件。.vue -> template -> render 

https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage

 

11.5自定義指令

  對純 DOM 元素進行底層操做。Vue.directive('focus', {inserted: function (el) {el.focus()}})。<input v-focus>

第一個參數是指令名，第二個參數是對象，有DOM插入和移除等函數操做，其參數是

el：指令所綁定的元素；

binding： 一個對象，包含值等屬性；

vnode：Vue編譯生成的虛擬節點；

oldVnode：上一個虛擬節點；

除了el還有其餘參數，都是隻讀的，儘可能不要修改。

11.6混合（Mixin）

混合除了data()，還有created，methods等屬性

混合以本身的屬性爲準，其次是全局屬性

11.7插件

暫時沒什麼好研究，install = function (Vue, options)

11.8單文件組件

有空學學webpack怎麼玩

11.9生產環境部署

若是在組件渲染時出現運行錯誤，錯誤將會被傳遞至全局 Vue.config.errorHandler 配置函數（若是已設置）

11.10單元測試

斷言什麼的暫時不看

11.11服務器端渲染

須要用到服務器端渲染的狀況：

SEO（搜索引擎優化），客戶端的網絡比較慢，客戶端運行在老的js引擎上

 

###API部分

1. Vue.config.silent = true  取消 Vue 全部的日誌與警告。
2. Vue.config.errorHandler = function (err, vm) {}   指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時，可獲取錯誤信息和 Vue 實例。
3. Vue實例的方法：data(),computed,methods等等，不要用箭頭函數，不然this不是當前vue實例
4. el：掛載目標
5. render：字符串模板的代替方案，容許你發揮 JavaScript 最大的編程能力。render 函數接收一個 createElement 方法做爲第一個參數用來建立 VNode。
6. beforeCreate：在實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。
7. created：實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
8. beforeMount：在掛載開始以前被調用：相關的 render 函數首次被調用。（該鉤子在服務器端渲染期間不被調用）
9. mounted：el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。（該鉤子在服務器端渲染期間不被調用）
10. beforeUpdate：
    數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。 你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。 （該鉤子在服務器端渲染期間不被調用）
11. updated：
    因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。 當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態，由於這可能會致使更新無限循環。（該鉤子在服務器端渲染期間不被調用）
12. activated：keep-alive 組件激活時調用。（該鉤子在服務器端渲染期間不被調用）
13. activated：keep-alive 組件停用時調用。（該鉤子在服務器端渲染期間不被調用）
14. beforeDestroy：實例銷燬以前調用。在這一步，實例仍然徹底可用。（該鉤子在服務器端渲染期間不被調用）
15. destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。（該鉤子在服務器端渲染期間不被調用）
16. name：
    容許組件模板遞歸地調用自身。注意，組件在全局用 Vue.component() 註冊時，全局 ID 自動做爲組件的 name。 指定 name 選項的另外一個好處是便於調試。有名字的組件有更友好的警告信息。另外，當在有 vue-devtools, 未命名組件將顯示成 <AnonymousComponent>, 這很沒有語義。經過提供 name 選項，能夠得到更有語義信息的組件樹。
17. Vue.config.delimiters = ['[[', ']]’]：改變純文本插入分隔符(‘{{ }}')。 這個選擇只有在獨立構建時纔有用。
18. watch：注意：在變異（不是替換）對象或數組時，舊值將與新值相同，由於它們的引用指向同一個對象/數組。Vue 不會保留變異以前值的副本。vm.$watch 返回一個取消觀察函數，用來中止觸發回調：var unwatch = vm.$watch('a', cb) unwatch()第三個參數是一個選項對象。deep: true  爲了發現對象內部值的變化，能夠在選項參數中指定 deep: true 。注意監聽數組的變更不須要這麼作。immediate：在選項參數中指定 immediate: true 將當即以表達式的當前值觸發回調
19. vm.$off( [event, callback] )：移除事件監聽器。
20. vm.$forceUpdate()：迫使Vue實例從新渲染。注意它僅僅影響實例自己和插入插槽內容的子組件，而不是全部子組件。
21. vm.$destroy()：
    徹底銷燬一個實例。清理它與其它實例的鏈接，解綁它的所有指令及事件監聽器。 觸發 beforeDestroy 和 destroyed 的鉤子。
22. v-text 至關於 {{ text }}
23. v-pre：跳過這個元素和它的子元素的編譯過程。能夠用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
24. v-cloak：這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一塊兒用時，這個指令能夠隱藏未編譯的 Mustache 標籤直到實例準備完畢。
25. keep-alive：include：包含須要被緩存的組件名，若是爲空字符串就緩存全部exclude：包含不須要被緩存的組件名，若是爲空字符串就緩存全部
26. 計算屬性是能夠賦值的，前提要寫set()，默認只有get()
27. [ NAME ]這種寫法，在定義對象時時取這個變量的值做爲鍵名。單獨這麼寫會返回一個包含這個變量的值的數組