在寫頁面之前,先來介紹 Vue 頁面結構。
首先先在 src/components 底下建立一個 home.vue
跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。
template
就是相當於原生 html 檔內 html 標籤的部分,我是習慣下一個最外層的 div 去控制整個頁面的樣式。
script
要使用 typescript,所以設定 lang="ts"
你看 script 標籤內有一個 setup,這個是 setup 語法糖,是 Vue 3.2 版開始推出的新功能,這玩意兒出現之後,Vue 瞬間變得超級好寫,更加直覺。