你想知道的vue的模板語法

LeviDing 發(fā)布于2019-08-20 19:04 / 1676人閱讀

摘要：模板語法插值文本數(shù)據(jù)綁定最常見的形式就是使用語法雙大括號的文本插值標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上屬性的值。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于。通常更好的想法是使用屬性而不是命令式的回調(diào)。

模板語法 插值文本

數(shù)據(jù)綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值：

Message: {{ msg }}

Mustache 標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上 msg 屬性的值。無論何時，綁定的數(shù)據(jù)對象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會更新。
通過使用 v-once 指令，你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。但請留心這會影響到該節(jié)點上所有的數(shù)據(jù)綁定：

這個將不會改變: {{ msg }}

純HTML

Mustache語法是將數(shù)據(jù)渲染到模板，但是渲染上去的是純文本，我們不能夠輸出真正的HTML。如果我們需要渲染一個HTML，我們需要shi用v-html指令：

var vm = new Vue({
    el:"#box",
    data:{
        msg:"血染的風(fēng)采"
    }
})

血染的風(fēng)采

特性

mustache 語法不能作用在 HTML 特性上，遇到這種情況應(yīng)該使用 v-bind 指令：

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

控制臺可看div的index為101

這同樣適用于布爾類特性，如果求值結(jié)果是 false 的值，則該特性將會被刪除：

// 當(dāng)isButtonDisabled為true時，button不可以點擊，為false時，disabled這個屬性會刪除，button可以點擊。

使用javascript表達(dá)式

我們可以在mustache語法中使用javascript表達(dá)式，例如：

{{msg+1}}

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

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

{{var a = 1}}

這個語句就不會被執(zhí)行。

指令

指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預(yù)期是單個 JavaScript 表達(dá)式（v-for 是例外情況，稍后我們再討論）。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

{{msg}}

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

汪派傳人

當(dāng)我們更改了seen為false時，div不會被顯示。

參數(shù)

一些指令能夠接收一個"參數(shù)"，在指令名稱之后以冒號表示，例如上面哦我們使用過的V-bind指令。

在這里disabled是參數(shù)，告知 v-bind 指令將該元素的 disabled 屬性與表達(dá)式 isButtonDisabled 的值綁定。
另一個例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：

修飾符

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

{{msg}}

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

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

控制臺打印

執(zhí)行

過濾器

Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達(dá)式。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符指示：

{{msg|fangfa}}

在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

過濾器可以串聯(lián)，例如

{{msg|fangfa}}

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 函數(shù)，因此可以接收參數(shù)：

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

這里，fangfa 被定義為接收三個參數(shù)的過濾器函數(shù)。其中 msg 的值作為第一個參數(shù)，普通字符串 "arg1" 作為第二個參數(shù)，表達(dá)式 arg2 取值后的值作為第三個參數(shù)。

縮寫

v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當(dāng)你在使用 Vue.js 為現(xiàn)有標(biāo)簽添加動態(tài)行為(dynamic behavior)時，v- 前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構(gòu)建由 Vue.js 管理所有模板的單頁面應(yīng)用程序(SPA - single page application)時，v- 前綴也變得沒那么重要了。因此，Vue.js 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

v-bind 縮寫

用一個 : 表示

v-on 縮寫

用@表示

計算屬性 實例


    {{reversedmsg}}

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

dcba

計算屬性的緩存 vs method 方法 計算屬性的緩存

計算屬性是基于它們的依賴進(jìn)行緩存的。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。這就意味著只要 msg 還沒有發(fā)生改變，多次訪問 reversedmsg 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

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


    {{resversedmsg}}
    {{resversedmsg}}
    {{resversedmsg}}
    {{resversedmsg}}

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

resversedmsg第一次調(diào)用時,a++;這時a=2,第二次調(diào)用時，結(jié)果是2;這就證明了我們剛說的只有第一次調(diào)用時進(jìn)行計算,而以后的調(diào)用因為msg沒有改變，所以直接調(diào)用了緩存的數(shù)據(jù)。

method


    {{remsg()}}
    {{remsg()}}
    {{remsg()}}
    {{remsg()}}

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

這就說明了 method 相比計算屬性來說，假設(shè)我們有一個性能開銷比較大的的計算屬性 A，它需要遍歷一個極大的數(shù)組和做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請用 method 替代。

計算屬性 vs watched屬性 watched屬性監(jiān)聽

Vue 確實提供了一種更通用的方式來觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變動：watch 屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時，你很容易濫用 watch。通常更好的想法是使用 computed 屬性而不是命令式的 watch 回調(diào)。


    {{msg3}}

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
        }
    }
})

然而我們會發(fā)現(xiàn)我們還可以用計算屬性來控制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

當(dāng)我們使用計算屬性時，計算屬性默認(rèn)時getter（獲取）,不過我們有時還需要更改（setter）

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

當(dāng)我們在控制臺上輸入vm.msg3=100時,msg1也會隨之改變。

觀察 Watchers

雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的 watcher。

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

在這個實例中，watchers會監(jiān)聽data里的question屬性，當(dāng)question發(fā)生改變時，answer會發(fā)生改變。
使用 watch 選項允許我們執(zhí)行異步操作 (訪問一個 API)，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這是計算屬性無法做到的。