Vue 學習筆記——指令

cakincheng發表於2020-10-19
Vue筆記

指令 (Directives) 是帶有 v- 字首的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表示式 。指令的職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。

一 v-text、v-html

v-text：顯示文字原始內容，不對html元素進行解析

v-html：顯示html解析後的內容
1 程式碼

<!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>
</head>

<body>

    <div id="app">
        <!-- 
            {{}}方式在網路慢的時候會存在問題。在資料未載入完成時，頁面會顯示出原始的{{}}，載入完畢後才顯示正確的資料，這個問題稱為插值閃爍
            該表達是支援JS語法，可以呼叫 js 內建函式（必須有返回值） 
            表示式必要有返回值。例如 1+1 ，沒有結果的表示式不允許，如let a=1+1; 
            可以直接獲取 Vue 例項中定義的資料或函式 
        -->
        {{msg}} {{1+1}} {{hello()}}<br />
        <span v-html="msg"></span>
        <br />
        <span v-text="msg"></span>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "<h1>Hello</h1>",
                link: "http://www.baidu.com"
            },
            methods: {
                hello() {
                    return "World"
                }
            }
        })
    </script>

</body>

</html>

2 效果
在這裡插入圖片描述

二 v-bind

  • 單向繫結

    vue物件中的值變化會影響繫結標籤，反之不會影響

  • 縮寫

    <a v-bind:href="url">可以縮寫為<a :href="url">

  • 屬性繫結

    給html標籤的屬性繫結

    給class，style的值進行繫結： {class名：屬性名(boolean)}/{style屬性名：屬性值}

1 程式碼

<!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>
</head>

<body>
    <!-- 給html標籤的屬性繫結值：用 v-bind，它是單向繫結 -->
    <div id="app">
        <a v-bind:href="link">gogogo</a>
        <!--
            樣式的動態變化 
            class,style  {class名：是否加上通過true或false實現}
            text-danger 要麼用單引號，要麼駝峰命名
            fontSize 要麼用單引號，要麼駝峰命名
        -->
        <span v-bind:class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">你好</span>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                link: "http://www.baidu.com",
                isActive: true,
                hasError: true,
                color1: 'red',
                size: '36px'
            }
        })
    </script>
</body>

</html>

2 效果
在這裡插入圖片描述

三 v-model

雙向繫結，繫結的屬性值會反過來影響vue物件中的值
1 程式碼

<!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>
</head>

<body>
    <!-- 表單項，自定義元件: v-model 雙向繫結 -->
    <div id="app">
        精通的語言：
        <input type="checkbox" v-model="language" value="Java"> java<br />
        <input type="checkbox" v-model="language" value="PHP"> PHP<br />
        <input type="checkbox" v-model="language" value="Python"> Python<br />
        <!-- 陣列中元素用,號連線用join -->
        選中了 {{language.join(",")}}
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                language: []
            }
        })
    </script>

</body>

</html>

2 效果
在這裡插入圖片描述

相關文章