第一次鐵人賽 緊張緊張

雖然開賽前抹你了一下...
來硬著頭皮上

前情提要

Vue.js，三大前端框架之一，在沈迷於javascript的美妙之下，前進前端開發之路...

查找網路上資料，大都是以引用CDN方式的教學說明，專案開發的教學說明等等文件，看得愈來愈是烏煞煞...坎坷啊
但身為菜鳥想要裝Ｂ下，這點挑戰還是要有的...著裝！

• 菜鳥之路：
  • 1. vue component
  • 2. vue-router
  • 3. vuex
• 菜鳥裝備：
  • 1. scss
  • 2. typescript
  • ...買得起的話

首先為了湊合湊合字數，還是先來提提Vue.js這front-end framework，根據官方說法：

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue.js.org

如此文言，看來我該去補補文科了(笑)，需要再更直白解釋的請再問問google大神吧！Rookie的我，一番腦內小劇場後，得到的翻譯：
用傳統的做法對html做處理，如要對parent element加入數個children element，像是div、li之類的，需要使用javascript或者jquery，執行類似以下做法：

   // --- parent element ---
   // Version javascript
   // var $pe = document.querySelector('#parent-element');
   // Version jquery
   var $pe = $('#parent-element');
   
   // --- add children element ---
   // Version javascript
   // var $ce = document.createElement('div');
   // $ce.className = 'child-element';
   // $pe.append($ce);
   // Version jquery
   var $ce = $('<div class="child-element"></div>');
   $pe.append($ce);

沒錯～這類的做法需要動態對DOM做操作，當大量操作ＣＲＵＤ(!?)
的時候，效能影響就極為嚴重了勒，更何況還有事件綁定、樣式綁定等等之類的，用jquery來寫還算勉勉強強，javascript...歐～

將將～這時候想破頭腦不如來放鬆下試試framework，來View一下唄

用Rookie的話語來說，Vue幫我們處理了畫面的所有事情
新增元件，自己來 不用！
綁定事件，自己來 不用！
刪除元件，自己來 不用！
...，自己來 不用！

那還要自己幹嘛？？

誒～當然還要咩
你總要給他資料吧，要給他畫面格局吧

所以我們事先定好 模板(Component) 後
只要跟他講好，給你什麼資料的時候，你去用什麼模板畫出來給我看看
將將～咻的一下畫面就出來了
你只要專心處理你的邏輯就好啦～

像是 D槽下的秘... 規則之類的

哼哼，好像差不多佔完版面了
看來明天得認真寫點專業裝Ｂ了

最後先圖個Vue官網最重要的圖裝Ｂ下