Vue3 101-3

在上一個單元，已經學會了一個基本的 Vue 的程式流程，接下來一樣開啟 App.vue ，然後刪除所有的程式碼，改寫成：

<template>
  {{ message }}
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello World',
    };
  },
};
</script>

程式邏輯說明：

在這裡只先改寫 <template></template> 與 <script></script> 兩個標籤的內容，先看 <script></script> 的內容：

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello World',
    };
  },
};
</script>

所有程式邏輯都必須要寫在 export default {} 裡頭，使用 name: 'App' 來定義這個 .vue 的名稱， data() {} 是放置變數的地方，在裡面使用 return 來輸出一個變數 message，而這個變數 message 的型別是一個字串，定義了 'Hello World'。

而要把這個變數 message 顯示在 <template></template> 內的話，就必須要使用雙層大括號 {{ message }}。

所以這段程式碼簡單的說，定義了一個變數 message，型別是字串，給予 'Hello World'，然後顯示在網頁上。所以直接開啟網頁之後，就可以看到網頁上只會輸出 Hello World。

Vue3 101-3 [完]