技術學習

Vue 學習

📢 本文由 gemini-2.5-flash 翻譯

Vue 指令

Vue 會根據不同的指令，針對標籤實現不同的功能，指令為帶有 v- 前綴的特殊標籤屬性

v-html

用於設定元素的 innerHTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
    <head>
        <meta charset="utf-8">
        <title>v-html</title>
    </head>
    <body>
        <div id="app">
            <div v-html="link"></div>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    link:'<a href="https://yexca.net/">yexca</a>'
                }
            })
        </script>
    </body>
</html>

v-show 與 v-if

\v-showv-if
作用控制元素顯示隱藏控制元素顯示隱藏 (條件渲染)
語法v-show=“表達式”v-if=“表達式”
表達式值ture 顯示，false 隱藏ture 顯示，false 隱藏
隱藏說明透過控制屬性 style="display:none;"直接刪除或建立元素
情境頻繁切換不頻繁切換

v-else 與 v-else-if

用於輔助 v-if 進行渲染，需要緊挨著 v-if 一起使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<html>
    <head>
        <meta charset="utf-8">
        <title>v-else and v-else-if</title>
    </head>
    <body>
        <div id="app">
            <p v-if="gender === 1">性別：男</p>
            <p v-else>性別：女</p>
            <hr />
            <p v-if="score >= 90">成績判定 A</p>
            <p v-else-if="score >= 70">成績判定 B</p>
            <p v-else-if="score >= 60">成績判定 C</p>
            <p v-else>成績判定 D</p>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    gender: 1,
                    score: 89
                }
            })
        </script>
    </body>
</html>

v-on

用於註冊事件 = 加入監聽 + 提供處理邏輯

語法一

v-on:事件名=“內聯語句”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<html>
    <head>
        <meta charset="utf-8">
        <title>v-on 1</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="count1--">-</button>
            <span>{{count1}} </span>
            <!-- v-on: 可以替換為 @ -->
            <button @click="count1++">+</button>
            <hr />
            <button v-on:mouseenter="count2--">-</button>
            <span>{{count2}}</span>
            <button v-on:mouseenter="count2++">+</button>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    count1: 1,
                    count2: 2
                }
            })
        </script>
    </body>
</html>

語法二

v-on:事件名=“methods中的函數名”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<html>
    <head>
        <meta charset="utf-8">
        <title>v-on 2</title>
    </head>
    <body>
        <div id="app">
            <button @click="fun">切換顯示隱藏</button>
            <p v-show="isShow">hello yexca</p>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    isShow: true
                },
                methods: {
                    fun(){
                        // this 始終指向當前實例
                        this.isShow = !this.isShow
                    }
                }
            })
        </script>
    </body>
</html>

呼叫傳參

直接看範例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<html>
    <head>
        <meta charset="utf-8">
        <title>v-on 3</title>
        <style>
            .box{
                border-style: solid;
                border-color: aqua;
                padding: 10px;
                margin: 10px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="box">
                <h3>自動販賣機</h3>
                <button @click="fun(5)">可樂5元</button>
                <button @click="fun(10)">咖啡10元</button>
            </div>
            <div style="padding-left: 20px;">餘額：{{balance}}</div>
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    balance: 900
                },
                methods: {
                    fun(a){
                        this.balance -= a
                    }
                }
            })
        </script>
    </body>
</html>

v-bind

用於動態設定 HTML 的標籤屬性，例如 src、url、title 等

語法：v-bind:屬性名=“表達式”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<html>
    <head>
        <meta charset="utf-8">
        <title>v-bind</title>
        <style>
            img{
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- v-bind 可以省略 -->
            <img v-bind:src="imgURL" :title="imgTitle" :alt="imgAlt" />
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    imgURL: '../img/01.jpg',
                    imgTitle: 'warma',
                    imgAlt: 'warma'
                }
            })
        </script>
    </body>
</html>

v-for

基於資料循環，多次渲染整個元素

語法：v-for="(item, index) in 陣列"

item：每一個項目，index：索引

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<html>
    <head>
        <meta charset="utf-8">
        <title>v-for</title>
    </head>
    <body>
        <div id="app">
            <h3>fruit shop</h3>
            <ul>
                <!-- 當 index 不需要時可以省略 -->
                <li v-for="item in list">{{ item }}</li>
            </ul>
            <ul>
                <li v-for="(item,index) in list">{{ index }}</li>
            </ul>
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    list: ['apple', 'banana', 'watermelon']
                }
            })
        </script>
    </body>
</html>

為便於 Vue 進行列表項目的正確排序與重複利用，需要給元素加入唯一識別，即 key 屬性

key 的值只能是字串或數字型別，且必須具有唯一性

1

<li v-for="(item, index) in list" :key="item.id"></li>

建議使用 id 作為 key，不建議使用 index 作為 key (會變化，不對應)

v-model

給表單元素使用，實現雙向資料綁定，以便快速取得或設定表單元素內容

雙向資料綁定即視圖變化，資料自動更新

語法：v-model=‘變數’

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<html>
    <head>
        <meta charset="utf-8">
        <title>v-model</title>
    </head>
    <body>
        <div id="app">
            username: <input type="text" v-model="username"/><br /><br />
            password: <input type="password" v-model="password" /><br /><br />
            <button @click="login">登入</button>
            <button @click="reset">重設</button>
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    username: '',
                    password: ''
                },
                methods: {
                    login(){
                        console.log(this.username, this.password)
                    },
                    reset(){
                        this.username = ''
                        this.password = ''
                    }
                }
            })
        </script>
    </body>
</html>

指令修飾符

透過 . 指明一些指令後綴，不同後綴封裝了不同的處理操作

按鍵修飾符

@keyup.enter 鍵盤 Enter 鍵監聽

v-model 修飾符

v-model.trim 去除首尾空白

v-model.number 轉為數字

事件修飾符

@事件名.stop 阻止事件冒泡

@事件名.prevent 阻止預設行為

計算屬性

基於現有的資料，計算出來的新屬性。依賴的資料變化，會自動重新計算

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

new Vue(){
    el: "#app",
    data: {
        count: 0,
    },
    computed: {
        doubleCount() {
            return this.count * 2;
        },
    },
}

Vue 生命週期

生命週期指一個物件從建立到銷毀的整個過程

Vue 生命週期有 8 個階段，每觸發一個生命週期事件，會自動執行一個生命週期方法 (鉤子)

狀態階段週期
beforeCreate建立前
created建立後
beforeMount載入前
mounted掛載完成
beforeUpdate更新前
updated更新後
beforeDestroy銷毀前
destroyed銷毀後

其中 mounted 較為常用，指 Vue 初始化成功，HTML 渲染成功。(發送請求到伺服器，載入資料)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

new Vue(){
    el: "#app",
    data: {
        
    },
    mounted(){
        console.log("Vue 掛載完成，發送請求取得資料");
    },
    methods: {
        
    }
}
前端技術 Vue
This post is licensed under CC BY-NC-SA 4.0 by the author.