iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

我的Vue學習筆記系列 第 1

Day01-為什麼我要學Vue/Vue簡介

我的夢想就是帶這一台筆電走遍全世界,「成為一個工程師似乎可以完成這個夢想」,於是在去年底毅然決然的投入程式語言,後來也很順利的在網站接案公司任職。

距離夢想其實還有一段距離,爬了很多國外找工作網站,發現框架技能是不可或缺的技能,趁這次30天挑戰的機會,一個月內學會框架!!

接下來的30天會以「重新認識 Vue.js」這本書作為主軸,每天會讀一小章並做筆記,最後去完成書上給的實作當作ending。

三個主流框架中vue是最年輕的一個,也是相較好入門的框架。

VUE的優點

★高度潔癖的人一定要會

能幫助我們簡化前端重複的code,讓程式碼保持整潔,提高易讀性

★懶惰的人會喜歡

利用模板(元件)的概念,先把模子寫出來,之後有相同的程式碼直接複印,同樣的五個資料表可能需要好幾行的程式碼,利用模板可能五行就能解決,此外,資料若有更動也會重新渲染

VUE怎麼運作

把想要控制的元素包到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


下一篇
Day02-Vue.js的實體
系列文
我的Vue學習筆記30

1 則留言

0
liawyudye
iT邦新手 5 級 ‧ 2021-09-16 17:16:51

高度潔癖的人讓我想到...

/images/emoticon/emoticon37.gif

hsiu753 iT邦新手 5 級 ‧ 2021-09-17 08:34:21 檢舉

/images/emoticon/emoticon37.gif

我要留言

立即登入留言