Vue.js--基礎篇

Vue作爲當今三大流行框架，若是不懂點，彷佛沒辦法跟別人說作過前端，好吧，三個月的時間內斷斷續續的把基礎內容熟悉並基本上敲了一遍。簡單的作下筆記，方便記憶和查詢:

    MVVM模式是由經典的軟件架構MVC衍生來的。當View(視圖層)變化時，會自動更新到ViewModel(視圖模型)，反之亦然。View和ViewModel之間經過雙向綁定(data-binding)創建聯繫。

    ：el用戶指定一個頁面中已存在的DOM元素來掛載Vue實例，它能夠是HTMLElement,也能夠是CSS選擇器；

    ：Vue提供了許多經常使用的實例屬性與方法，都以$ 開頭，好比$el.

    ：Vue的生命週期鉤子，比較經常使用的有:

• created：實例建立完成後調用，此階段完成了數據的觀測等，但還沒有掛載，$el還不可用。須要初始化處理一些數據時會比較有用。
• mounted：el掛載到實例上後調用，通常咱們的第一個業務邏輯會在這裏開始。
• beforeDestroy 實例銷燬以前調用。主要解綁一些使用addEventListener監聽的事件等。

   ：使用雙大括號{{}}是最基本的文本插值方法；

   ：若是有時候就是想輸出html，而不是將數據解析後的純文本，可使用v-html;

   ：若是想顯示{{}},而不進行替換，使用v-pre便可跳過這個元素和它的子元素的編譯過程，例如:<span v-pre>{{這裏的內容是不會被編譯的}}</span>

   ：在{{}}中，除了簡單的綁定屬性值外，還可使用JavaScript表達式進行簡單的運算，還可使用JavaScript表達式進行簡單的運算、三元運算等；

   :  Vue.js只支持單個表達式，不支持語句和流控制。另外，在表達式中，不能使用用戶自定義的全局變量，只能使用Vue白名單內的全局變量，例如Math和Date;

   :  Vue.js支持在{{}}插值的尾部添加一個管道符「（|）」對數據進行過濾，常常用於格式化文本，好比字母所有大寫、貨幣千位使用逗號分割等，過濾器應當用於處理簡        單的文本轉換，若是要實現更爲複雜的數據變換，應該使用計算屬性。

   ：指令是Vue.js模版中最經常使用的一項功能，它帶有前綴v-，好比v-if、v-html、v-pre等。指令的主要職責就是當其表達式的值改變時，相應地將某些行爲應用到DOM        上

   ：數據驅動DOM是Vue.js的核心理念，因此不到萬不得已時不要主動操做DOM，你只須要維護好數據，DOM的事Vue會幫你優雅的處理。

   ：v-bind的基本用途是動態更新html元素上的屬性，好比id、class等。

   ：另外一個很是重要的指令是v-on，它用來綁定事件監聽器，這樣咱們就能夠作一些交互了；表達式除了方法名，也能夠直接是一個內聯語句；Vue.js將methods裏的   方法也代理了，因此也能夠像訪問Vue數據那樣來調用方法;

   :  Vue.js的v-bind和v-on指令都提供了語法糖，也能夠說是縮寫，好比v-bind,也能夠省略v-bind,直接寫一個冒號":",v-on能夠直接用「@」來縮寫；

   ：全部的計算屬性都以函數的形式寫在Vue實例內的computer選項內，最終返回計算後的結果, 每個計算屬性都包含一個getter和一個setter；

   ：計算屬性還有兩個很實用的小技巧容易被忽略：一是計算屬性能夠依賴其餘計算屬性；二是計算屬性不只能夠依賴當前Vue實例的數據，還能夠依賴其餘實例的數據；

   ：使用計算屬性仍是methods取決你是否須要緩存，當遍歷大數組和作大量計算時，應當使用計算屬性，除非你不但願獲得緩存。

   ：當:class的表達式過長或邏輯複雜時，還能夠綁定一個計算屬性，這是一種很友好和常見的用法，通常當條件多於兩個時，均可以使用data或computed;

   :  當須要應用多個class時，可使用數組語法，給:class綁定一個數組，應用一個class列表；

   ：使用v-bind:style能夠給元素綁定內聯樣式，方法與:class相似，也有對象語法和數組語法，看起來很像直接在元素上寫CSS；

   ：[v-clock]{display:none;}:是一個解決初始化慢致使頁面閃動的最佳實踐；

   ：v-once也是一個不須要表達式的指令，做用是定義它的元素或組件只渲染一次，包括元素或組件的全部子節點。首次渲染後，再也不隨數據的變化從新渲染，將被視        爲靜態內容。

   ：v-show的用法與v-if基本一致，只不過v-show是改變元素的CSS屬性display.當v-show表達式的值爲false時，元素會隱藏，查看DOM結構會看到元素上加載了內聯樣式display:none;

   :  當你不想改變數組，想經過一個數組的副原本作過濾或排序的顯示時，可使用計算屬性來返回過濾或排序後的數組。

   ：Vue提供了一個特殊變量$event,用於訪問原生DOM事件;

   : Vue.js提供了v-model指令，用於在表單類元素上雙向綁定數據，例如在輸入框上使用時，輸入的內容會實時映射到綁定的數據上；使用v-model時，若是是用中文輸入法輸入中文，通常在沒有選定詞組前，也就是在拼音階段，Vue是不會更新數據的，當敲下漢子時纔會觸發更新。若是但願老是實時更新，能夠用@input來代替v-model。事實上，v-model也是一個特殊的語法糖，只不過它會在不一樣的表單上智能處理。

   ：單選按鈕在單獨使用時，不須要v-model，直接使用v-bind綁定一個布爾類型的值,爲真時選中，爲否時不選；

   ：組件在使用data時，和實例稍有區別， data必須是函數，而後將數據return出去；

   ：在組件中，使用props來聲明須要從父級接收的數據，props的值能夠是兩種，一種是字符串數組，一種是對象；

   ：因爲HTML特性不區分大小寫，當使用DOM模版時，駝峯命名（cameCase）的props名稱要轉爲短橫分割命名。

   ：有時候，使用props傳遞數據，傳遞的數據並非直接寫死的，而是來自父級的動態數據，這時可使用指令v-bind來動態綁定props的值，當父組件的數據變化時，也會傳遞給子組件。

   ：父組件模版的內容是在父組件做用域內編譯，子組件模版的內容是在子組件做用域內編譯；

   ：具名Slot：給slot元素指定name後能夠分發多個內容，具名slot能夠與單個slot共存；

   ：Vue.js提供了一個特殊的元素<component>用來動態地掛載不一樣的組件，使用is特性來選擇掛載的組件；

   ：Vue提供了另外一種定義模版的方式，在<script>標籤裏使用text/x-template類型，而且指定一個ID，將這個ID賦給tempalate,在<script>標籤裏，你能夠愉快地寫HTML代碼，不用考慮換行問題；

   ：在一些特殊的狀況下，咱們須要動態的去建立Vue.js 實例，Vue.js提供了Vue.extend和$mount兩個方法來手動掛載一個實例；