本文是在閱讀梁灏老師的《vue.js實戰》過程中，随手記錄的一些知識點和内容
這次發出來，
希望能夠對看到文章的你，有所幫助
vue版本：2.x。 因為是幾年前的書了，是以可能會缺少一些在著書後增加的新特性
1. vue SSR是什麼？
vue SSR是 vue服務端渲染的縮寫，是為了解決因前後端分離，頁面在加載時内容無法被搜尋引擎抓取，不利于SEO的問題而出現的方案。
vue SSR方案選擇如下：
1. vue.js 通用應用架構----NUXT
使用NUXT可能會遇到的問題：
① 即一套代碼遇到兩個執行環境=> 在vue的生命周期鈎子函數中，beforeCreate 和 created 會在伺服器端渲染(即 SSR 過程中被調用， 即是說，在這兩個鈎子函數中的代碼以及除了vue生命周期鈎子函數的全局代碼， 都可能會在服務端和用戶端兩套環境下執行)。
問題的可能表現場景，如果在這些可能在兩套環境下都被執行的代碼中加入具有副作用的代碼，或者方問特定平台的代碼，API，将會出現各種問題。比如 服務端沒有window，document對象，如果有對這些對象的引用和操作，将在服務端引起報錯，執行過程将會中斷。
初步總結： 最容易犯的錯誤就是 不判斷環境就使用document，window等對象。
解決辦法：① 在beforeCreate，created生命周期以及全局的執行環境中調用特定的api之前，需要判斷執行環境。
② 使用adapter模式， 寫一套adapter相容不同環境的api。
2. 服務端資料的預擷取
官方方案中使用vuex在服務端預擷取資料，在服務端添加vue鈎子函數，擷取資料後，将資料儲存在vuex的 store結構中，同時渲染頁面。
在資料預擷取階段注冊的鈎子函數中，最好隻進行，資料的擷取和儲存，不進行其他任何涉及this的操作，因為此 時的this是指向服務端的this，是所有使用者共享的this。
vue 在vue SSR 方案下， 應使用 惰性注冊方案，如果不使用惰性注冊方案，而是在一開始，vuex初始化執行個體的時候就把所有的子產品統一注冊，将會出現多個頁面公用許多子產品的問題。
總結一下就是，在服務端預擷取資料的鈎子函數中，不要進行額外的操作，任何對于資料的額外操作都要在vuex的體系下進行。
2. 這塊部分是一些 零碎的 記憶内容
- vue執行個體建立過程中，必不可少的一個選項就是el。el用于指定一個頁面中已存在的DOM元素來挂在vue執行個體，可以是html element, 也可以是css選擇器。
- vue的執行個體屬性和方法都以 $ 符開頭
- v-model 的用法示例：
-
<input v-model='name' /> data: { name: '張三', } 通過v-model将input的value值和data.name關聯，任意修改其中之一，都會對另外一方做出相同的改變 - 所有生命周期鈎子的this都指向調用它的vue執行個體
- vue中插入變量值使用的是Mustache文法 即 {{}} , 雙大括号
- v-html 可以輸出html内容：
-
<div id='app'> <span v-html='link'> </span> </div> <script> var app = new Vue({ el: '#app', data: { link: '<a href="#" target="_blank" rel="external nofollow" >這是一個連結</a>', } }) </script> // 使用v-html 會使得<span>内多出一個可點選的a标簽 // 注意： 如果将使用者産生的内容用v-html輸出，可能導緻xss攻擊，最好在服務端對使用者送出的内容做全面校驗，一般可将尖括号"<>"轉義 - 如果想顯示{{}}标簽，而不是根據mustache文法進行内容替換，使用v-pre指令 即可跳過這個元素和它的子元素編譯過程，如： <span v-pre> {{這裡的内容不會被編譯}} </span>.
- vue的 {{}}中，隻支援單個表達式，不支援語句和流控制，且在{{}}中不能使用使用者自定義的全局變量，隻能使用vue白名單内的全局變量，例如Math和Date。 {{ var book = 'wtf'; }} 錯誤 。 {{if (ok) return msg}} 錯誤（不能使用流控制，條件判斷要改寫成三元運算） 。
- 指令--- 即寫在dom标簽内 以v-開頭的各種功能指令，指令的主要職責就是當其表達式的值改變時，相應地将其對應的某些行為應用到dom上。 v-on綁定的對象，除了方法名，也可以是一個内聯語句。
- 計算屬性computed中的方法名和data中的變量名不要相同，因為在dom值替換和一些同類場景中，調用方法時完全一緻的。
- 所有的計算屬性都以函數形式寫在vue執行個體内的computed選項内，最終傳回計算後的結果。
- 在methods裡寫同名方法，同樣可以實作計算效果，那methods和computed有什麼不同嗎？原因就是計算屬性是基于它的依賴緩存的，一個計算屬性所依賴的資料發生變化時，它才會重新取值，而methods中的方法，隻要資料變化，就會被重新調用一次。
- 總結一下，當周遊大數組和做大量計算時，應當使用計算屬性，除非你不希望得到緩存，即 使用computed或者methods取決于 被傳回的資料是否經常需要更新，若需要，就是methods，不需要 就是 computed。
文法糖
文法糖是指在不影響功能的情況下，添加某種方法實作同樣的效果，多為簡化方法。
如：
v-bind ==> : // v-bind:class='nice' => :class='nice'
v-on ==> @: // v-on:click='abc' => @:click='abc'
文法糖可以簡化代碼的書寫，提高代碼可讀性。
能用文法糖，就一定要用文法糖（其實也不一定，但是這句話大部分情況都是沒問題的）
過濾器
vue.js支援在{{}}插值的尾部添加一個管道符“|”，對資料進行過濾。
一般格式：{{ data | filter }}
經常用于格式化文本，比如字母全部大寫，貨币每三位使用逗号分隔等。
filter裡的過濾規則是自定義的，通過給vue執行個體添加屬性filters來設定，大緻格式如下所示
提示：<div id='app'> {{ vabs | allVac2SmallTamp }} </div> var app = new Vue({ el: '#app', data: { vabs: 'AcBdddEFLSc', }, filters: { allVac2SmallTamp() {xxxxxxxxx}, } })
- 過濾器可以串聯使用： {{ data | filterA | filterB }} // 具體什麼效果，怎麼個串聯過程，需要自行摸索
- 過濾器也可以接受參數： {{ data | filter('args1', 'args2') }} // 這裡的參數args1和args2将分别傳給過濾器的第二和第三個參數，因為第一個是data資料本身
動态綁定class的幾種方式
① 對象文法：
code: :class="{'active' : isActive }"
解釋：判斷條件為A，被依賴值為B，A為true，B的值會被賦給class。
1.2 對象中同樣可以傳入多屬性，動态控制多個class
code: :class = '{"active": isActive, "error": isError}'
1.3 同樣可以直接寫入計算屬性
② 數組文法：
2.1 :class = '[actives, errorCls ]'
data : {
actives: 'aaa',
errorCls: 'bbb'
}
2.2 三元 + 數組文法
:class = "[isActive ? cat : '', errors ]"
data : {
isActive: true,
cat: 'abc',
errors: 'alb'
}
2.3 還可以在數組文法中嵌套對象文法
:class = "[{'active': isActive}, err]"
data : {
isActive: true,
err: 'error'
}
③ 在元件中使用
隻适用于單層結構元件， <元件 :class="{'active': isActive }">, 'active' 值會落到元件裡元素類名上 (單層 | 外層)
多元素标簽結構的話，需要用props傳遞
内聯樣式邦棟需要知道的點：
1. 采用駝峰命名，或短橫分隔命名。
2. 不用單獨寫樣式名，隻要值對應屬性名格式無異，會自動轉化 如下：
:style = "styles"
data: {
styles: {
color: 'red',
fontSize: 14 + 'px'
}
}
最終解析的結果是： style = "color: 'red'; font-size: '14px'; "
使用 :style時，vue.js會自動給特殊的css屬性名增加字首，比如transform
未完待續 --- the loading .
![Element 中遠端搜尋的功能實作[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)