我的夢想就是帶這一台筆電走遍全世界，「成為一個工程師似乎可以完成這個夢想」，於是在去年底毅然決然的投入程式語言，後來也很順利的在網站接案公司任職。
距離夢想其實還有一段距離，爬了很多國外找工作網站，發現框架技能是不可或缺的技能，趁這次30天挑戰的機會，一個月內學會框架!!
接下來的30天會以「重新認識 Vue.js」這本書作為主軸，每天會讀一小章並做筆記，最後去完成書上給的實作當作ending。
三個主流框架中vue是最年輕的一個，也是相較好入門的框架。
能幫助我們簡化前端重複的code，讓程式碼保持整潔，提高易讀性
利用模板(元件)的概念，先把模子寫出來，之後有相同的程式碼直接複印，同樣的五個資料表可能需要好幾行的程式碼，利用模板可能五行就能解決，此外，資料若有更動也會重新渲染
把想要控制的元素包到id="app"裡面，Vue的模板語法是{{ }}，大括號包住要控制的物件，在script內寫下以下幾段文字，向vue打招呼第一步就完成啦!!
<div id="app">
{{message}}
</div>
<script>
const { createApp, ref } = Vue;
const vm = createApp({
setup() {
const message = ref('Hello Vue 3.0!');
return {
message
}
}
})
vm.mount('#app');
</script>
瀏覽器在讀取畫面時依序讀取解析內容，如果
<script>寫在<head></head>之中，可能會發現有讀取不到的問題，因為瀏覽器先讀取了指令卻尚未讀到要操控的對象，也就是在<body>裡面的東西，所以需要加上DOMContentLoaded事件，待瀏覽器完全讀取及解析後再觸發事件。
document.addEventListener('DOMContentLoaded', () => {
vm.mount('#app');
})
Vue.js 介紹
https://mybaseball52.medium.com/introduction-to-vuejs-21755105802e
Why Vue.js
https://ithelp.ithome.com.tw/articles/10213438
網頁的生命週期
https://ithelp.ithome.com.tw/articles/10197335
DOMContentLoaded
https://developer.mozilla.org/zh-TW/docs/Web/API/Window/DOMContentLoaded_event
iThome鐵人賽
看影片追技術