Vue.js筆記，從入門到精通

Vue.js筆記，從入門到精通

這是我總結的筆記，對今天的學習總結了一半，筆記後面再補上，由於以前會angular，因此學起來很簡單。

Vue.js 是一種mvvm模式，與angular的區別是徹底沒有controller的概念。

Vue實例

        構造器：每一個應用都是經過構造函數Vue建立一個根實例，實例化時，須要傳入一個選項對象，能夠包         含數據、模板、掛載元素、方法、生命週期鉤子等。能夠擴展Vue構造器，用預約義選項建立可複用的         組件構造器，全部Vue.js組件都是被擴展的Vue實例：
        var myComponent = Vue.extend({
            //擴展選項
        });
        //全部的‘myComponent’實例都將以預約義擴展選項被建立
        var myComponentInstance = new myComponent();

        屬性與方法：每一個實例都會代理 data 對象裏全部的屬性，注意只有這些被代理的屬性是響應的。若是           在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。除了這些數據屬性，Vue 實例暴露了一         些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的數據屬性區分。

        實例生命週期：Vue實例在建立時有一系列初始化步驟，在此過程當中，將調用一些生命週期鉤子，給自         定義邏輯提供運行機會。例如 created 鉤子在實例建立後調用，也有其餘的鉤子，在實例生命週期的不         同階段調用，compiled、ready、destroyed。鉤子的 this 指向調用它的Vue實例，組件的自定義邏輯分         割在這些鉤子中。

數據綁定語法
Vue.js的模板是基於DOM實現的，全部的Vue.js模板都是可解析的有效的HTML，經過一些特殊的特性作了加強，Vue模板於是從根本上不一樣於基於字符串的模板。

        插值
                文本：數據綁定最基礎形式是文本插值，使用「Mustache」語法（雙大括號）
                <span>{{ msg }}</span>
                Mustache 標籤會被相應數據對象 msg 屬性的值替換，隨屬性變化而更新。處理單次插值，數據                   變化再也不更新。
                <span>{{ *msg }}</span>

                原始的HTML：雙Mustache標籤將數據解析爲純文本而不是HTML，輸出真HTML字符串，須要用                 三Mustache標籤。
                <div>{{{ raw_html }}}</div>
                內容以 HTML 字符串插入——數據綁定將被忽略。若是須要複用模板片段，應當使用 partials。
                注意在網站上動態渲染任意 HTML 是很是危險的，由於容易致使 XSS 攻擊。記住，只對可信內容                 使用 HTML 插值，永不用於用戶提交的內容。

                HTML特性：Mustache標籤也能夠用在HTML特性內,注意在Vue.js指令和特殊特性內不能用插值。                 若是用錯Mustache標籤Vue.js會給出警告。
                <div id="item-{{ id }}"></div>

        綁定表達式
        放在Mustache標籤內的文本稱爲綁定表達式。在Vue.js中，一段綁定表達式由一個簡單的JavaScript表         達式和可選的一個或多個過濾器構成。

                JavaScript表達式：目前爲止，咱們的模板只綁定到簡單的屬性鍵。不過實際上Vue.js在數據綁定                 內支持全功能的JavaScript表達式。
                {{ number + 1 }}
                {{ ok ? 'YES' : 'NO' }}
                {{ message.split('').reverse().join('') }}
                這些表達式在所屬的Vue實例的做用域內計算，每一個綁定只能包含單個表達式。

                過濾器：Vue.js容許在表達式後添加可選的「過濾器(Filter)」，以「管道符」指示。
                {{ message | caplitalize }}
                這個過濾器只是一個JavaScript函數，返回大寫化的值。Vue.js提供數個內置過濾器，能夠開發自                 己的過濾器。
                管道語法不是JavaScript語法，不能在表達式內使用過濾器，只能添加到表達式的後面。過濾器可                 以串聯。
                {{ message | filter1 | filter2 }}
                {{ message | filterA 'arg1' age2 }}

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

        <p v-if="greeting">Hello!</p>
        這裏 v-if 指令根據表達式 greeting 值的真假刪除/插入 <p> 元素。

                參數：有些指令能夠在名稱後面帶一個「參數」（Argument）,中間放一個冒號隔開。例如，v-bind                   指令用於響應地更新HTML特性。
                <a v-bind:href="url"></a>
                這裏 href 是參數，它告訴 v-bind 指令將元素的 href 特性跟表達式 url 的值綁定。可能你已注意到                  能夠用特性插值 href="{{url}}" 得到一樣的結果：這樣沒錯，而且實際上在內部特性插值會轉爲 v-                  bind 綁定。
                v-on 指令，用於監聽DOM事件：
                <a v-on:click="doSomething"></a>

                修飾符：修飾符 (Modifiers) 是以半角句號 . 開始的特殊後綴，用於表示指令應當以特殊方式綁                      定。例如 .literal 修飾符告訴指令將它的值解析爲一個字面字符串而不是一個表達式。
                <a v-bind:href.literal="/a/b/c"></a>
                固然，這彷佛沒有意義，由於咱們只須要使用 href="/a/b/c" 而沒必要使用一個指令。這個例子只是                    爲了演示語法。

                縮寫：v- 前綴是一種標識模板中特定的 Vue 特性的視覺暗示。當你須要在一些現有的 HTML 代                    碼中添加動態行爲時，這些前綴能夠起到很好的區分效果。但你在使用一些經常使用指令的時候，你                    會感受一直這麼寫實在是囉嗦。並且在構建單頁應用（SPA ）時，Vue.js 會管理全部的模板，此                  時 v- 前綴也沒那麼重要了。所以Vue.js 爲兩個最經常使用的指令 v-bind 和 v-on 提供特別的縮寫。
                v-bind縮寫
                <!-- 完整語法 -->
                <a v-bind:href="url"></a>
                <!-- 縮寫 -->
                <a :href="url"></a>

                v-on縮寫
                <!-- 完整語法 -->
                <a v-on:click="doSomething"></a>
                <!-- 縮寫 -->
                <a @click="doSomething"></a>

計算屬性

模板中綁定表達式很是便利，實際上只用於簡單的操做。模板是爲了描述視圖的結構。在模板中放入太多的邏輯會讓模板太重且難以維護。這就是爲何 Vue.js 將綁定表達式限制爲一個表達式。若是須要多於一個表達式的邏輯，應當使用計算屬性。

        計算屬性

        computed: {

            a: function(){

            },

            b: function(){

            }

        }

        計算屬性默認getter，須要時能夠提供一個setter。