Vue 起手式，載入 CDN 建立環境

之前學習 Vue 寫的筆記，先 Po 上來一下，預計這星期補上後續更熟悉後對 Vue 的了解。

引入 Vue CDN

引入 Vue CDN，載入 Vue 外部資源，讓網頁能夠讀取 Vue 功能

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

在 HTML、JavaScript 建立 Vue 環境

HTML

設定一個 ID 為 app 的 div，事實上不一定要取名為 app，不過大部分人都會取名為 app。

1
2
3
<div id="app">
    
</div>

JavaScript

範例 JS

1
2
3
4
5
6
7
8
9
const app = {
    data () {
        return {
            text: 0,
        }
    }
}

Vue.createApp(app).mount('#app')

JS 解說

1
2
3
4
5
6
7
8
9
const 變數名稱 = {
    data () {
        return {
            資料名稱: 資料內容 or 物件,
        }
    }
}

Vue.createApp(變數名稱).mount('HTML ID 名稱')
  • 一開始宣告一個變數，內含要傳給 HTML 的資料
  • 其中定義一個 data() 函式，裡面要放置 return {}，資料則放在 return {} 內
  • 資料擺放格式為「資料名稱：資料內容 or 物件」，讀取資料時會使用資料名稱，而內容可以是單一值或物件
  • 最後透過 Vue.createApp 選取要傳入的變數，並在透過 mount 傳送給指定的 HTML 區塊

另外一種 JavaScript 寫法

1
2
3
4
5
6
7
const app = Vue.createApp({
    data () {
        return {
            text: 0,
        }
    }
}).mount('#app');
  • 方法一是先宣告變數，後面再透過 Vue.createApp 去選取變數
  • 此方法是在宣告變數的同時，就透過 Vue.createApp 選取並將資料傳遞給指定的 HTML 區塊