經過昨天的介紹，相信各位對於生命週期與 Component 元件已有初步了解了
那今天就來與各位聊聊關於 Vue.js 的實體物件與他的主要 API

首先呢，當我們透過 <script> 的標籤將 Vue.js 引入後，瀏覽器會新增一個 Vue 的全域變數，而此變數也提供兩個主要功能，第一，可以做為 Vue 的實體物件去建構子函數，第二，此全域變數也能做為全域 API 的宿主物件，提供給開發者可以透過 Vue 物件去設定的 Global API，例如：Vue.config、Vue.directive、Vue.nextTick 等。

Vue 的實體物件

我們在最一開始的時候，我們需要先建立一個createApp({...})，和一個 Vue 的物件實體，並且讓此物件指定至某個變數，如我們下方範例裡的 vm 。

const vm = Vue.createApp({
  data () {
    return {
      message: '鐵人賽範例'
    }
  }
});
vm.mount('#app');

如上範例程式碼，我們透過 Vue.createApp() 得到一個新的物件，並指定給 vm 變數。而我們所新成的此物件則稱之為「Vue.js 的實體物件」，在 Vue 中，我們可以透過將實體物件掛載在網頁上的 DOM 節點，來達到控制網頁去顯示相對應的內容。

option

那當我們建立 Vue 的實體物件時，將會引入一個物件參數，而此參數就是 Vue 核心的實體，通常會稱之為options物件。而此物件也是實體物件的核心，用來定義狀態和事件還有之後要學的呼叫函式，如 methods 等。

掛載到 DOM

那建立好 Vue 的實體後的下一步呢，就是需要將此實體 Vue 掛載到網頁的 DOM 節點，才能取得網頁的控制權，這時候我們就要去找到所需要控制的對象，並使用mount()去掛載節點。而這邊要注意的是，目標節點可以使用 Class 或 TagName，並無僅限於 ID，若有多種符合條件的元素時，Vue 則會選擇第一個用來實體掛載。

在實體掛載完成後，如果你因為網頁毫無變化而感到疑惑時，別急，我們還沒講完呢，接下來就準備跟各位說明要如何顯示在網頁上！

資料傳至畫面

首先呢，因為 Vue 採用的是宣告式渲染與 MVVM 模式來操作網頁內容，所以我們需要先把網頁畫面需要用到的資料或狀態，定義到我們的 Vue 當中，之後變會透過 HTML 的模板去進行輸出。那我們在 Vue 實體中所去定義的狀態，其實就是透過data的屬性儲存的。

const vm = Vue.createApp({
    data() {
        return {
          name:"鐵人賽範例" 
        };
     },
});
vm.mount('#app');

可以看到以上範例的程式碼中，實體所回傳的狀態物件是以物件 key-value 的形式呈現。且在 Vue3 中，不難看出是 data 被強制以 function 的形式出現。除此之外，在 Vue 的實體中也重新定義了 name 的狀態，讓他的值為 鐵人賽範例的字串呈現。

話說回來，那我要如何將此狀態呈現在網頁上呢，這時候就需要依賴 Vue 的模板語法了，此語法所採用的是 Mustache 語法，簡單來說呢，就是在 HTML 中以大括弧去表示{{}}，而在括弧裡的內容則是 Vue 實體物件內的狀態。就譬如以上的程式碼，我們只需要在他的 HTML 裡加上以下範例：

<div id="app">
  {{ ithome }} - html 模板呈現
</div>

如此我們的網頁就會針對模板內的程式碼進行解析，並輸出鐵人賽範例 - html 模板呈現的字樣。

而在 Vue 的語法裡，除了直接將 data 的內容渲染至畫面外，也能做簡單的運算：

首先，我們需要先在 html 的模板裡輸入我們的元素及運算式，接著再至 <script> 中輸入數值，都完成後 Vue 就會把運算出來的值輸出到畫面上了喔。

範例網頁呈現結果：

門票價格: 500
人數: 3 
金額: 1500 

那當然除了以 html 作為 Vue 模板之外，我們也可以透過 Options 的 template 去定義

const vm = Vue.createApp({
    data() {
        return {
            name: 'VueExample',
        }
    }
})
vm.mount('#app');
vm.$data.name = "2022_鐵人賽範例"

就像這樣，網頁會告訴我們 Uncaught TypeError: Cannot set property 'name' of undefined，因此我們需要在vm.mount('#app')執行後去vm.$data，就可以呈現在我們的網頁了。

const vm = Vue.createApp({
    data() {
        return {
            name: 'VueExample',
        }
    }
})
const vmInstance = vm.mount('#app');
vmInstance.$data.name = "2022_鐵人賽範例"

定義狀態

在 Vue 的實體建立以後，會自動為此實體加上 $data 的屬性，而我們就可透過 vm.$data.XXX 來操作內部狀況，那要注意的是，如果再 createApp 時沒有將實體掛載到 DOM 上的話，那麼這時候的 vm.$data 就是沒有被定義的。

template 模板

如果再 Vue 的實體中加入 template 的屬性，那這時候的 Vue 就會將 template 內的 HTML 當成模板去使用，而呈現再網頁的結果與直接使用 html 的模板是一模一樣的。

像這樣，顯示在網頁上的結果就會是 ：

2022 it 鐵人賽範例

這邊要特別注意的，不管你是使用 html 為模板或是 temlate 的屬性去指定內容，在每個元件中的第一層都必須要有一個元素，而也只能有一個，不能超過。
(補充：每個 Vue 實體就是一個元件)

那我們今天的介紹就到這裡結束囉！我們明天見 886