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 區塊