Vue 起手式,載入 CDN 建立環境
之前學習 Vue 寫的筆記,先 Po 上來一下,預計這星期補上後續更熟悉後對 Vue 的了解。
引入 Vue CDN
引入 Vue CDN,載入 Vue 外部資源,讓網頁能夠讀取 Vue 功能
1 |
|
在 HTML、JavaScript 建立 Vue 環境
HTML
設定一個 ID 為 app 的 div,事實上不一定要取名為 app,不過大部分人都會取名為 app。
1 |
|
JavaScript
範例 JS
1 |
|
JS 解說
1 |
|
- 一開始宣告一個變數,內含要傳給 HTML 的資料
- 其中定義一個 data() 函式,裡面要放置 return {},資料則放在 return {} 內
- 資料擺放格式為「資料名稱:資料內容 or 物件」,讀取資料時會使用資料名稱,而內容可以是單一值或物件
- 最後透過 Vue.createApp 選取要傳入的變數,並在透過 mount 傳送給指定的 HTML 區塊
另外一種 JavaScript 寫法
1 |
|
- 方法一是先宣告變數,後面再透過 Vue.createApp 去選取變數
- 此方法是在宣告變數的同時,就透過 Vue.createApp 選取並將資料傳遞給指定的 HTML 區塊
希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。
如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:
- 將我的部落格加入書籤,隨時造訪部落格。
- 將我的文章分享給你的親朋好友。
- 透過 LikeButton 幫我按 5 下讚。
- 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)
本站所有文章除特別聲明外,均採用 BY-NC-SA 許可協議。轉載請註明出處!