當我們的網頁引入 Vue.js 的時候，會建立一個 Vue 的全域變數，並且提供各種功能等我們去使用。

1. 建立 Vue 實體物件

1. 在 html 放置一個提供掛載的節點

   <!-- HTML -->
   <div id="app"></div>
   

2. 透過 Vue.createApp 建立實體物件

   // JS
   const vm = Vue.createApp({ 
   
   }); 
   

3. 將 Vue 實體物件掛載到網頁節點上

   // JS
   vm.mount('#app'); 
   

4. 或是，不使用變數存放 Vue 實體物件，直接掛載 (存到變數才有辦法夠過變數調用，和其他物件溝通)

   // JS
   Vue.createApp({ 
   
   }).mount('#app'); 
   

• 一個網頁頁面可以有多個 Vue 物件
• mount的對象可以是 id, class 或 tag，但是一個 Vue 物件實體只會掛載到一個標籤（第一個）
• Vue 一樣需要等 DOM 載入完成才能正常運作，引入位置應放在底部，不要放在 head 標籤內。

2. 資料綁定

在完成第一個步驟的掛載後，因為 Vue 實體物件內還沒有任何資料，所以不會產出任何畫面，接下來要在 JS 中建立資料，並且在 HTML 中綁定資料。

1. 新增資料：

   // 用 data 函式來儲存資料（固定格式，務必多練習記住）
   const vm = Vue.createApp({ 
     data () {
       return {
         title: 'Hello'
       }
     }   
   }).mount('#app'); 
   

2. 資料綁定

   <!-- {{}} 兩個大括號可以綁定成內容文字 -->
   <!-- 括號內打 data 裡面 return 的物件名稱即可 -->
   <div id="app">
     {{ title }} !!
   </div>
   

3. 上面兩個步驟若成功執行，網頁會顯示 Hello !!
4. 在這個範例中，使用變數 vm 來存放 Vue 物件，此時我們也可以透過變數來操作內部狀態。
   (Vue 物件需要被 mount 起來才能變更)

   // 前面多一個 $ 符號
   vm.$data.title = 'Hola';
   

3. 資料綁定變化型

資料綁定不僅僅是輸出而已，還能做運算。

1. 新增『數值』資料：

   const vm = Vue.createApp({ 
     data () {
       return {
         money: 100
       }
     }   
   }).mount('#app'); 
   

2. 在 HTML 中綁定實作運算

   <div id="app">
     {{ title * 100 }} 
   </div>
   

3. 上面兩個步驟若成功執行，網頁會顯示 10000