2. Vue語法–插值操作&動態綁定屬性 詳解

目錄

1. 設置vue模板

2. vue語法–插值操作

3. 動態綁定屬性–v-bind


 

一. 設置vue模板

我們經常新建一個vue項目的時候, 會寫如下的一段程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:"hello"
        }
    })
</script>
</body>
</html>

其實這就是一個程式碼的模板. 那麼我們如何才能快速的創建這樣的程式碼,而不是每次都手寫呢? 將其創建為模板. 

第一步: 設置–>Preference–>Live Template

第二步: 添加一個group, 命名為vue. 這個視情況而定, 如果已經有了,就不用再定義了

 

 第三步: 添加一個Live template模板,將下面的程式碼複製到Template text中.

<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:"hello"
        }
    })
</script>

 

 第四步: 在頁面使用快捷鍵快速生產vue模板. 快捷鍵是vue + tab鍵

這樣就可以快速的生成vue框架程式碼了, 節省了時間.

 

二. vue語法 — 插值操作 

什麼是插值操作呢? 

簡單說, 就是將data中的文本數據,插入到html中.

1. 插值操作–Mastacha語法

  • 語法: {{數據}}
    • {{}} 獲取vue變數的值, {{}} 這種寫法就是Mastacha語法. 什麼是mastacha語法? 可以參考這篇文章: //www.cnblogs.com/DF-fzh/p/5979093.html
    • 插值運算符可以顯示的對數據進行計算
    • 給html標籤的內容賦值, 不可以給標籤中的屬性賦值.
  • 舉例:
      <div id="app">
            <!-- 可以輸出String -->
            <h2 v-text="name"></h2>
            <!-- 也可以輸出數字  也可以計算 -->
            <h2 v-text="count * 2"></h2>
            <!-- 這樣的寫法v-text會替換標籤的內容 -->
            <h2 v-text="name">Hello</h2>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    name:"Vue",
                    count:10,
                }
            })
        </script>

     

2. 常見的其他插值操作

  • v-bind: 動態綁定屬性
  • v-once: 保留第一次渲染結果
  • v-html : 把html程式碼解析,只顯示內容
  • v-text: 顯示文本
  • v-pre: 原樣輸出
  • v-cloak: 解決文本閃爍問題

 

3. v-once: 保留第一次渲染結果

有些情況下, 我們不希望介面隨意的跟隨改變, 這時候我們可以使用vue的v-once指令

  • v-once: 該指令後面不需要增加任何表達式
  • 該指令表示元素和組件只渲染一次, 不會隨著數據的改變而改變 

看下面這個例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{name}}</h2>
    <h2 v-once> {{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello, everyone",
            name: "summer",
            age: 18
        }
    });
</script>
</body>
</html>

同樣是列印輸出{{name}},第二個加了v-once, 加了這個是什麼含義呢?

我們先來看看效果

 

 然後, 我們修改在控制台name的值

 

 

 我們發現, 在控制台將app.name的值修改了以後, 加了v-once的元素值沒有跟隨改變. 

v-once的意思就是: 在第一次的時候設置完值以後, 後面的修改不會影響到這個元素值

 

4. v-html : 把html程式碼解析,只顯示內容

 有時, 我們從伺服器請求到的數據本身就是一個HTML程式碼, 如果我們直接通過{{}}來輸出, 就將html程式碼直接輸出了, 但是我們希望它能夠按照html進行解析, 然後顯示解析後的結果.這時, 我們可以使用v-html?

  • 該指令後面通常會跟隨一個string類型的字元串

  • 會將spring類型的html程式碼解析並渲染

看下面的程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url">url </h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            url: "<a href='//www.baidu.com'>百度</a>"

        }
    });
</script>
</body>
</html>

這裡列印了兩個url, 我們來看看效果

 

 第一個是將url的內容直接輸出了, 而第二個是解析了html程式碼後輸出的.

 

5. v-text: 顯示文本

顯示文本內容, 通常和{{}}的效果是一樣的, 我們使用{{}}的頻率會更高一些, 因為v-text會有一些局限性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{name}}, 你好</h2>
    <h2 v-text="name">, 你好 </h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "summer"
        }
    });
</script>
</body>
</html>

我們看到, 使用{{name}} 後面還可以跟其他內容. 但是使用v-text, 後面更得內容會被覆蓋掉, 來看效果

 

 

6.v-pre: 原樣輸出

v-pre用於跳過這個元素和他的子元素的編譯過程, 顯示的是原本的內容.

我們來看一下案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{name}}</h2>
    <h2 v-pre> {{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "summer"
        }
    });
</script>
</body>
</html>

我們看到, 一個元素沒有加v-pre, 第二個元素加了v-pre, 那麼效果是什麼樣的呢?

 

 使用了v-pre的元素跳過了編譯過程, 原樣輸出了元素的內容. 

7.v-cloak:  解決文本閃爍問題

在真實的項目中, 內容很多, 有可能在載入new Vue()對象之前卡住了. 而頁面是從上到下載入的, div載入完了,顯示的就是{{message}}, 這是new Vue()卡住了, 那麼用戶就會看到{{message}}這樣的文字,

其實這樣是很不友好的. 為了避免這種情況, 我們可以使用vue的v-cloak指令. 在vue載入之前, 先將其遮住. 效果如下圖

 這個問題, 可以使用vue的v-cloak來解決. 先來看看程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    setTimeout(function(){
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            }
        });
    }, 1000);

