vue3 Composition API 學習手冊-3 起手式

第 12 屆 iThome 鐵人賽

DAY 3

自我挑戰組

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 3 篇

12th鐵人賽 vue3 vue 3

史坦利

2020-09-15 09:33:45

4558 瀏覽

分享至

上一篇文章介紹過了選擇使用前端框架的因素，若你的專案符合使用他的條件，或是你現在正在找一份前端工程師的工作，那認識框架就變成勢在必行的功課了，我們選擇介紹的前端框架是在進幾年使用者快速成長的vue.js（以下簡稱vue），至於原因的部分主要是因為它有著較為平緩的學習曲線，很適合還沒有接觸過框架或是前端設計師跨足工程師領域的入門框架。

在vue的官網上稱呼自己是一個漸進式的框架，何謂漸進式框架，簡言之就是它有著可以讓你慢慢深入使用的特色，以學習者的角度來看，可以想像是在學習游泳，一開始讓你從比較淺的池子開始學習，然後慢慢讓你進入比較深的水池甚至是大海，讓學習者可以不會一開始就面對太大的挑戰而心生恐懼，接下來我們就開始漸進式的來介紹如何在網頁中使用vue的框架。

先備知識：HTML、CSS、Javascript

vue.js的引入

<script src="https://unpkg.com/vue@next"></script>

目前因為還處於RC（Release Candidate）階段，未來等正式發行之後引用的路徑應該會有所改變。

基本使用vue時跟使用jQuery或其他函式庫的方式很像，就是透過官網下載檔案或是使用CDN去引入js檔，在這邊稍為岔題來介紹一下CDN，通常我們網站的檔案會存在一個伺服器中，當然所有的使用者都必須連結到這個伺服器來瀏覽我們的頁面，如下圖所示。

這樣一來當用戶數眾多或是來自不同國家時，就一定會速度上的差異，而CDN（Content Delivery Network）的基本原理就是把這些檔案複製到許多伺服器中，透過離使用者最近的伺服器提供資料，這樣一定能增快檔案存取的速度且達到負載上的平衡。

當然在本文中提到的CDN並不是針對所有網站的內容（這是需要付費的），而是指vue.js官網所提供載入的vue檔案的CDN路徑，可以參考下圖是透過兩個不同國家去載入vue的伺服器IP，能夠看得出來是透過不同伺服器來載入的。

好吧！CDN就暫時介紹到這邊，我們就透過CDN來載入vue吧！

體驗vue的魅力

接下來就是我們第一隻的vue的練習了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p>Type: {{ framework.type }}</p>
        <p>Framework: {{ framework.name }}</p>
    </div>
</body>
</html>
<script>
    const { reactive } = Vue;
    const app = {
        setup(){
            const framework = reactive({
                type: "Frontend",
                name: "Vue",
            })
            return { framework }
        }
    }
    const myVue = Vue.createApp(app).mount("#app");
</script>

在引入vue.js之後，我們在頁面中開始撰寫script，script中的第一行先將vue核心中的reactive取出來使用，他扮演變數綁定的角色，能在變數變更後自動更新視圖。

接下來宣告一個framework的物件，物件中寫下setup()這是固定在vue中的設定名稱，裡面我們再宣告一個framework物件綁定vue的reactive，並且在物件內宣告兩個變數，並設下預設值，最後將framework返回出來，這樣的目的在於告訴vue需要幫我們監控framework裡面的任何變化，只要有變化，視圖就必須要自動更新。

最後一行將作用域透過mount指向app這個div，透過div id設定了vue的作用區域這個方法類似Angular的做法，當然vue的作者也聲稱vue是擷取了Angular中喜歡的部分，建構出來這個輕量級的框架。

若在HTML區域中要將這兩個數據顯示出來，我們只需要知道數據的ID，並且透過兩個大括號包覆，就可以將數據顯示在頁面中了。

上方的script也可以改為先新增好物件，在透過createApp的方式掛載到HTML元素上，例如：

const framework = {
    data() {
        return {
            type: 'Frontend',
            name: 'Vue',
        }
    }
}
const app = Vue.createApp(framework).mount('#app');

但其實在Javascript中我們要秀出一個變數的值，其實並不需要如此麻煩，也許這樣就可以了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>Type: <span class="type"></span></p>
        <p>Framework: <span class="name"></span></p>
    </div>
</body>
</html>
<script>
    var type = "Frontend"
    var name = "Vue";
    var app = document.getElementById("app");
    app.querySelector(".name").innerHTML = name;
    app.querySelector(".type").innerHTML = type;
</script>

那為何還要這麼麻煩的使用vue這個框架呢？稍安勿躁，請看看下面這個範例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <p>
            <select onchange="myVue.framework.type = this.value">
                <option value="Frontend">Frontend</option>
                <option value="Backend">Backend</option>
            </select>
        </p>
        <p>
            <select onchange="myVue.framework.name = this.value">
                <option value="Vue">Vue</option>
                <option value="React">React</option>
                <option value="Angular">Angular</option>
                <option value="Laravel">Laravel</option>
                <option value="CakePHP">CakePHP</option>
                <option value="Django">Django</option>
            </select>
        </p>
        <p>Type: {{ framework.type }}</p>
        <p>Framework: {{ framework.name }}</p>
    </div>
</body>

</html>
<script>
    const { reactive } = Vue;
    const app = {
        setup(){
            const framework = reactive({
                type: "Frontend",
                name: "Vue",
            })
            return { framework }
        }
    }
    const myVue = Vue.createApp(app).mount("#app");
</script>

這面這個範例多加了兩個下拉選單，期望能夠過下拉選單來改變畫面中的值，程式中可以看到我們是透過script改變vue所監控的變數，但其實整個視圖也會因為值被改變而自動更新。