Vue3快速入門教程

木法星人發表於2020-12-29
Vue

學某個新技能時,大多數人傾向於一開始就從頭到尾完整學一遍, 甚至有人來來去去學了很多遍想達到熟記於心的目的, 我個人認為這沒太大必要.
我的建議的是: 面向需求 or 面向問題來學習. 最開始你想實現什麼效果你可能暫時不太瞭解會涉及到哪些知識點, 那麼先列出你的PRD吧, 就像產品經理那樣, 下一步才是根據PRD尋找解決方法, 完成你的作品, 最後你會發現, 你已經通過這些"點"逐步形成"面", 學Vue達到了事半功倍的效果~
---------本次我們就用這種方式一起來看看Vue3

目錄

PRD-01:我想做一個類似廣告螢幕一樣的東西, 支援動態修改, 以便我可以隨時控制它的內容

Data Property模板, 俗稱: 變數模板

  • 第一種: 在<>內的,屬於HTML attribute
  • 第二種: 普通的Mustache語法 : 雙大括號-> {{number}} 的文字
1.模板實際演練: 每秒改變1次msg
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學學Vue的動態模板01</title>
</head>
<body>
<div id="app">
    <span>Message: {{ msg }}</span>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {msg: 0}
        },
        methods: {
            add() {

                this.msg++;
                console.log(this.msg);
            }
        },
        mounted() {
            //在生命週期走完mounted之後, 開始執行: 每秒重新整理一次msg值
            setInterval(this.add, 1000);
        }
    }).mount('#app')
</script>

</body>
</html>

msg有2種訪問方式, 同樣用定時器例子來說明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學學Vue的動態模板02</title>
</head>
<body>
<div id="app">
    <span>Message: {{ msg }}</span>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {msg: 1}
        }
    })

    const vm = app.mount('#app')

    //用原生JS定時器執行: 2種方式修改msg的值
    setInterval(function () {
        vm.$data.msg = 10
    }, 500);
    setInterval(function () {
        vm.msg = 20
    }, 1000);
</script>

</body>
</html>

</script>

</body>
</html>
2.模板實際演練: 例如把id做成動態的

下面是一個普通的帶id的div, 做過UI自動化的鐵子不陌生吧? 常常會用元素的id來做Xpath定位

<div id="Lee"></div>

那麼, 從開發的角度來看, 可以使用v-bind來"動態定義"元素的id

<div v-bind:id="dynamicId"></div>

Vue官方推薦-------將v-bind省略掉,簡約又美觀, 所以上面這句html中的v-bind去掉就變成

<div :id="dynamicId"></div>

那麼在控制邏輯裡就可以設定id的名稱了, 而不是寫死它
完整程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學學Vue的動態id</title>
</head>
<body>
<div id="app">
<div :id="dynamicId"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {msg: 0}
        },
        methods: {
            //click觸發執行add函式, 即可將msg自增1
            add() {
                this.msg++
            }
        }
    }).mount('#app')
</script>

</body>
</html>

此時你可能覺得, 這有啥用, 沒什麼需求會涉及到動態id的吧?
– 沒錯, 下一步我們改個樣式玩玩?

PRD-02: 我想做一個動態style, 隨機切換div的顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學學Vue的動態style</title>
</head>
<body>
    <div id="app" style="text-align: center;">
        <div :style="default_style">
            目標div
        </div>

        <button v-on:click="modify_class_color">點我換個心情</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    default_style: {
                        "background-color": "rgba(21, 199, 100, 0.408)",
                        "fontSize": '50px'
                    },
                }
            },
            methods: {
                //click觸發執行這個class修改函式 
                modify_class_color() {
                    this.default_style["background-color"] = this.randomColor();
                },
                //隨機生成一個rgba顏色
                randomColor() {
                    let color = "#";
                    for (let i = 0; i < 8; i++) color += parseInt(Math.random() * 16).toString(16);
                    console.log(color)
                    return color;
                }
            }
        }).mount('#app')
    </script>

</body>

</html>

怎麼樣, 找到黃色 了嗎? ๑乛◡乛๑ 手動滑稽~

在PD-01章節你已經學會了用按鈕控制style了, 以此類推, 如果你也想給某個東西設定一個開關, 當你觸發開關時才做某些事, 也很簡單

1.v-on實際演練: 點一下按鈕, msg增加1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學學Vue的v-on</title>
</head>
<body>
<div id="app">
    <button v-on:click="add">Message: {{ msg }}</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {msg: 0}
        },
        methods: {
            //click觸發執行add函式, 即可將msg自增1
            add() {
                this.msg++
            }
        }
    }).mount('#app')
</script>

</body>
</html>

Vue官方推薦-------將v-on縮寫為@ 簡約又美觀, 所以上面案例裡的html中button可以改為

<button @click="add">Message: {{ msg }}</button>

PRD-03:我想做一些條件判斷,減少程式碼量

還有一些常用的v-指令:

1.v-if實際演練:

<p v-if="seen">現在你看到我了</p>
//這裡，v-if 指令將根據表示式 seen 的值的真假來插入/移除 <p> 元素

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-for="(item,i) in list">資料是{{item}},它在陣列裡的下標是{{i}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {list:[1,2,3,4,5]}
        }
    }).mount('#app')
</script>

</body>
</html>

PRD-NN:用Vue用的越深入時, 就會有一些需求要用到鉤子, 什麼是鉤子我們先不管, 先看作用, 知道作用之後自然就理解了~

比如想在她初始化的時候就附帶幫你做好一些事

下圖是Vue3官方的生命週期圖
在這裡插入圖片描述

彙總一下, 我們在建立vm例項時, 常用的鉤子函式有:
created(){}
mounted(){}

//TODO 未完待續

相關文章