</script>
</body>
</html>

其他設置都一樣, 不一樣的是, 在div標籤里增加了v-cloak指令. 然後給這個指令元素設置了一個style樣式. 

在這裡, 我們還使用setTimeout來模擬延時1秒顯示的狀況. 在樣式表中設置一個屬性[v-cloak]的display為none不顯示. 當new Vue()程式碼執行以後, 就是將元素中v-cloak刪除掉, 這樣樣式也不起作用.

我們來看看效果

 

 剛開始, 沒有載入new Vue()元素的時候, 就不顯示div的內容. 載入了new Vue()對象以後, vue會自動將v-cloak指令刪除, 這樣div的內容就顯示出來了.

 

三. 動態綁定屬性–v-bind指令

上面的插值操作, 通常都是插入到模板的內容中.

Mastache語法也是插入值到模板的內容. 但是不能插入到屬性.

可是, 除了內容, 有時我們希望動態綁定a標籤的src元素, 或者img的src元素, 這個時候, 我們可以用到v-bind指令

1. v-bind基本用法

v-bind指令有兩種寫法

第一種: <a v-bind:href="url">Hello</a>
第二種: <a :href="url">Hello</a>

第二種寫法是v-bind的縮寫.

如下示例: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
</head>
<body>
<div id="app">
    <img width="100px" height="100px" v-bind:src="src"></img>
    <a v-bind:href="href">百度</a>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello",
            src: "//gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg14.360buyimg.com%2Fn0%2Fjfs%2Ft2740%2F163%2F951722573%2F619210%2Fcd4a7b33%2F572df1b5N85de4909.png&refer=http%3A%2F%2Fimg14.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616318081&t=f8e815503efff6d6871f732bea62c68f",
            href:"//www.baidu.com"
        }
    });
</script>
</body>
</html>

我們在data中定義了src和href兩個屬性, 如果想要賦值給img表示和a標籤, 不能直接像下面這麼寫. 這樣會被直接輸出

<img width="100px" height="100px" src="{{src}}"></img>
    
<a href="{{href}}">百度</a>

 

這樣肯定是不可以的. 這時需要使用v-bind

<img width="100px" height="100px" v-bind:src="src"></img>
    
<a v-bind:href="href">百度</a>

 

 

我們還可以是用v-bind的縮寫, 在實際項目開發中, 使用縮寫的概率更大

<img width="100px" height="100px" :src="src"></img>
    
<a :href="href">百度</a>

2. v-bind動態綁定class(對象語法)

有些class對象需要動態賦值. 比如: 在列表頁, 每條記錄有一個複選框, 勾選複選框顯示勾選樣式, 取消勾選顯示取消勾選樣式. 這種情況使用vue怎麼寫呢?

<a :href="url" class="title" :class="{key:value, key:value }">Hello</a>

在class屬性中, 我們可以使用{}來定義多個屬性. 語法結構{key: value, key:value}, key是樣式名稱. value值是true或者false
如果是true就啟用樣式, false就禁用樣式

來看下面的案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 v-bind:class="{active: isActive}">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello",
            isActive: true
        }
    });
</script>
</body>
</html>

在data中定義了一個isActive,  class對象中如何寫的呢?

 <h2 v-bind:class="{active: isActive}">{{message}}</h2>

active指的是style樣式的名稱, isActive是取data中的值. 這個結果就是顯示active樣式, 效果如下:

 

 還可以使用methods方法來控制class的顯示.

<a :href="url" class="title" :class="getClasses()">Hello</a>

案例: 有一個按鈕, 點擊一下顯示紅色, 再點擊一下沒有顏色. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 v-bind:class="{active: isActive}">{{message}}</h2>
    <button :class = "{active: isActive}" v-on:click="getActive">按鈕</button>
</div>

<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello",
            isActive: true
        },
        methods:{
            getActive: function() {
                this.isActive = !this.isActive;
            }
        }
    });
</script>
</body>
</html>

來看看效果

2) v-bind動態綁定class:(數組語法)

<h2 :class="[classaArray ,classaArray2]">{{message}}</h2>
<h2 :class="getClassArray()">{{message}}</h2>

 

完整程式碼:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .active {
            color: red;
        }

        .line {
            background: #666;
        }
    </style>
</head>
<div id="app">
    <a v-bind:href="url">Hello</a>
    <!-- 動態綁定class{對象語法} -->
    <a :href="url" class="title" :class="{active:isActive,line:isLine}">Hello</a>
    <a :href="url" class="title" :class="getClasses()">Hello</a>

    <!-- 動態綁定class[數組語法] -->
    <h2 :class="[classaArray ,classaArray2]">{{message}}</h2>
    <h2 :class="getClassArray()">{{message}}</h2>
    <h2></h2>
    <button v-on:click="getClass">按鈕</button>
</div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                message: 'Hello world',
                url: '//www.baidu.com/',
                isActive: true,
                isLine: true,
                classaArray: 'active',
                classaArray2: 'line'
            }),
            methods: {
                getClass: function () {
                    this.isActive = !this.isActive
                },
                getClasses: function () {
                    return { active: this.isActive, line: this.isLine }
                },
                getClassArray: function () {
                    return [this.classaArray, this.classaArray2]
                }
            }
        })
    </script>
</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

as