你想知道的vue的模板語法

模板語法

插值

文本

數據綁定最多見的形式就是使用 「Mustache」 語法（雙大括號）的文本插值：

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

Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。
經過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上全部的數據綁定：

<span v-once>這個將不會改變: {{ msg }}</span>

純HTML

Mustache語法是將數據渲染到模板，可是渲染上去的是純文本，咱們不可以輸出真正的HTML。若是咱們須要渲染一個HTML，咱們須要shi用v-html指令：

<div id="box" v-html="msg"></div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:"<h1>血染的風采</h1>"
    }
})

血染的風采

特性

mustache 語法不能做用在 HTML 特性上，遇到這種狀況應該使用 v-bind 指令：

<div id="box" v-html="msg" v-bind:index="msg"></div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:100
    }
})

控制檯可看div的index爲101

這一樣適用於布爾類特性，若是求值結果是 false 的值，則該特性將會被刪除：

<button v-bind:disabled="isButtonDisabled">Button</button>

// 當isButtonDisabled爲true時，button不能夠點擊，爲false時，disabled這個屬性會刪除，button能夠點擊。

使用javascript表達式

咱們能夠在mustache語法中使用javascript表達式，例如：

<div id="box">{{msg+1}}</div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:100
    }
})

101

可是在Mustache語法中不能是同語句。例如：

{{var a = 1}}

這個語句就不會被執行。

指令

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

<div id="box" x-if="seen">{{msg}}</div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:"汪派傳人",
        seen:false
    }
})

汪派傳人

當咱們更改了seen爲false時，div不會被顯示。

參數

一些指令可以接收一個"參數"，在指令名稱以後以冒號表示，例如上面哦咱們使用過的V-bind指令。

<button v-bind:disabled="isButtonDisabled">Button</button>

在這裏disabled是參數，告知 v-bind 指令將該元素的 disabled 屬性與表達式 isButtonDisabled 的值綁定。
另外一個例子是 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">

修飾符

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

<div v-on:click.prevent="a">{{msg}}</div>

在js中，咱們在Vue實例中使用methods屬性使用修飾符

var vm = new Vue({
    el:"#box",
    data:{
        msg:"汪派傳人",
    },
    methods:{
        a:function(){
            console.log("執行")
        }
    }
})

控制檯打印

執行

過濾器

Vue.js 容許你自定義過濾器，可被用做一些常見的文本格式化。過濾器能夠用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符指示：

<div v-on:click.prevent="a">{{msg|fangfa}}</div>

在js中，咱們在Vue實例中使用filters屬性使用修飾符

var vm = new Vue({
    el:"#box",
    data:{
        msg:"vue.js",
    },
    filters:{
        fangfa:function(value){
            console.log(value)
            return value.split("").reverse().join("")
        }
    },
})

sj.euv

過濾器能夠串聯，例如

<div v-on:click.prevent="a">{{msg|fangfa}}</div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:"vue.js",
    },
    filters:{
        fangfa:function(value){
            console.log(value)
            return value.split("").reverse().join("")
        },
        fangfa2:function(value){
                return value.split("").reverse().join("")
            }
    },
})

vue.js

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

{{ msg | fangfa('arg1', arg2) }}

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

縮寫

v- 前綴做爲一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 爲現有標籤添加動態行爲(dynamic behavior)時，v- 前綴頗有幫助，然而，對於一些頻繁用到的指令來講，就會感到使用繁瑣。同時，在構建由 Vue.js 管理全部模板的單頁面應用程序(SPA - single page application)時，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="dianji"></a>

<!-- 縮寫後 -->
<a @click="dianji"></a>

計算屬性

實例

<div id="box">
    <p>{{reversedmsg}}</p>
</div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    computed:{
        reversedmsg:function(){
            return this.msg.split('').reverse().join('')
        }
    }
})

dcba

計算屬性的緩存 vs method 方法

計算屬性的緩存

計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 msg 尚未發生改變，屢次訪問 reversedmsg 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

口說無憑，下面咱們測試一下他是否具備緩存

<div id="box">
    <p>{{resversedmsg}}</p>
    <p>{{resversedmsg}}</p>
    <p>{{resversedmsg}}</p>
    <p>{{resversedmsg}}</p>
</div>

var a = 1;
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    computed:{
        resversedmsg:function(){
            a++;
            return a
        }
    }
})

2
2
2
2

resversedmsg第一次調用時,a++;這時a=2,第二次調用時，結果是2;這就證實了咱們剛說的只有第一次調用時進行計算,而之後的調用由於msg沒有改變，因此直接調用了緩存的數據。

method

<div id="box">
    <p>{{remsg()}}</p>
    <p>{{remsg()}}</p>
    <p>{{remsg()}}</p>
    <p>{{remsg()}}</p>
</div>

var a = 1;
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    methods: {
    remsg: function () {
        a++,
        return a
        }
    }
})

2
3
4
5

這就說明了 method 相比 計算屬性 來講，假設咱們有一個性能開銷比較大的的計算屬性 A，它須要遍歷一個極大的數組和作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存，咱們將不可避免的屢次執行 A 的 getter！若是你不但願有緩存，請用 method 替代。

計算屬性 vs watched屬性

watched屬性監聽

Vue 確實提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：watch 屬性。當你有一些數據須要隨着其它數據變更而變更時，你很容易濫用 watch。一般更好的想法是使用 computed 屬性而不是命令式的 watch 回調。

<div id="box">
    <p>{{msg3}}</p>
    <input type="text" v-model="msg1">
    <input type="text" v-model="msg2">
</div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd",
        msg1:1,
        msg2:2,
        msg3:3,
    },
    watch:{
        msg1:function(val){
            this.msg3=val+this.msg2
        }
        msg2:function(val){
            this.msg3=this.msg1+val
        }
    }
})

然而咱們會發現咱們還能夠用計算屬性來控制msg3的改變

var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd",
        msg1:1,
        msg2:2,
        // msg3:3,
    },
    computed: {
        msg3: {
        function () {
                return this.msg1 + this.msg2
            }    
        }
    } 
})

計算 getter和setter

當咱們使用計算屬性時，計算屬性默認時getter（獲取）,不過咱們有時還須要更改（setter）

computed: {
    msg3: {
        // getter
        get: function () {
            return this.msg1 + this.msg2
        },
        // setter
        set: function (newValue) {
                this.msg1=newValue
            }
    }
}

當咱們在控制檯上輸入vm.msg3=100時,msg1也會隨之改變。

觀察 Watchers

雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的 watcher。

var vm = new Vue({
    el: '#box',
    data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
    },
  watch: {
    // 若是 question 發生改變，這個函數就會運行
    question: function (newQuestion) {
        this.answer = 'Waiting for you to stop typing...'
        this.getAnswer()
    }
  }
});

在這個實例中，watchers會監聽data裏的question屬性，當question發生改變時，answer會發生改變。使用 watch 選項容許咱們執行異步操做 (訪問一個 API)，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這是計算屬性沒法作到的。