2. Vue語法--插值操作&動態繫結屬性詳解

盛開的太陽發表於2021-02-20

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. 這個視情況而定, 如果已經有了,就不用再定義了

2. 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>

2. Vue語法--插值操作&動態繫結屬性詳解

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

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

二. vue語法 -- 插值操作

什麼是插值操作呢? 

簡單說, 就是將data中的文字資料,插入到html中.

1. 插值操作--Mastacha語法

語法: {{資料}}
- {{}} 獲取vue變數的值, {{}} 這種寫法就是Mastacha語法. 什麼是mastacha語法? 可以參考這篇文章: https://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, 加了這個是什麼含義呢?

我們先來看看效果

2. Vue語法--插值操作&動態繫結屬性詳解

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

2. Vue語法--插值操作&動態繫結屬性詳解

我們發現, 在控制檯將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='http://www.baidu.com'>百度</a>"

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

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

2. Vue語法--插值操作&動態繫結屬性詳解

第一個是將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, 後面更得內容會被覆蓋掉, 來看效果

2. Vue語法--插值操作&動態繫結屬性詳解

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, 那麼效果是什麼樣的呢?

2. Vue語法--插值操作&動態繫結屬性詳解

使用了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: "https://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:"http://www.baidu.com"
        }
    });
</script>
</body>
</html>

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

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

2. Vue語法--插值操作&動態繫結屬性詳解

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

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

2. Vue語法--插值操作&動態繫結屬性詳解

我們還可以是用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樣式, 效果如下:

2. Vue語法--插值操作&動態繫結屬性詳解

還可以使用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: 'https://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>

三、動態繫結屬性
2021-01-03
Vue模板語法、屬性繫結、條件渲染的學習
2024-05-13
Vue
css屬性值語法解讀
2016-01-05
CSS
Vue 模板語法第一式 —— 插值
2019-06-05
Vue
理解CSS屬性值語法
2016-08-12
CSS
Java登陸第三十七天——VUE3插值表示式、文字渲染、屬性渲染、事件繫結
2024-04-03
JavaVue事件
jQuery動態修改連結的href屬性值
2018-07-07
jQuery
05-v-bind動態繫結class（物件語法）
2020-12-20
物件
深入理解 CSS 屬性值語法
2017-01-12
CSS
vue中未定義的的物件屬性在頁面中繫結不到值
2020-12-04
Vue物件
vue 動態繫結 v-model
2019-03-25
Vue
Vue 動態繫結CSS樣式
2021-08-07
VueCSS
3. Vue語法--計算屬性
2021-02-20
Vue
mybatis Selective動態判斷屬性值新增或修改操作，batch批次操作
2024-06-08
MyBatis
用DataBindings屬性繫結控制元件的值
2009-02-05
控制元件
Vue 動態繫結圖片 src 屬性閃屏白屏無內容顯示 BUG 小記
2020-11-16
Vue
動態修改input元素type屬性值
2017-12-04
Vue select 繫結動態變數
2022-01-17
Vue變數
vue動態(type可變)input繫結
2018-02-03
Vue
Vue 動態資料繫結核心方法
2017-02-26
Vue
第二講、Vue3.x繫結資料、繫結html、繫結屬性、迴圈資料
2021-01-04
VueHTML
vue學習筆記（一）---- vue指令（ v-bind 屬性繫結）
2020-10-24
Vue筆記
Vue — 計算屬性(computed)詳解
2024-03-09
Vue
二、插值操作
2021-01-03
2.事件繫結
2016-10-13
事件
理解靜態繫結與動態繫結
2019-09-26
前端框架VUE——資料繫結及模板語法
2021-09-18
前端框架Vue
JavaScript如何動態修改img的src屬性值
2017-03-09
JavaScript
C++ — 靜態繫結與動態繫結
2017-10-10
C++
vue計算屬性詳解——小白速會
2018-04-02
Vue
Vue 框架-05-動態繫結 css 樣式
2018-11-13
Vue框架CSS
After Effects 圖層屬性及屬性組結構詳解
2021-10-12
css box-sizing屬性值詳解（MDN）
2019-08-07
CSS
WPF使用MVVM（一）-屬性繫結
2022-01-06
MVVM
C++的動態繫結和靜態繫結
2019-05-10
C++
java繼承-靜態繫結和動態繫結
2018-02-07
Java繼承
java中的靜態繫結與動態繫結
2024-11-13
Java
動態繫結一
2015-10-27

2. Vue語法--插值操作&動態繫結屬性詳解

目錄

1. 設定vue模板