自學網頁の嬰兒教材:JavaScript(七)—— 不想教你 Vue,只想教你怎麼學框架

網站前端、後端工程師必備技能,最萬用的程式語言之一,新手必學的入門教材!

自學網頁の嬰兒教材:JavaScript(七)—— 不想教你 Vue,只想教你怎麼學框架

網站前端、後端工程師必備技能,最萬用的程式語言之一,新手必學的入門教材!

本課程為付費解鎖教材

站長獨家研發的新手友善、專案導向教材!

查看方案

JavaScript 系列七:前言

我知道你們很多人,來上這門課程,都是希望可以儘快去上班、賺錢 所以... 我們來學 Vue 吧! --- 在開始之前,我必須再次強調 與坊間很多補習班不同,我們已經花了六門課程的時間,在練習原生 JavaScript 與網頁基本觀念 也就是説,就算完全不使用任何套件,只用最原始的開發方式,你也已經可以寫出各種前端功能了 就算現在直接拿職場上的客戶需求給你,請你做出來,其實很多需求「你已經可以直接寫出來」了 只是有些客戶要求的功能,畫面上的 `狀態` 與 `互動行為` 太多,原生 JavaScript 寫起來會很吃力 就算引入 data model + render function 的觀念來輔助,還是很難寫 所以我們要學習「框架」,讓應用程式的 `狀態` 與 `互動行為` 變得更好管理 --- 我想說的是,不管你被要求去學習哪種框架 你都要知道,不管寫起來多花俏、或者語法看起法多晦澀難懂,追根究底,都只是在管理 `狀態` 與 `互動行為` 然後底層就只是一堆 `變數` 跟 `各種對於 DOM 的增減操作` 而已 不要把框架想得太神奇,都是你已經會寫的東西,只是為了方便而進一步包裝而已。業界術語叫:抽象化(abstraction) --- 最後,我想說明一下學習複雜工具該有的心態 即便是在同一個社群內(例如 Vue 社群) 對於完成一個任務,該把語法設計成什麼樣,都有各種不同意見 也就是想要解決一個問題,看起來寫法 A 就可以做到 有人會說不夠好,要用寫法 B 才算是漂亮 有人會說都不行,要用花俏的寫法 C 才算是真正完成 我個人的建議是:先從最單純、好理解的寫法開始學起!工作上也只使用這些即可!就算程式碼會因此冗長一點,也沒關係! --- 在學習任何框架的路上,面對某個部份,經常會出現這種感覺: 「這部份好複雜,雖然好像可以解決問題,但我有點不懂,這好像用更簡單的 XX 寫法就可以,不是嗎?」 一旦出現這種感覺,一律就只用 XX 寫法就好,不用管別人怎麼說 用簡易好懂的寫法 A 如果可以完成一堆任務,就通通都用寫法 A 就好 更進階的寫法 B 以及更花俏的寫法 C,只要「知道有他們的存在」就好,不用急著搞懂 在未來,真的遇到寫法 A 的瓶頸時,你自然會想起 B 跟 C,也才會終於了解他們的價值 也很有可能,整個職業生涯都用不到 B 跟 C,那本來就是一些花俏人士的個人偏好而已,你不用在意 所以,能解決問題就好,不要被框架的龐大文件,與社群的各種五花八門意見所迷惑了! 話不多說,讓我們馬上開始來寫 Vue 吧! --- **2024-04-30 補充:[為什麼站長的教材,看起來是教 Vue 2,不是教 Vue 3?](https://codelove.tw/@howtomakeaturn/post/GqPpwq)**

JavaScript 系列七:第1課 ── 認識 Vue 基本環境與 render state

## 課程目標 - 能夠運行 Vue 基本環境 - 能夠 render state ## 課程內容 身為工程師,要習慣到處翻閱各種技術文件 這次的課程,我不會手把手帶領,細談所有觀念 我會一次提供一個官網連結。請你一邊閱讀,一邊把其中的範例貼到 jsfiddle 跑跑看 我會額外提供簡單介紹&關鍵字,然後補充一些注意事項 官網文件內容是英文,如果對英文沒把握,就去翻中文官網 https://cn.vuejs.org/guide/introduction.html 但是,長遠來說,還是要逐漸提升自己的英語閱讀能力才行 --- 先學基本的安裝&運行 - https://vuejs.org/guide/quick-start.html 這系列課程,我們用最簡單的 CDN 環境來跑就好了,先只學 CDN 那一段就好 --- 接著來學 Vue 最基本觀念 - https://vuejs.org/guide/essentials/application.html - https://vuejs.org/guide/essentials/template-syntax.html 內容很多,大部份看不懂沒關係,稍微有個印象就好 如同我在前言所說,同一件事有很多種花俏寫法,你根本不用全部學會 這一課我們只要學會如何 render state 就好了 ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> {{ user.name }} 喜歡吃 {{ fruits[0].name }} 以及 {{ fruits[1].name }} </div> <script> const { createApp } = Vue createApp({ data() { return { user: { name: "John Doe" }, fruits: [ { name: "Apple", }, { name: "Banana", }, ] } } }).mount('#app') </script> ``` 上面這段範例,在 `data()` 函式將 application state 準備好 然後只要將一段作為 UI 的 html 寫好,我們稱之為模板(template) 接著 Vue 就會把 state 放進 template 裡面,把結果給 render 出來 貼到 jsfiddle 跑跑看吧,你會發現非常簡單、好理解 ## 課後作業 這系列課程,我們要模仿 Google Keep 製作一個應用程式 請先把玩一下 Google Keep https://keep.google.com/ 作業使用 jsfiddle 來寫 --- 這一課先簡單呈現 UI 就好 請使用以下這段 code 作為 application state ``` data() { return { notes: [ { title: "春節行程安排", content: "吃飽睡,睡飽吃", color: "red", }, { title: "工作待辦事項", content: "詢問各家廠商報價", color: "green", }, { title: "運動健身計畫", content: "每天早上六點去健身", color: "blue", }, ] } } ``` 使用以下這段 code 作為 template ``` <div id="app"> <div class="note"> <h3 class="title"> <!-- 請顯示第一個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第一個項目的內容 --> </p> </div> <div class="note"> <h3 class="title"> <!-- 請顯示第二個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第二個項目的內容 --> </p> </div> <div class="note"> <h3 class="title"> <!-- 請顯示第三個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第三個項目的內容 --> </p> </div> </div> ``` - 陣列內容就只有三筆資料,就只要顯示這三筆資料就好 - 在 application state 裡面的陣列,直接用 `索引` 來取出值就好,這一課先不用寫 for 迴圈 - color 這一課還不會用到,可以先忽略沒關係 - 請在 `<style>` 加上一些樣式,讓整個頁面漂亮一點 - 每則記事可以單純的放進網頁就好,不用像 Google Keep 那樣花式的排版(那種叫瀑布流排版,很難寫) 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列七:第2課 ── 體驗一下 Reactivity 的效果與便利

## 課程目標 - 體驗一下 Reactivity 的效果與便利 ## 課程內容 來學 Vue 之中 Reactivity 的基本觀念 - https://vuejs.org/guide/essentials/reactivity-fundamentals.html 老樣子,大部份看不懂沒關係,稍微有個印象就好 記得之前的課程,每次更新完 state,你都要接著去執行 `render()` 函式嗎? 所謂 Reactivity 就只是說:當你更新完 application state 之後,Vue 會自動幫你更新 UI 上的內容 就只是這樣,不要把它想得太複雜 ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> 嗨,我是 {{ user.name }} <button @click="changeNewName"> 改名字 </button> </div> <script> const { createApp } = Vue createApp({ data() { return { user: { name: "John Doe" } } }, mounted() { this.user.name = "Frank" }, methods: { changeNewName() { this.user.name = "Kevin" } } }).mount('#app') </script> ``` 到 jsfiddle 跑跑看,看看畫面上出現什麼 `mounted` 是 vue 將畫面第一次載入之後,可以安排任務的地方,通常會放一些「系統初始化任務」 `@click` 跟 `methods` 那些,就只是操作事件的寫法而已,先照做就好 以上兩點,後面課程會詳談 --- 在 Vue 文件中,你會到處看到 `this` 這個關鍵字 要存取 application state,有時前面要加 `this.` 有時又不用 關於 `this` 關鍵字,它是一個 JavaScript 程式語言裡面過時又晦澀難懂的觀念 我不想細談,你也先不用研究。就先照做、程式能跑就好了 反正改天你真的遇到問題,大概知道要往這方向研究就是了 --- 接著來學 Vue 之中 Computed 屬性的觀念 - https://vuejs.org/guide/essentials/computed.html 老話一句,看不懂沒關係 雖然大家都說用這寫法,效能會比較好、程式碼會比較優雅 但實際上,我自己在好幾個專案,就完全不使用任何 `computed` 功能 一律通通只用 `methods` 來寫程式,根本也不會怎麼樣 --- 在整門系列課程,會常常像這樣,我叫你讀官網文件的很多內容 但我接著又會說,看不懂沒差,其中 XXX 根本沒用,其中 YYY 也沒必要用,只學 ZZZ 就好 這些都是我個人的主觀意見。如果你在網路上找資料,會看到許多工程師,有跟我完全相反的建議 這是軟體工程師圈子的常態,充滿各種主觀喜好、偏見,你要習慣一下 (如果你很好奇我是怎麼做出這些判斷的,請重新閱讀此系列課程,第一篇文章:前言,裡面的最後一段) 你不需要完全同意我的觀點,在研究過程中,如果你有發現比較喜歡的寫法,就直接用沒關係 如同我多次提醒過:只要能解決問題就好,你就隨便寫沒關係 各種做法細微的差異,將來有一天你會慢慢理解 ## 課後作業 承接上一課的作業 這一課來簡單體驗一下 reactivity 的效果就好 也就是簡單更新一下 application state 就好 請加入 `mounted` 函式,在裡面把「第一個記事」的內容更新為「多出門、到處走走、也要多運動」 完成之後,你會發現,你的春節行程安排,看起來積極多了~ 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列七:第5課 ── 學習 Vue 事件處理的寫法

## 課程目標 - 學習事件處理的寫法 ## 課程內容 來學一下事件處理的寫法 - https://vuejs.org/guide/essentials/event-handling.html 眼花撩亂沒關係,我已經多次告訴過你應該用什麼心態去面對 不用把這些東西看得太神奇,這些東西的背後,就只是你已經寫過的 html `onclick` 那些東西而已,只是多加一層「抽象化」,由 Vue 中介在中間管理 DOM 我們在寫 Vue 的時候,就是「完全不親自操作 DOM」了,通通交由 Vue 處理 我們負責專心管理 application state 就好,不用費心思去管理 DOM 用了框架,就不要再去直接操作 DOM,否則會跟框架起衝突、讓程式充滿 bug --- 有件事我必須說一下,就是 `@click` 後面可以放函式名稱,也可以直接執行函式 這個設計,實在很糟糕!我非常不喜歡! ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <button @click="hello1"> hello 1 </button> <button @click="hello2('John')"> hello 2 </button> </div> <script> const { createApp } = Vue createApp({ methods: { hello1() { alert('hi'); }, hello2(name) { alert('hello ' + name) } } }).mount('#app') </script> ``` 以上範例,在 `@click` 裡面的內容,到底要不要加上小括號 `()`? 乍看之下,根本無法理解。要翻閱文件,才發現原來兩種寫法都可以 我認為這違反了程式碼風格應該要 `保持一致性(consistency)` 的原則 Vue 這種彈性設計,讓程式碼變得令人困惑、難以理解 --- 再提一件事,Vue 的 template 中,雙引號的內容,到底是 `變數` 還是 `字串`? ``` <button @click="greet">Greet</button> ``` 這個 greet 是函式名稱,是變數 ``` <div :class="{ active: isActive }"></div> ``` 這裡在雙引號內容,宣告 JSON 物件,所以是變數 ``` <template v-if="ok"> ``` 這裡是變數,變數型態大概是布林 ``` <div class="active text-danger"></div> ``` 這裡是字串 ``` <input :value="text" @input="event => text = event.target.value"> ``` 這邊的 `text` 到底是字串還是變數? ``` <input ref="input"> ``` 這邊的 `input` 到底是字串還是變數? 透過觀察可以發現,冒號開頭 `:`,或者小老鼠開頭 `@` 或者縮寫法 `v-` 開頭的,雙引號裡面是變數 不然的話,就跟普通 html attribute 一樣,雙引號裡面就只是字串而已 對於 Vue 這種彈性設計,我一樣「非常不喜歡」! 當然,這些都是我個人主觀看法,一定很多人覺得又好寫、又彈性 這對於只想快速開發、懶得追根究底的新手,可能很方便 但在深入思考、試著搞懂資料型別、試著像資深工程師一樣思考的時候,會造成很多額外的困惑 --- 我想說的是,遇到這類問題,你就多試一下、多翻官網文件 然後不要覺得自己很笨、被框架嚇傻了 要知道複雜的工具,本身背後就代表多種不同的主觀偏好,然後那些主流觀點,可能真的不怎麼樣,所以不是你的問題 隨著更有經驗之後,你會能夠做出各種主觀的判斷、能夠比較各種設計的優劣之處 目前階段,你就先想辦法讓程式能跑、能完成任務就好了! --- 再來學一下表單欄位內容的處理 - https://vuejs.org/guide/essentials/forms.html 在上個系列課程中,我們學過 data model + render function 的寫法 使用框架之後,則變成,就連表單欄位內容,也是 data model 的一部份 乍聽之下有點怪,其實,實際寫過之後,會發現還滿方便的! ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <input v-model="username"> <button @click="greet"> Greet </button> <h1> {{ username }} </h1> </div> <script> const { createApp } = Vue createApp({ data() { return { username: "John Doe" } }, methods: { greet() { alert('Hello, ' + this.username); } } }).mount('#app') </script> ``` 正因為把 `欄位中目前輸入的值` 視為 `當前應用程式的狀態` 的一部份 所以可以隨時取得表單欄位內容,而不用像以前那樣,要透過 DOM selector 之類的,去找到元素、才拿到內容! 一樣,表單欄位內容的取得,寫法多種,就挑順眼、簡單的來用即可 ## 課後作業 承接上一課的作業 這次要來開發「新增」與「刪除」功能囉! 請在記事列表的上方: - 新增一個 `input` 來輸入「記事標題」 - 新增一個 `textarea` 來輸入「記事內容」 - 新增一個 `select` 來選擇顏色 - 新增一個「新增」按鈕,點擊之後,會新增記事 - 請將這些欄位的內容,放在 application state 裡面管理 然後,請在每則記事的裡面,新增一個「刪除」按鈕。點擊之後,會刪除記事 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列七:第6課 ── 認識 Lifecycle Hooks 與 Watchers

## 課程目標 - 認識 Lifecycle Hooks 與 Watchers ## 課程內容 來認識一下 Lifecycle Hooks - https://vuejs.org/guide/essentials/lifecycle.html 簡單來說,在 vue 執行階段,又可分為 `mounted` `updated` `unmounted` 等等,將近十個時間點 根據應用程式的需要,可以在這十個時間點,進行必要的檢查&執行特定任務 但是,實務上,除了 `mounted` 經常用來跑一些初始化任務之外,其餘的時間點,幾乎不會用到 所謂 Lifecycle Hooks 是一個有點過時的觀念!稍微讀一下就好,相關功能大多被 Watchers 取代了 --- 接著就來認識一下 Watchers - https://vuejs.org/guide/essentials/watchers.html 簡單講,在 Vue 中,所謂的 Reactivity 已經很好用了: 「某些變數在更新之後,其他相關變數、以及畫面 UI,會跟著自動更新」 除此之外,還可以進一步使用更進階功能: 「隨時監控某些變數,如果發現它們更新,就執行一些相關的任務」 這些任務我們稱之為 `副作用(side effects)` 關於 side effects 怎麼解釋,是一個比較困難的主題 這邊先不詳談,目前有點困惑沒關係,作業中會讓你練習一下,先有點小感覺就好 ## 課後作業 承接上一課的作業 這一課要來做自動儲存功能 請使用 Watchers 去監聽 `notes` 狀態 每次 `notes` 有更新,就自動儲存到 Local Storage 裡面! 接著,在 `mounted` 裡面檢查 Local Storage 如果有資料,就把資料更新到 `notes` 裡面 如此一來,就完成了自動儲存功能,連儲存按鈕都不用做! --- 提示:普通的 watchers 不夠用,要使用 Deep Watchers 這部份有點難解釋,你先知道:普通的 data 變數型態,例如字串、數字、布林,可以用普通的 watcher 但如果是陣列或物件型態的 data,就要使用 Deep Watchers 先知道這樣就好 --- 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列七:第7課 ── 認識 Template Refs

## 課程目標 - 認識 Template Refs ## 課程內容 來讀一下 Template Refs 的說明 - https://vuejs.org/guide/essentials/template-refs.html 簡單來說,在我們使用了任何前端框架之後,就已經把「所有 DOM 更新相關」的工作,委託給了框架處理 我們從此只要寫框架提供的語法就好了,不要直接去操作 DOM! 不然的話,框架已經接手了整個 DOM,你又在某些地方對 DOM 做出更新,會引起衝突,會造成很多 bug! 而且這種 bug 很難處理,因為你不知道框架實際上是怎麼更新 DOM 的,需要深入研究框架背後的機制才行 所以才會說,用了框架,就請避免操作 DOM 但是,很多時候,會需要用一些現成的第三方套件(例如你學過的一堆 jQuery 外掛套件),那些套件初始化設定時,又都需要提供一個 selector 這種情況下,Vue 提供了 ref 功能,讓你可以存取「vue 底下真正的 DOM」,可以拿來跟其他小套件整合 --- 看到這邊,你可能會心想: 「那我如果不使用 ref,我就是要直接使用 `document.querySelector()` 來抓取 DOM 元素,然後作為參數放進其他小套件執行,會怎樣?」 老實講,根據我個人經驗,在絕大多數情況下,其實也根本不會怎麼樣,程式還是可以順利運作的 所以,你真的要這樣做,也是可以的 但如果真的遇到很難解決的 bug,例如抓不到 DOM 元素、抓錯 DOM 元素時,記得往這方向研究一下就是了! ## 課後作業 承接上一課的作業 在輸入記事內容的地方,為了加強 UX,我們來加上 autosize 功能 請使用此款套件 https://github.com/jackmoore/autosize 將 textarea 加上 autosize 功能吧! 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列七:結語

恭喜你完成這份奇怪的 Vue 入門課程 如同我在這門課程中不斷強調的 任何的技術工具,其實都充滿了大量的過時觀念、多餘觀念、錯誤觀念 也就是很多小功能、小語法,要嘛是已經很少人在用了,要嘛是重複設計了,要嘛是根本設計失敗了。這些學了也用不到 偏偏你在補習班或者上網自學的時候,沒有人敢跟你這樣講。因為講的人自己也不太確定、沒有真正深入了解 所以我在這門課程只引導你使用最基本的語法、用最基本的功能 你已經完成了所有作業,代表這些基本功你都順利掌握了 不要小看這種只專注在基本功的學習方法 把基本功摸熟的人,在有必要學習任何進階觀念的時候,會比別人更快融會貫通 --- 偷偷跟你說一句,即便是業界工程師、業界講師,大多數人對於程式設計、大型工具的許多觀念,也都是一知半解的 這沒有什麼問題,我也總是跟你說:能解決問題就好 比較有問題的是:不確定的東西,要知道自己不懂、承認自己也不確定。在有必要的時候,要知道往哪個方向去深究 除此之外,既然自己也不太確定,就不要跟別人說 XXX 寫法一定比 YYY 寫法好,諸如此類的話 在程式開發這個圈子,絕大多數意見,都只是主觀意見,卻被講得好像是科學證明過的公認客觀意見、有對錯之分。這絕非事實 請積極學習,但也請保持懷疑&批判的態度。面對新工具、新觀念,不需要感到太困擾或者焦慮 --- 翻閱 Vue 官方文件,你會發現 `Essentials` 這個段落,你幾乎通通讀完了 這些就是 Vue 的基礎觀念,已足夠你開發出各種易於維護、架構彈性的中型應用程式了 那麼該如何開發大型應用程式呢?那就需要更進一步學習模組化、元件等等的觀念 這些會在後續的課程提到! --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(八)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/jqe6xX


👉 身份:資深全端工程師、指導過無數人半路出家轉職 👉 使命:打造 CodeLove 成為優質新手村,讓非本科也有地方自學&討論