課程目標

  • 能夠運行 Vue 元件

課程內容

我們一樣讀官網文件就好

先來讀元件基本觀念

https://vuejs.org/guide/essentials/component-basics.html

再來讀註冊元件的方法

https://vuejs.org/guide/components/registration.html

再來讀元件的檔案格式

https://vuejs.org/guide/scaling-up/sfc.html

我鼓勵你習慣去讀英文,但實在不行就讀中文沒關係

https://cn.vuejs.org/guide/essentials/component-basics.html


在我的課程中反覆說過很多次

官網文件中各種內容很多,大部份看不懂沒關係,稍微有個印象就好

很多內容學了,其實根本實際上也很少用到

留個印象,遇到問題大概知道去哪翻閱就可以

整個程式設計師生涯,就用這種態度即可,沒問題的


很多時候,甚至一知半解,也沒關係,根本不重要

舉個例,官網有時候會這樣寫

<ButtonCounter />

有時候會這樣寫

<button-counter></button-counter>

官網有說明,分別在什麼時候,建議哪種寫法比較好

老實說,那些說明,連我都看不太懂,我也不認同官網的建議

我建議你就隨便寫,能跑就可以了

上過我前面課程的話就知道,我對 Vue 的許多設計細節,充滿意見、不認同

但是這個行業就是這樣,大家都充滿主觀看法,工具本身也充滿主觀看法

這些很正常,並不妨礙你成為一個專業的程式設計師

反正,框架的背後,就是會轉換成你在系列一~六學過的那些:DOM 操作、事件處理、狀態管理,就這樣而已

課後作業

請使用官方的元件試玩工具:Vue SFC Playground

https://sfc.vuejs.org/

這一課我們來試著匯入元件就好

  • 請建立 Header.vue Main.vue Footer.vue 三個元件
  • 元件內容分別顯示 I am header! I am main! I am footer! 就好
  • App.vue 之中匯入以上元件

做出以上功能,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 9 則留言