開始使用 Vue.js

3 分鐘

若要開始使用 Vue.js，您需要安裝架構、建立 Vue 應用程式，然後在網頁上進行註冊。註冊會告知網頁如何使用應用程式。

這就開始吧。

將 Vue.js 新增至網頁

您可以透過幾種方式將 Vue.js 新增至應用程式。在本課程模組中，您會新增 script 元素，以從內容傳遞網路 (CDN) 匯入 Vue。藉由使用 CDN，您可以將 Vue 新增至現有的應用程式，而不需要加以重寫。

若要使用 CDN 將 Vue 新增至網頁，請將下列 script 元素新增至您的網頁。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

這個元素會告知瀏覽器執行 src 指示詞所參考的指令檔。指令碼執行之後，Vue API 就會可供使用。

建立應用程式

所有 Vue.js 的應用程式都是從建立應用程式物件開始。應用程式是您應用程式所使用的任何資料和方法的中心位置。雖然應用程式物件會遵循某些慣例，但其核心是 JavaScript 物件。

若要建立 Vue 應用程式，請叫用 createApp() 方法。

const App = Vue.createApp({
    // methods and content go here
});

新增資料

現在您已建立應用程式，可以新增屬性以提供您的應用程式更多功能。大部分應用程式都會用的一個重要方法是 data()。 Vue.js 會使用此方法來存取任何您需要提供應用程式使用的資訊。

注意

您將在此課程模組中使用 data() 方法。

物件內 data() 所傳回的任何屬性都是動態的。 Vue.js 會自動偵測任何值變更。接著，其會以更新的資訊來更新並重新整理顯示的適當部分。

建立資料物件

Vue.js 會叫用 data() 方法。作為交換，Vue.js 預期會有 JavaScript 物件。

在下列範例中，傳回的物件包含屬性 firstName 和 lastName。

// a sample app object
const App = Vue.createApp({
    data() {
        return {
            firstName: 'Christopher',
            lastName: 'Harrison'
        };
    }
});

此時會公開資料，以向使用者顯示資料。

掛接應用程式

必須先掛接已建立的應用程式物件，Vue.js 才能加以使用。藉由裝載應用程式，您可以指出應用程式所控制網頁的部分，讓其顯示資訊或甚至是 HTML。

若要裝載應用程式，請參考一般 HTML 元素的 id。

<!-- the HTML element which will host our app -->
<div id='app'>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

在執行階段中，id= 'app' 元素的內容會取代為 Vue.js 應用程式的內容。

顯示資料

若要在網頁上顯示資料，請使用 {{ }} 語法，有時也稱為 handlebars。在 {{ }} 語法中，您可以提供任何需要的 JavaScript 程式碼，以存取您想要顯示的資訊。

您稍早建立的 data() 函式會傳回物件。 Vue.js 會自動使物件可供使用，因此您不需要呼叫 data()。

如果您想要顯示名字，可以使用 {{ firstName }} 語法。下列範例顯示完整的應用程式，可以顯示 lastName 和 firstName。

<!-- the HTML element which will host our app -->
<div id='app'>
    {{ lastName }}, {{ firstName }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

注意

{{ }} 語法只能在 Vue 控制項的元素內運作。語法可以在元件內部或裝載 Vue 的 HTML 元素內運作。