Vue的模板語法和計算屬性

模板語法

上一篇：Vue 入門，Vue屬性和指令：https://segmentfault.com/a/11...

下一篇：Vue 的 Class 與 Style 綁定：https://segmentfault.com/a/11...

插值

文本

最經常使用的文本插值方法是使用"Mustache"語法

<p>Message:{{msg}}</p>

Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

經過使用 v-once 指令，能夠執行一次性的插值，當數據改變時，插值處的內容便不會再更新

<p v-once>這個數據將不會改變{{msg}}</p>

純HTMl

{{}}會將數據解釋爲純文本，爲了可以輸出HTML，可使用 v-html 指令

<div class="exp" v-html="rewHtml">{{msg}}</div>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            msg:"big world",
            rewHtml:"<p>hello world</p>"
        }
    })
</script>

屬性 rewHtml 會將這個 div 內的內容替換，也就是說原來綁定的 msg 屬性被忽略，rewHtml 將做爲 HTML 被直接添加

hello world

特性

Mustache 語法不能用在設置 HTML 特性上，這時候就可使用 v-bind 指令：

<div class="exp" v-bind:title="tit">哈哈哈哈</div>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            tit:"2333"
        }
    })
</script>

布爾類特性能夠這樣設置，值爲 false ，則該特性就會被刪除

<button class="exp" v-bind:disabled="tit">按鈕</button>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            tit:true
        }
    })
</script>

如上，當咱們把 tit 的值改成 false 時，則 button 中的 disabled 會被刪除，按鈕也就能夠點擊了

javascript 表達式

Vue 也提供了對js表達式的支持

<div class="exp">{{ message.split('').reverse().join('')}}</div>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            message:"abcdefg"
        }
    })
</script>

gfedcba

這些表達式會在所屬 Vue 實例的數據做用域下做爲 JavaScript 被解析。有個限制就是，每一個綁定都只能包含單個表達式，因此下面的例子都不會生效。

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

指令

指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式（v-for 是例外狀況，稍後咱們再討論）。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。我上一篇文章中也提到過了

<div id="app-3">
    <p v-if="seen">顯示</p>
</div>

這裏， v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。

參數

一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。例如，v-bind 指令能夠用於響應式地更新 HTML 屬性：

<a v-bind:href="url"></a>

在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。

另外一個例子是 v-on 指令，它用於監聽 DOM 事件，也在個人上一篇文章中也提到了

<input type="button" value="逆轉消息" v-on:click="reverse">

修飾符

修飾符（Modifiers）是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

過濾器

過濾器能夠被用做一些常見的文本格式化，規定好過濾器的方法，即可以在模板裏調用了。過濾器能夠用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符指示：

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

<!-- 依舊是反轉這個字符串 -->
<div class="exp">{{ message|reverse}}</div>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            message:"abcdefg"
        },
        filters:{
            reverse:function(value){
                return value.split("").reverse().join("")
            }
        }
    })
</script>

過濾器也能夠串聯：

<!-- 反轉這個字符串，而後再把翻轉後的字符串轉換成數組 -->
<div class="exp">{{message|reverse|split}}</div>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            message:"abcdefg"
        },
        filters:{
            reverse:function(value){
                return value.split("").reverse().join("")
            },
            split:function(value1){
                return value1.split("")
            }
        }
    })
</script>

[ "g", "f", "e", "d", "c", "b", "a" ]

在這個例子中，reverse 被定義爲接收單個參數的過濾器函數，表達式 message 的值將做爲參數傳入到函數中，而後繼續調用一樣被定義爲接收單個參數的過濾器函數 split，將 reverse 的結果傳遞到 split 中。

過濾器是 JavaScript 函數，所以能夠接收參數：

{{ message | filterA('arg1', arg2) }}

這裏，filterA 被定義爲接收三個參數的過濾器函數。其中 message 的值做爲第一個參數，普通字符串 'arg1' 做爲第二個參數，表達式 arg2 取值後的值做爲第三個參數。

縮寫

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>

計算屬性

getter函數

<!-- 使用了N次的字符串反轉 -->
<div class="exp">
    <p>正向{{message}}</p>
    <p>反向{{reMessage}}</p>
</div>
<script>
    var exp = new Vue({
        el:".exp",
        data:{
            message:"abcdefg"
        },
        computed:{
            reMessage:function(){
                return this.message.split("").reverse().join("")
            }
        }
    })
</script>

結果以下

正向abcdefg

反向gfedcba

這裏咱們聲明瞭一個計算屬性 reMessage。咱們提供的函數將用做屬性 vm.reMessage 的 getter 函數：

console.log(exp.reMessage) // --> "gfedcba"
exp.message="Hello"
console.log(exp.reMessage) // --> eybdooG

當咱們在控制檯修改exp.message的值時，exp.reMessage 的值也會更新

計算屬性 vs method 方法

其實針對上面的例子，使用method方法也能夠達到

<p>反向{{reMessage}}</p>
<script>
    methods: {
        reMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
</script>

事實上，在計算結果上，method方法和compute方法是一致的，然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

而使用method方法時，每次從新渲染時，都要再次執行函數

計算屬性 vs Watched 屬性

<div class="exp">
    {{fullName}}
    <input value="text" v-model="firstName">
    <input value="text" v-model="lastName">
</div>
<script>
var exp=new Vue({
    el:".exp",
    data:{
        firstName:"Pure",
        lastName:"View",
        fullName:"PureView"
    },
    watch:{
        firstName:function(val){
            this.fullName=val+this.lastName
        },
        lastName:function(val){
            this.fullName=this.firstName+val1
        }
    }
})

如上，咱們要改變fullName的值，使用watch方法會有比較多的重複代碼，若是要改變的數據不少，則須要寫不少的watch方法。其實可使用計算屬性：

var exp=new Vue({
    el:".exp",
    data:{
        firstName:"Pure",
        lastName:"View"
    },
    computed:{
        fullName:function(){
            return this.firstName+this.lastName
        }
    }
})

這樣就舒服多了。

計算 setter

<div class="exp">
    {{fullName}}
    <input value="text" v-model="firstName">
    <input value="text" v-model="lastName">
</div>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            firstName:"Pure",
            lastName:"View"
        },
        computed:{
            fullName:{
                get:function(){
                    return this.firstName+this.lastName
                },
                set:function(newValue){
                    var name=newValue.split("")
                    this.firstName=name[0]
                    this.lastName = name[name.length - 1]
                }
            }
        }
    })
</script>

在控制檯修改 exp.fullName的值，那麼 firstName 和 lastName 的值也會相應的更新

Vue 方法

事件

methods:{

}

過濾器

filters:{

}

計算

conputed:{

}

觀察

watch:{

}

鉤子函數

created:function(){
//建立
},
mounted:function(){
//掛載
},
updated:function(){
//更新
},
destoryed:function(){
//銷燬
)

To be continue......

上一篇：Vue 入門，Vue屬性和指令：https://segmentfault.com/a/11...

下一篇：Vue 的 Class 與 Style 綁定：https://segmentfault.com/a/11...