Vue的模板語法學習

模板語法

一、插值

a、文本

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

咱們在普通插值的時候不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新

【案例】

<div id="app">
    <span>{{ msg }}</span><br/>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"wo zai xue xi vue!"
        }
    });
</script>
結果就是：wo zai xue xi vue!

咱們在使用 v-once指令的時候，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。

【案例】

<div id="app">
    <span>{{ msg }}</span>
    <h4 v-once>{{ msg }}</h4>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"wo zai xue xi vue!"
        }
    });
</script>
打印結果看下圖

b、純HTML

雙大括號會將數據解釋爲純文本，而非 HTML 。爲了輸出真正的 HTML ，你須要使用 v-html 指令

【案例】

<div id="app">
    <div v-html="message"></div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"我是純HTML"
        }
    });
</script>
打印結果：我是純HTML

c、特性

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

【案例】

<div id="app">
    <div v-bind:title="msg2">nihao</div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg1:"<li>nihao</li>",
            msg2:"你好啊"
        }
    });
</script>

d、使用 JavaScript 表達式

什麼是表達式

由變量函數返回值和運算符以及常量組成的式子就叫表達式

二、指令

什麼是指令

指令（Directives）是帶有 v- 前綴的特殊屬性。

指令的職責是什麼

當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

最經常使用的指令有：

v-bind和v-on

a、參數

指令的參數都有哪些

好比href

b、修飾符

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

【案例】

<div id="app">
    <a v-bind:href="url" v-on:click.prevent="a">百度</a>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!",
            url:"http://www.baidu.com"
        },
        methods:{
            a:function(){
                console.log("阻止跳轉!")
            }
        }
    });
</script>
結果看下圖

三、過濾器

過濾器是用來幹什麼的

對文本進行格式化的

過濾器用在什麼地方

過濾器能夠用在兩個地方：mustache 插值和 v-bind 表達式。

【反轉案例】

<div id="app">
    {{msg|guolvqi}}
    {{msg|guolvqi}}
    {{msg|guolvqi}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!"
        },
        //定義過濾器
        filters: {
            guolvqi:function(value){
                return value.split("").reverse().join("")
            }
        }
    });
</script>
打印結果：!euv ix eux !euv ix eux !euv ix eux

【串聯一個大寫案例】

<div id="app">
    {{msg|guolvqi|daxie}}
    {{msg|guolvqi|daxie}}
    {{msg|guolvqi|daxie}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!"
        },
        //定義過濾器
        filters: {
            guolvqi:function(value){
                return value.split("").reverse().join("")
            },
            daxie:function(value){
                return value.toUpperCase();
            }
        }
    });
</script>
打印結果：!EUV IX EUX !EUV IX EUX !EUV IX EUX

過濾器也能夠接收參數

四、縮寫

a、v-bind縮寫

【案例】

<div id="app">
    <div :title="msg">縮寫</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!"
        }
    });
</script>
結果看下圖

b、v-on縮寫

【案例】

<div id="app">
    <div @click="shijian">縮寫</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!"
        },
        methods:{
            shijian:function(){
                console.log(this.msg)
            }
        }
    });
</script>
結果看下圖

喜歡的朋友別忘了點贊和收藏啊