Vue mustache語法

2020-09-25 15:30:07

mustache語法

　　Vue中的插值語法mustache本意為鬍子，可能是{{}}長得像鬍子吧。

　　下面是對mustache插值語法一個最簡單的使用。

　　被管理元素會通過data屬性拿到其中的資料物件。

<body>
    <main id="id-1">{{msg1}}</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            msg1: "HELLO,WORLD",
        }
    })
</script>

資料繼承

　　被管理元素的子集元素都可以獲取到被管理的父元素的資料物件。

　　但是子元素的資料物件父元素不能獲取到。

<body>
    <main id="id-1">
        {{msg2}}
        <section id="chilren-1">{{msg1}}</section>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            msg1: "爸爸的資料",
        }
    })
    const v2 = new Vue({
        el:"#chilren-1",
        data:{
            msg2:"兒子的資料",
        }
    })
</script>

四則渲染

　　標籤中的內容可以根據資料層中的資料進行四則渲染。

<body>
    <main id="id-1">
        <p>{{msg1 + msg2}}</p>
        <p>{{msg3 * 3}}</p>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            msg1: "HELLO",
            msg2: "WORLD",
            msg3: 10,
        }
    })
</script>

v-once

　　當標籤中新增該屬性指令時，標籤渲染的內容將是固定的不會再隨著資料層資料的動態改變而進行改變。

<body>
    <main id="id-1">
        <!-- HELLOWORLD 不會變 -->
        <p v-once>{{msg1}}</p>
        <!-- 會變 -->
        <p>{{msg1}}</p>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            msg1: "HELLO WORLD",
        }
    })
</script>

v-html

　　當標籤中新增該屬性指令時，該標籤渲染的內容將會以HTML程式碼呈現。

　　這會預防XSS攻擊。

　　注意，該屬性指令應該通過等號繫結一個數據

<body>
    <main id="id-1">
        <p v-html="msg1"></p>
        <p>{{msg1}}</p>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            msg1: "<a href='www.google.com'>谷歌搜尋</a>",
        }
    })
</script>

v-text

　　這個屬性指令和直接使用{{}}渲染內容無太大差異，不同的是這個是通過屬性指令來進行渲染。

　　注意，該屬性指令應該通過等號繫結一個數據

<body>
    <main id="id-1">
        <p v-text="msg1"></p>
        <p>{{msg1}}</p>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            msg1: "HELLO,WORLD",
        }
    })
</script>

v-show

　　該屬性指令為false時將該標籤將新增display:none的樣式。

<body>
    <main id="id-1">
        <p v-show="conditionOne">display:block</p>
        <p v-show="conditionTwo">display:none</p>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            conditionOne: true,
            conditionTwo: false,
        }
    })
</script>

v-pre

　　該屬性指令會將標籤中的內容按照原本格式進行呈現，類似於<pre>標籤。

<body>
    <main id="id-1">
        <p v-pre>{{msg1}}</p>
        <p>{{msg1}}</p>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            msg1: "HELLO,WORLD",
        }
    })
</script>

v-cloak

　　在網路情況較差的環境下，可能會出現模板渲染不及時的問題。

　　使用v-cloak屬性指令可擋住{{}}模板語法，使使用者獲得更好的體驗。

　　注意：需要手動新增樣式

<style>
    [v-cloak]{
    	display: none;
    }
</style>

<body>
    <main id="id-1" v-cloak>
        <p>{{msg1}}</p>
        <p>{{msg1}}</p>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";

    setTimeout(function(){
        const v1 = new Vue({
        el: "#id-1",
        data: {
            msg1: "HELLO,WORLD",
        }
    })
    },1000)
</script>

計算屬性

　　計算屬性computed可以讓標籤內容渲染出極為複雜的資料。

　　既然是屬性，呼叫時就可以不加括號。

computed

　　以下是計算屬性的基本使用，我們需要計算出後端返回過來的資料，書的總價。

　　computed內部其實是通過getttr實現的，所以不用加括號

<body>
    <main id="id-1">
        <div>書籍總價格:{{totalPrice}}</div>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const v1 = new Vue({
        el: "#id-1",
        data: {
            books: {
                "Vue實戰": 128,
                "JavaScrip入門": 99,
                "HTML5初識": 87,
                "CSS3": 68,
            }
        },
        computed: {
            totalPrice() {
                return Object.values(this.books).reduce((prev, cur) => {
                    return prev + cur
                }, 0)
            }
        }
    })
</script>

methods

　　對於上述需求，我們也可以用方法來完成，不同的是需要新增括號進行運行。

　　這是methods與computed一個最顯著的區別。

<body>
    <main id="id-1">
        <div>書籍總價格:{{totalPrice}}</div>
        <div>書籍總價格:{{getTotaPrice()}}</div>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";

    const v1 = new Vue({
        el: "#id-1",
        data: {
            books: {
                "Vue實戰": 128,
                "JavaScrip入門": 99,
                "HTML5初識": 87,
                "CSS3": 68,
            }
        },
        computed: {
            totalPrice() {
                return Object.values(this.books).reduce((prev, cur) => {
                    return prev + cur
                }, 0)
            }
        },
        methods:{
            getTotaPrice(){
                return Object.values(this.books).reduce((prev, cur) => {
                    return prev + cur
                }, 0)
            }
        }
    })
</script>

快取特性

　　 computed是具有快取的，而methods則是沒有快取。

　　如下示例，使用computed對多個標籤進行渲染，發現只會運行一次。

　　而使用methods的話則會運行多次。

<body>
    <main id="id-1">
        <div>書籍總價格:{{totalPrice}}</div>
        <div>書籍總價格:{{totalPrice}}</div>
        <div>書籍總價格:{{totalPrice}}</div>
        <div>書籍總價格:{{getTotaPrice()}}</div>
        <div>書籍總價格:{{getTotaPrice()}}</div>
        <div>書籍總價格:{{getTotaPrice()}}</div>
    </main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";

    const v1 = new Vue({
        el: "#id-1",
        data: {
            books: {
                "Vue實戰": 128,
                "JavaScrip入門": 99,
                "HTML5初識": 87,
                "CSS3": 68,
            }
        },
        computed: {
            totalPrice() {
                console.log("運行computed中的方法");
                return Object.values(this.books).reduce((prev, cur) => {
                    return prev + cur
                }, 0)
            }
        },
        methods:{
            getTotaPrice(){
                console.log("運行methods總的方法");
                return Object.values(this.books).reduce((prev, cur) => {
                    return prev + cur
                }, 0)
            }
        }
    })
</script>