JavaScript 系列一:第1課 ── 基本的函數操作、onclick 事件: https://jsfiddle.net/applelily/89kgaq13/15/ --- JavaScript 系列一:第2課 ── 基本的變數操作、從 html 取得內容: https://jsfiddle.net/applelily/1at2Lfyx/2/ --- JavaScript 系列一:第3課 ── 修改 html 的內容: https://jsfiddle.net/applelily/yrungtjv/1/ --- JavaScript 系列一:第4課 ── 基本的陣列操作: https://jsfiddle.net/applelily/5zq9s0ft/13/ --- JavaScript 系列一:第5課 ── 基本的 if/else 條件流程控制: https://jsfiddle.net/applelily/v9r7sey8/1/ --- JavaScript 系列一:第6課 ── 認識資料型態與轉換: https://jsfiddle.net/applelily/j4arzdbs/3/ --- JavaScript 系列一:第7課 ── 認識巢狀結構: https://jsfiddle.net/applelily/1q6f95kz/9/ ---
**第1課 ── 學習 Vue 元件基本觀念** https://reurl.cc/lgbKMj **第2課 ── 學習 Vue 的 props 觀念** https://reurl.cc/bDbvjy **第3課 ── 學習 Vue 的 events 觀念** https://reurl.cc/yYjmRO **第4課 ── 學習 Vue 的 v-model 觀念** https://reurl.cc/prj5k8 **第5課 ── 學習 Vue 的 slots 觀念** https://reurl.cc/77vKed **第6課 ── 學習用外部狀態管理 vue 元件** https://reurl.cc/D4kM4m **第7課 ── 學習開發狀態複雜的 vue 元件** https://reurl.cc/VNx16Q
第1課 ── 碼表應用程式 code:https://replit.com/@ZoeyLai1/08-01-vue-stopWatch 畫面:https://9ae3756c-652f-4aa4-9b57-cb528318fb08-00-msym9f2ajxo5.riker.replit.dev/ 第2課 ── 筆記應用程式 code:https://replit.com/@ZoeyLai1/08-02-memonote 畫面:https://7dbf5017-ba3f-4eb5-b23e-87113bcc7803-00-1adu58vgexdpe.kirk.replit.dev/ 第3課 ── 分帳應用程式 code:https://replit.com/@ZoeyLai1/08-03-Bill-Splitter 畫面:https://785f5421-ace6-4774-b61f-251f0116f3fd-00-1kwg6tn2x390e.spock.replit.dev/ 第4課 ── 行事曆應用程式 code:https://replit.com/@ZoeyLai1/08-04-Calendar 畫面:https://7d9aaced-68fc-43bb-be9a-bb01a57052f8-00-2ctp2w5sp9cin.picard.replit.dev/ 第5課 ── 體重追蹤應用程式 code:https://replit.com/@ZoeyLai1/08-05-WeightTracking 畫面:https://9960c13e-b168-449c-b1af-ee5a8a845f55-00-mz9h4glvormk.worf.replit.dev/ 第6課 ── 天氣查詢應用程式 code:https://replit.com/@ZoeyLai1/08-06-weather 畫面:https://d3611be6-202d-420b-b819-4a0a5e96d089-00-3i4a3aup60d27.janeway.replit.dev/ 第7課 ── 國家資訊與地圖應用程式 code:https://replit.com/@ZoeyLai1/08-07-Openstreetmap?v=1 畫面:https://fdd23ba6-9fea-448e-81a3-30f81404789f-00-2y0nrngj6ja9m.riker.replit.dev/
第1課 ── 認識 Vue 基本環境與 render state https://jsfiddle.net/ZooeyLai/x1sq7mhg/23/ 第2課 ── 體驗一下 Reactivity 的效果與便利 https://jsfiddle.net/ZooeyLai/kfv4szoy/43/ 第3課 ── 學習 Vue 條件判斷式的寫法 https://jsfiddle.net/ZooeyLai/oq36rkdw/3/ 第4課 ── 學習 Vue 迴圈的寫法 https://jsfiddle.net/ZooeyLai/bruyxjdv/20/ 第5課 ── 學習 Vue 事件處理的寫法 https://jsfiddle.net/ZooeyLai/dgk9vfuo/115/ 第6課 ── 認識 Lifecycle Hooks 與 Watchers https://jsfiddle.net/ZooeyLai/8b7ocvg1/6/ 第7課 ── 認識 Template Refs https://jsfiddle.net/ZooeyLai/bsq3wo2d/7/
第1課 ── 學習 Vue 元件基本觀念 [作業](https://tinyurl.com/yst8ytys) 第2課 ── 學習 Vue 的 props 觀念 [作業](https://play.vuejs.org/#eNrtF11vFFX0r1w3MW0JM7MYiWRZQCE+YBSJPLo+zO7c7oydvTPeuftRm000lQCWpESMoCFRowIJKU2MMVWqv6azLE/+Bc/9mrl3dtvSiPHFPmznnu9z7vm6a7U30tQd9HGtUWtmHRql7GyLRL00oQy9s3reD7r4MsWDCA/RMk16qFVzPRvOuVu101WuGfKCrkXwSFAGeNnvxwyttQhCnQTYCSYsa6C1iurjhdDxcU4b+MxfXJJ8CFHM+pToE0JpkjGQoY9cdJzQBtgyDCMGNggZ8o/hEbug0e3Y76xY6Nhv45ijLChN+iTAQQUuTeN/bW7qmyO/l8YYvHn/A4UZg/OarodZmATcV4lL+0xxlI6BeWGUuZY4N+1n4eIacl1XILmzaLwkJEtfSZbE2I2T7uIst6aTNsjfoc86YWmHHbwA47SBGO3jwrvQJ0GMqWkmBCrp+PEVllAfLjrD7CLDvcVWrSevjV4GqRAq9NaVdy+5GaMR6UbLq9JArnGpdECHUf+vBPMFWVagEb93U4V102iuxXZIS+r9nFA3DlnDcFBaV97fGakm9WmGFy2Du/uEcmkJnTtXSlCKZ61DZ7RJh2uohMFQYWGKJObp3PSKpgEHkJPGPsNwQqgZRAPUif0sOwOyk2C1VRPwCiYikPoXEsL8iGBa0ACVKL7iiND00cazT3cmt69N129Ovt5+9v3m9MbPJbopJCG2mmIQK2q+VSvUiPNFTgHAgdNLAhwDmAfP1bReqduzle9vy+Sra/nWnRdnS9GQDrZHyDc6nJIsqJRko8lJM7hoE1zRLHhNPFxlB4dJHGAKNODxdHcnv/qTSIb86gPwvKQ2TK2GanJ3O791f3LvRn7v9vTBFzNB0rarrqrjomMX4s5KOxnNRkrRmzbMhKndZywh6PVOHHVWOGPRZSHR8q27k+u3nm5/tvfnRtOTpDpDPUjRedmayoE0N1/DE2fVvGp68F3AK2O0UZyTVIgUBW1GEJh1sdmSTEuUlLJejZBrlXJ+AfElPHxbXq8chjzcPHR6lBnaD+Yu0vNoEgy9XYoxOYTPbMADZ1nwmT0IJcv2XDDTFqGGVmvSzOY3EJruWMRGGVoM2guLWNW3Rajcq5LOJK1VOmbWFd/6q+kZ7RWOGVuN+ecxOU96Pu1GpIHqoj+nfhDAyJLHcYu4vAFrwpEzjAIGM/9U/WVB3YuIE+KoG8LoP1XPBqGABlEG6lYbaDnGI1PMWaR0coTT9rMIBvOJuhDGieyWLkmrwhRzEFHcYVEChkMU+z0iUB/2MwbT1oFlhsFGCDj4xVTg/DjqEgf2uB4oNeBdH9aBExT3lBHVSv2PzKiU6YFWDCln5r/zRMGoVTdeO66rX2/uLzkOH0n5k9+fPtrQyzJHovzq+t6TX//avbm3c3/y5fZk85e9nY38+p3882+n63+0iMhdBJ/5j99NH27lj7+xpysvBAhAlcgee6K05uBhSuSPf2sRXeuThz/ku5stkm+uTz9Zb4SMpVnD8z7q+5lP3QAPPDAZtOmXgCdqx0OOo1Je7xrzHhAp76fFgqh2/itic1PbmLHsW3C15VuwYsc/n8A67ZNikXuOrUdZoFcf4/513TfEVQKyWFTb8PToCqUiBRNabKHKk8L48pmRUBjN7/lB1Ae/dYzPoYWT9XS0gBpoob6g91CpWPWWtTXpMhpDWh3eYKz1T8Y3hooqOkbdVUkKaQyV4mTRx5hDT2loke4REYxtWEBXBEa6AFmejhA8W6IAiTdYKWuodLxWr/Y191Ut3juGBpiyCJZaR5QlBCtJT6Nj3r51Yzxd/y8fu3zKp7c8j/9B1qswP1/Wm3rlSK2WgEVxWD1YxHOLA/7vVx4W89FrRa96s7Uyr1Je+Xfr5OTR62T8N2L3XWg=) 一開始方向錯誤,沒有懂老師出題的用意,就照先前的想法做了控制面板,後來才想清楚不是單純用vue做東西,而是做出quasar這種開發模板用的componen 第3課 ── 學習 Vue 的 events 觀念 [作業](https://play.vuejs.org/#eNrNV1tvG0UU/iuTVVHsNL7kIUJaArQplwgRhIjEC4vU8e7YXrI3ZmedGMtPIaJtIvJAaWkkbiK0qaqmCCGakhT+C/I6zlP+Amdmdta7rhPaChCWsto555uzc8755ptJR7sYBOVWRDRdmwtNagfsFcOz3cCnDC225yPGfA/Vqe8iQytXlIXPMLSXDM/wyKrAWqSOI4ehjuEhZPoQwCMeC3XUGYbpTnOnhRkuFCUQIUpYRD01QijE7QX7bTtkOvpA2dDQzX8BphD69RY8dMSadlgWk0Rw9XNwjTg6rHnRdw0t5zJ9x6fcRYk14mJklV1S7gYlxBsBhPYnREfV8mzOSv3Is3RUx05I8vCPI1grLJJGWYesw1NltmyH4Xw7HzXN7TU8mkCam2M3mqzm8C6dnmEQ0cAZRagUXxyX4kgiwwxHc3+GFHmdme01xuf4FjaXT0vSwnQZZrfPzNH2RufLDGeeKb9/qYOLtIwuehahoT9KtXwr28Rx/JWzEh3T7P8XW8+flmDNebLHudRWmjYbn9vYJj5XZv9EhqX/KsPn2IYfJm9dEG1ldwlr+hbXaOkTMlrwUm1GCDuEsoKhLdiwSHQeefBnaBMThlYUcYZfSAozdjbY89P//HrnZH/rySBKCsZGeTNxnr0S+VzBzGxCXnLEj6OIEShcYnChjDDmpxA38JrMVdLTDwaMuIGDGYERQnOW3UKmg8PwZWilb4HeCDt41NGm1toq1X0KKAcOMOTXh6eZoSnIBUmqEuGsSqDlDNGGSF0QS0HEIOMU5FJOMcg4OblKOURKtwyKM0z5+XvGJYimfGKAXhW0QwnJsmEE+dJAYnQKuiILWoGKwttcJVNnGIas7fDXKdl8F9OG7YGAiQYH2LKg+7AjKHHB0jW8Mm+GxK7YFoOGz1SrLwh0k3DVFIaw1RQmyw7hW21YkUNWhaWBAyGPMiASjtIK5Vb+FDYM8uuVYHe6sE9ChimT3wa+JKvVprXstYhfpCZKJTS4t9F7/MfR9d1476v+jUdH25/G62u9g18Hd28ffX43fvhjvP7w5HD7fSjS0huX0LuwtIYoNC9Fk7Eg1CuVsG7ymB+FZZ82KtzDqwih44Pfju5tpFcrDkIy/snhZm//dv/6g/7WL739jfjKzfjat4O1x3Kq4ASCYbzz3WD3fry3PVjb7N96cPz91uDqzxIzJE8O2L/xWXz/ZhYoKDkGE6/fifceJZoCvMpDNq8eX/ky3rkT/7SVXAEFvfq7P8SHiSXhUNZ0wXRsczkX6fjgm/4X1+LfN6G2vYODeOMWKpU4rdKdPO5uGlAfSqvkJZHoJUaHN5CMMufsic7nbFKk34ncGqGJKdHoed93CPYULhHorPVppKeWkRclQa4SnWRTydKA4xxxbVaYzIjJ5LRcdVFhdcFawKbyWoOjSRJPl9VIj4ykNmk5UkfNp3BleQ9bdgSVXMSsWca1sFBQOjFbhX1fLaISKqRqMCtMRVDtyWB1Mg3l2B5ZSPbqZRM7ZuFch9e0i6aSnVm8nILrvseWRMFz0CkhCRlcKhV/G1FmMg5YFUgU+o5tIXF+q1ldWUt5BHQ6yS7ogiZwZZMNO0Pcyqp9koLZ8nvwP5MQnWRZ6diM4IJI9cC34diiifipOHrTbxEKwQwWQhpEnynP8HUKiuWEqvsXUnaEYQ==) 嘗試從quasar的原始碼反向工程做出一樣的效果 第4課 ── 學習 Vue 的 v-model 觀念 [作業](https://play.vuejs.org/#eNrNVltv3EQU/iuDVdQN2mtuTc0m4iIh8YAEqtQXzIPXnt012B4zHm8SrRa1TSuVhrA8tAmKkKDqRakCSSsQDckGfgzr3eQpf4EzF3udTSraPvXB9pwz5z7nfOO29n4QFFsR1nStGlrUCdiC4TteQChDnyx/7AcRQ3VKPGRoxZJicHlDe9fw8ZKQs3HdjFyG2oaPkEVA2cc+C3XUTk108nzPNpmZm5ByCFHMIuonFEIOl7xquhHWkR+5rlBBqAOO4C0oD7MmsbllSS+azGqmFHcdMWynDI9EPtDcJWdwS9VSmiUQDHuBazIMFEJV22khyzXDcN7QasReNjTBhx2VRhKp7hEbuyJUEB3FbWiJxHtRAMni04I5Hy+K9QSaX0C5kR6aR+nWyIZr1rALanXHdbE94itaUKU3IkISMdfxszGmnEyU1RIUGFbVUqbsQIZs2eXLd2QreCZtOL6OyuLcA9O2Hb8hyY7hF/nBSMFFx2Zw+JVy+W0h2sROo8kEI2w1Bct2QnC0rKO6i5cEhy8KtkOxxRwCXiziRp4vtmqm9VWDQsvYBeASqiPaqOWm5vJo6hJ/JmQE0EEqYC2vZSaCT9BbhQI62l7tH/4zvLsV7/w4WP9ruHkzvrXSP/jz6Mnj4fdP4ueP4lvPT3qbV6GoVz76EH0K8UmvvBhNxoJQL5XCusVtfhkWCW2U+A6vI5iOD/aH26vJXHEZJM2f9L7r7z0e3N0ddP/o763GtzfiOz8frRxKzVZBnDMCRvzwl6Ot3+Kdzfha799r1+Puevz3BqyloDjSU2KDX2/2D9fiH9aGW89Oerfj7m7/4FF/b41nuNJFn0VmaFIUr94b3ts+vvFgsPXgqLt7vL8BAcVPnw2f3o/Xd47v7w4f7sc/bQ02rh/fuBOv/Q5mTnrfSp+yoRFoxr2uZCX9o5ioUFC9kgzvedATUALFSwBFZKKjK4xC/ygskZ509AEhLjZ9xU2cjfNHo8GhjC0H8FXmEscZuFIQJd/YczgAfm5oZ8bM0L54RSyyiM9MCJCOAElMZgqcdjLjowHUE+V2mrT85jPpplXujBR5mqDG8FLWWksBRDaNFEmEa9i8wLPOXTyT8cU8uoBbcCUUGcw2hq4dwxGKv45gJMcxTfZindBRegvttmrRTqdaEquXwpZiWkPVKiR0JABQDNJOCwsISLBnphxwuIBpN3zpbkzLrIUAHExqubguYEfoQAVJkKWo6ada0CWT5bIXIl52kwqBDNZU5qbyqHLpsngpuIHbWNygWcgDG8p6Co+TwHlppyOzep1YUYi+kUWFvpRcOCDHTrjStcgqsZ+JeW4mjyYrk/CameEhIxRapgszUS5eTlwV1YSrH4QX55sFYSkyC9A7O8sftU+ojUHdh3+MDKNQI4wRD+oAZYCjgejP01YNn6rzC0WNR5O0MIUCJLQsjIj4hS4Wm45qAVBiPKwa5XeQj8MwVymKesgCpJP2GiWYhhtoGpKYHitB5VSq5xg6L9t0+NN8U86ZjMddnD3q1MP/CZ5bn8rZG7XzH5rEyeY=) 同上 第5課 ── 學習 Vue 的 slots 觀念 [作業](https://play.vuejs.org/#eNqdVd1uG0UUfpWDEeJH3o0TCqkWUylBofiiroQbIaS9Ge+O7VHXM6uZsR0TWSoqkVADBFAFFarUIgpEKj8XVCjQwtNk3fQKHoEzM7trO2mo2ht7zpnv/M45325X1tLUHw5oJajUVSRZqs+FnPVTITVcGK8TzqmEjhR9CCv+UqExFmHljZDTLYuMaYcMEg3bIQeIBJpzyrUKYHvmZFI1lzHR5KWXHRBAUj2QHLYn6ApyRJ/qnoiNrZNHREe9UjLOB5rGpaIvBhxl49MojKf6UlkJCpr204RoihJAPWZDiBKi1JthpS3icVixerwpE5XoMaZxrgd4j0JE+IsaOozHMBYDCYoMaYzZRyylCjABlpgLUKzLgXHfBHbGZXgYeioROiCRZoKXzhHRHmiNmrcuNi81mpsbsNaCNTi/udG6VF/K7wpMq3G+CY1mqS+jLC1UaRRFObYJ/19go+OSJyPQPaagbWFVFGh+xkdANWW8C4pSDu2xsXimMt/faJ0oq3nxhOrfWzduPGWZRsTnxdMCDkWlx4k5vuLmrk9kl/EAanbqUhLHWJgTJyH3zVg44IjFGkdvuVZ7wUJ7lHV72irUsGdVMVMYaBxAV7LYarokRYSkfSuRBEfCiwTOKEdLpYnULk7IXXUuVFvImMoAOG6ONWyT6HLXvlSAE9Wjkhk7swCJQBz6jWg7GThwB/17in1AsQr/bBE7GkhlsKlgGF4eq9Z/rcClQjHzWgFONDaNDY1TzNDlFwSkg9bFbueFhBW7//PGpK1Egrtp1YwrijDX4lkt2Amb/qjHcqBIScQ0NtBBtSS8cJhfYaorChLGKTE1zLUu6IkhNm0+wZk7f8WBkQ3y569UK/MEZijvOc+DkB/d3c3u//nw7m7JVuYesp2rh/d//+fBJ4cHP0yv/zrdu3d4sJt9/HV27dbR1b9C/uj250f7Pz/85iMwIw+oy+7cnl7/O9v5Ptv5KfviWrbzY/bLHyF3yzCPym7uo6/DgyvTz76c3ryS7f2WfXjPmT769tPszleFab6rMN3/LnuwB55nxrukt8fRbypFapk3Nw1gXYiEEm759Wn40Tw2wbbLGUma66C4nwuRH6o5XwT4jtjACRrWTdXnMKT7cwta+ipcuQ4VcOCkTxe0x82ftOl+mXvelFNG3M/5LeeFLW+28mo4esxurZZbY/WjnBHO1Nz4min1SprwV0p0QjXOqKfMeLr1qy2vnn193leH9FmCk/uuaAstquCRNE2op8YKa6zC2pByhqy8jjEuXyBRy+rfRssqtGhXUNhs2C8iwDs0GVLNIoJWkpGkitzOlaeQRDqnLOTzq+3lDjErcwrFlMRhqC1nD3jVlWcamc/4sW4vcIIWyIy5CX77XZNKuWTSTkK3XFfw4I2k4VPze4JdLRP4xYbM0agnScwGuARnUuNpkQQm/wFjNTqv) 嘗試模仿quasar拼裝不同呃component 第6課 ── 學習用外部狀態管理 vue 元件 [作業](https://play.vuejs.org/#eNrtVktvFEcQ/ivFhshrsi+bWEo2hgBOohwgQiBx2gO9M727HWamx909axtrTwQFsBUOIRA45KEQHkJAFEUBYkj+jGdtn/gLqX7M7KyxwcohyiF7mO2u/rq6q+qrql4uHY3jWj+hpWZpVnqCxepwK2JhzIWCE0vHEqV4BB3BQ2iVavVMone0Sh8UkB8xEvBuEWklObIV0UWD9WmHJIGC5VYE4HFUENFIySYsw/wxFTXzYyswb3VokdM/qOhdPlGkPGk1AAiqEhHhdhJQoZrQIYGkFVQddZgI3RwGeAdw+0OqetzXR1oNZuPU9MGRTicro3DSbMy22u8CUV4Pt9uZNiJR1M8FIU8inGt1WqCPnq3n3sWJomEcEEVxBjA7X20rlOpDAtKmwaFW6ag+vVWyQo8HXKCwHRDvXCZUdFFVs5WFHlPoZrvSlOw8ReFUJhB4Hd8Oj8REoLertI9fxBgr4RDsMwO74fBs3dwou5xvXd+vhtw3l3NYs44In/XdEOA4FzQEFsskBF9fDiRTQNDhOh6SekoHC4jPYiaZx6Iu0ICpGpyiArcIGtMgoJGfyEyj3t/nQRIr9Fc2kqANYKgVKSV4th0dFPlMMSYhpqJD0VQfx4orEprA6B8lQBTwMMKVPg0gSsL5hIRAF6nwGJ7CkJAhkERVICIqkRAy5Dmp2LN0iNDImjO+PrK+GMdRJOeOc5mHZpdYvi6aO8RzLKJ7i6n+dQJO9Lpg3V4uHg82jm20dyXmnM2qf4GaLn+1IW64R3rm6P8J+t8k6G6R/Qckna0XSilOpVoK9PCALeQhEV2GLaVhanhMfB8DaqeDVtTm/pLFLTBfYT2fajTeNsge1ccbgez3jKiN7ugas6wbmvDWND3oHaRWF9Z3d3SpUio2v7HGulMLjAWPTfcz/D1DgoQ24RjnASWRaTdvah8YYPACIqV1rSIsoqJVwoxgHRSN1I5lRL5F9ojPF3BtjCpFxAKLECE1RAZcIdD9ZfhstFs0avm1nMkckwZZ3ATSlpgwSjsRgGH+odNtsDAvUNNSE7qC+TZ8yEiKzsfWGiHMwy8V1vujA5pt2kH2Z68Lh0Ui6TfI3k5+NdKi2y5PvT9dgemp9/Az494EPCaYj3jFRm3GCDoswCs1oW3YG1Epy7hkweer6EW6mJOv5rzqPJJRcwrL025863Q6Zikki1XH2JlGI160eC58KqoCK1eCdHrXifNjp7Ydexi250htxp79KptHjz7N5n3VKmw+WFl/8dfGtXvpo2+H159t3PoivXhhfe33zft3Nr66nz75Ob345OXzW2cSCqc/mYOTGElrjOZFTylkfL0uO57W+bmscdGt6xVNPVSdrv2x8WAlfwhqEFj9L5+vrj+9M7z2eHj1t/WnK+mlG+mV7zcvvCh0I8BpevuHzXsP00e3Ni+sDm8+3vrx6ublX7c3pzHg8PqX6cMbRaCpjztg0ot300fPLEYXvnHI6uWtS9+kt++mv1wtdDgY3vspfe4kEqs5MrQoOuIFzDs3pmlr7bvh11fSP1fRt+tra+nKTahWdY7tqZgU/NGE00ogt1x/0fbP7SA35m6TafOa8FkStqlwIlOft8GMiXnNyvYaK7dL+3MBdpuTMY+TeHxtL5WubejgbHPFKXQkyXqFdSUu7KchU+UJ23s+1q1nomKtnBw9RzTLEZu/+kdZhwVGeynvys6XufvyBZt4p1zenSCqV8PaUi7bwH+IKQqYXJNQhbKLPMqMaBLegYl4cSJXFWAF+9S1nrMeCbzy/mUdgwHmqk3PybM5uIPF7bQJ0Bj0gCkhBVxeWt6o0VqyE7BhkIAVk/n6EeOdK9zDMsL8OeHAvdTsbHnZ5dIAK4tuFjaMr+sXWVAtkYtBifDtU6h3BYGXCKkjFHPmGgOSXZAoK/gSraIw3WiE+Dgj0vXt/Khmj/ez/mSgWDJrrmgWyuHgb/u4VhA=) 稍微翻了quasar的原始碼,還是搞不懂為何上一個v-close-popup的attribute就可以讓按鈕有關掉modal的功能 很神奇 第7課 ── 學習開發狀態複雜的 vue 元件 [作業](https://play.vuejs.org/#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) 研究了前輩的作業才發向若要讓input的值可以被檢查就不能限定number,要不然輸入非number會直接show出來,卡這個很久... 因為想學quasar的樣式(range條的顏色變化等)做了些研究,後來嘗試把所有想法塞進去,結果做出來是蠻炫的但不是很好看... 心得:覺得老師的出題方向就是幫助學生從業界的需求去學習,然後一點一點從小地方開始做,並且能夠自行研究,而且不強調怎麼寫,而是確實做出來,很務實的取向,覺得獲益良多,上完9堂課默默繳了不貴的學費,有新的課堂會再回來做。 目前正嘗試自行開發一個網頁應用,寫cdoe真的要很有耐心,其實想想現在有很多輔助/查詢工具真的很方便,越寫越佩服那些做框架的人...
有幾位同學已經寫完系列一~九的全部作業了 整體能力已經可以準備開始面試前端工程師的職缺了 這邊寫一篇簡單說明 # 需要補充的技能 前端技能中最困難的部份已經有相當基礎了 剩下有些東西沒那麼難,但要學一下,上班會用到 這些東西我未來可能會寫教材,但我最近很忙,近期無法寫新教材 ## git 程式碼版本管理工具,找書或者上網找文章學一下,至少要會 add commit push pull 這些指令 ## npm 作業都是用線上環境,實際開發都是在本機為主,需要知道 javascript 套件管理工具 npm 怎麼用 ## create-vue https://github.com/vuejs/create-vue 要能在本機架起來 vue 開發環境,這款至少要知道一下 ## vue 3 教材安排是學 vue 2,但現在很多公司都已經轉用 vue 3 語法了 背景知識大同小異,但語法差異不少,要知道一下怎麼轉成 vue 3 寫法 --- 老樣子,學的時候有點一知半解沒關係,大概會用就好,畢竟是面試 junior developer 的職缺,公司通常會有工程師同事,技術長&他們會協助你實務上的細節 # 投履歷的公司篩選 在找工作的時候,投那種「無經驗可」的職缺 很多公司會寫「一年以上工作經驗」,這種就是不歡迎半路出家剛學完者 因為很多人從補習班畢業之後,連 hello world 都寫不出來,公司想要避免遇到這種人 就先投「無經驗可」的職缺就好 公司類型基本上有分「接案公司」、「做自己公司產品」兩種 第一份工作沒差,去接案公司練功、去做自家產品慢慢打磨產品,都可以,待個半年,先進入業界再說,都可以學到很多 長期來講,我之後再寫文章說明差異 # 履歷表的寫法 基本上你照自己習慣寫,簡潔有力即可,這行業基本上是實力主義,唬爛幫助不大 但有幾個東西務必要寫進去 ``` 學習的過程中,為了瞭解網頁的基礎,而不只是當個框架的使用者,我有用純 html/javascript 練習多個元件 [附上第三課全部作業] 並且有找一些看起來很紅的業界套件,練習導入使用 [附上第四課全部作業] 然後我有用 vue 寫了多個應用程式練習 [附上第八課全部作業] 還有試著拿 vue 生態系的元件庫做範例,模仿做了幾個元件 [附上第九課全部作業] ``` 我認為履歷表附上這些東西,會讓99%的面試官印象深刻,覺得你幾乎是「即戰力」,對你更有信心 # 結語 以上,如果你寫完系列一~九全部內容了,那我認為你離上班已經很接近了 如果正在準備轉職,準備一下,試著投一些履歷試試看,試試水溫 不用急著辭職,因為今年全球景氣充滿不確定性,但就試試看能收到多少面試邀請,等於秤秤自己的斤兩,比較有個底 順利上班之後記得來寫文章分享心得 然後最好養成習慣寫技術部落格,直接在這邊寫即可 求職過程有疑問,一樣多多來這邊發問即可 求職卡關、面試不順、薪資待遇有疑慮、業界實務有困惑,都上來發問即可 我會視情況公開 or 私下回答 以上,有打算轉職的同學,祝大家早日上班囉~
恭喜你完成了一系列酷炫的元件 Quasar 是業界最頂尖、好用的 UI 元件包之一 你在這系列作業中,也順便學習了此元件包的用法,這在實務上非常有幫助 你甚至親手製作了其中一些基本的元件,讓你大致了解元件包背後的製作原理 像這些最基礎的 UI 元件,因為通用性很高、很常被重複用到、在多個地方到處使用,所以很適合製作成元件 --- 但是,在實務上,通常開發一個頁面,就製作一個 vue 檔案即可。除了基礎 UI 元件之外,並不會額外製作多少元件 因為頁面上很多看起來像元件的東西,其實就算拆出來,別的頁面也用不到、或根本無法使用 這種情況,其實也不用刻意要拆成元件,因為意義不大,說不定還會變更亂。切記:不需要為了元件化而元件化 當你發現頁面真的有點太複雜、你明顯感受到拆成多個元件會比較好維護的時候,再拆成元件就可以了 --- 翻閱 Vue 官方文件,你會發現 `Components In-Depth` 這個段落,你幾乎通通讀完了 有些我認為非必要、沒那麼常用的段落,就沒有指定讓你閱讀。你如果好奇的話,就自行把官網剩下的頁面翻一翻吧 必要的元件觀念,你都已經知道了,這些已足夠讓你參與團隊合作、與團隊一起開發應用程式了 但是在真正大型的專案,還需要引入一些進階觀念、生態系工具 這些會在後續的課程提到! --- 消化、研究完本課程之後,我認為你已經具備入行前端工程師的基礎能力了! 急著上班、找工作的同學,請參考我寫的文章: **給寫完 JavaScript 系列九的同學們:求職前的準備&簡易指南** https://codelove.tw/@howtomakeaturn/post/k31dYx 再次恭喜你順利完成本系列轉職前端課程,祝你求職順利! 有問題可以多多上來發問!
## 課程目標 - 學習開發狀態複雜的 vue 元件 ## 課程內容 前面的課程中,元件的狀態很單純,數量也很少 但是有些元件,雖然對外溝通的狀態很少 但是在元件內部,其實需要維持額外的多個狀態,才能使用 比方說「顏色選擇器」類型的元件:雖然對外就一個代表色碼的字串而已,但在內部需要不少狀態來維持 ## 課後作業 這一課作業,請先看一下 Color Picker 元件的用法 https://quasar.dev/vue-components/color-picker --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyColor.vue` 元件,並支援下列功能 - `v-model` 能夠設定色碼、取得色碼,格式支援 HEX 即可,例如:經典藍 `#34568b` - 不用支援各種花俏的顏色選擇面板,就做 RGB 三捲軸就好了:使用 `<input type="range">` 製作三個可以拉動的捲軸,分別代表紅色、綠色、藍色的比例 - 請自行搜尋 `hex to rgb javascript` `rgb to hex javascript` 研究 hex 色碼與 rgb 色碼如何轉換 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習用外部狀態管理 vue 元件 ## 課程內容 前面的課程中,元件的狀態很單純,都是匯入之後直接使用 但是有些元件匯入之後,一開始在畫面上是不顯示的 比方說視窗類型的元件:這種元件需要額外有一個狀態,來管理它是否顯示 ## 課後作業 這一課作業,請先看一下 Dialog 視窗元件的用法 https://quasar.dev/vue-components/dialog --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyDialog.vue` 元件,並支援下列功能 - `v-model` 能夠管理視窗是否顯示 - `預設的 slot` 能夠放入視窗內容 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習 vue 的 slots ## 課程內容 來學一下 slots 的用法 - https://vuejs.org/guide/components/slots.html ## 課後作業 這一課作業,請先看一下 Banner 公告元件的用法 https://quasar.dev/vue-components/banner --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyBanner.vue` 元件,並支援下列功能 - `預設的 slot` 能夠放入公告內容 - `action slot` 能夠在下一排最右側放入額外內容 - `rounded` 樣式 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習 vue 的 v-model ## 課程內容 來學一下 v-model 的用法 - https://vuejs.org/guide/components/v-model.html 老話一句,不要把這功能想得太神奇 這只是一種 props + events 的縮寫而已 功能完全一樣,只是讓元件更方便使用而已 如果真的很不喜歡,實務上完全不用,其實也不會怎樣 ## 課後作業 這一課作業,請先看一下 Input 輸入元件的用法 https://quasar.dev/vue-components/input --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyInput.vue` 元件,並支援下列功能 - `v-model` 能夠設定值、取得值 - `label` 能夠設定欄位名稱(可以不用像 Quasar 動畫那樣華麗,就簡單顯示在旁邊即可) - `filled` 樣式 - `outlined` 樣式 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習 vue 的 events ## 課程內容 來學一下怎麼替元件設計事件 - https://vuejs.org/guide/components/events.html ## 課後作業 這一課作業,請先看一下 Button 按鈕元件的用法 https://quasar.dev/vue-components/button --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyButton.vue` 元件,並支援下列功能 - `color` 能夠設定背景顏色 - `text-color` 能夠設定文字顏色 - `label` 能夠設定文字內容 - `size` 能夠設定按鈕大小 - `round` 樣式 - `square` 樣式 - `@click` 能夠設定點擊後的任務 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習 vue 的 props ## 課程內容 來學一下怎麼傳參數到元件裡面 - https://vuejs.org/guide/components/props.html 順帶一提,在實務中,我個人是從來不寫 Prop Validation 的 我不去寫 Runtime Type Checks 那些,因為我覺得很麻煩、很花時間 當然,在很多人眼裡,我這種習慣很糟糕 我有我的理由,不過嚴重超出本課程度,未來有機會再談吧 ## 課後作業 在第二課~第七課的作業,我們要研習一款叫做 Quasar Framework 的工具 這是一個極度強大的 vue 元件工具,功能非常豐富、好用 我們每一課的作業,都要試著親自做出類似 Quasar 中的元件 (沒辦法做到像 Quasar 那麼強大,我們只要實作部分功能就好) 這一課作業,請先看一下 Badge 徽章元件的用法 https://quasar.dev/vue-components/badge --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyBadge.vue` 元件,並支援下列功能 - `color` 能夠設定背景顏色 - `text-color` 能夠設定文字顏色 - `label` 能夠設定文字內容 - `rounded` 樣式 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 能夠運行 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` 之中匯入以上元件 做出以上功能,你就完成這次的課程目標了!
歡迎來到 Vue 系列的第三份課程 在這次的系列課程中,我們要開始學習大名鼎鼎的「元件」觀念了 在之前的課程中,雖然我們成功做出了多個好用的應用程式 但在實務上,更大型的應用程式,需要將一些部分寫成「可以重複使用」的元件,團隊合作才方便 軟體圈有一句名言是這樣說的:「要寫出大型應用程式的訣竅,就是不要寫大型程式。寫出很多個小的程式,然後組合起來使用。」 聽起來很酷吧?寫元件的確還滿酷的! --- 有件事我需要再次強調 Vue 框架中,同樣一個問題,有很多種解決方法 甚至同一種解決方法,又有很多種寫法、語法可以使用 所以你在讀文件、在各種論壇看大家範例程式碼的時候,鐵定會有一種困惑:怎麼跟我的寫法不一樣? 我要再次強調:這些通通都不重要!能解決問題就好! 就像拿到一個超大盒工具箱,附贈有一本厚厚的說明書 你完全不需要把整本工具書讀熟、箱內的所有工具都摸熟 你只要視情況隨便拿幾個你會用、覺得好用的工具就可以了 有些工具就讓它永遠待在箱子內就好,不要勉強自己去使用它們 --- 話不多說,讓我們馬上開始來寫 Vue 元件吧!
經營這網站主要是想做新手友善論壇 本想隨手寫2-3份入門教材,簡單給新手一些方向 結果居然寫了8份,而且我發現後面還有滿多要教的東西 所以我打算把自學教材改成「付費教材」,我乾脆長期研發新教材好了 - JavaScript 系列前兩課免費 - 每個系列售價$199 - 現有會員不受影響(今天之前註冊的會員,所有教材維持免費) 以上規劃跟大家分享,希望中長期來說,可以變成最優質、最便宜的前端系列教材 然後就可以跟討論區功能相輔相成,讓新手有個持續進修的好地方
https://replit.com/@evon5995/GigaDeadPort#index.html 點擊離開,把用戶跳轉到 google 首頁 點擊確認,就關閉蓋板警告 以上兩功能都完成了 但是“按過確認,重新整理之後,蓋板警告就不會再跳出來”此功能怎麼都無法完成 ![](https://i.imgur.com/KC3I1lQ.png) js的錯誤不知道如何解決
恭喜你完成了一系列的專案開發挑戰 放眼市面上的新手教材,應該沒人會把作業設定到這麼困難! 但我認為時機差不多了,所以要求一些有挑戰性、有趣的專案來讓你做,應該難不倒你 而且這種只用基本功能,就完成複雜專案的經驗,有助於掌握框架的本質、熟練框架基礎 既然你通通順利完成了,代表你的學習狀況「相當不錯」...... 再次跟你說聲恭喜! --- 這些專案內容,已經相當接近實務上、職場上會遇到的開發需求 也就是說,你的開發經驗已經「大大提升」了不少 事實上,光是目前的技能與經驗,已經可以應付職場上絕大多數的功能要求 你已經離「進入職場工作」,又大大靠近了一步! 但是呢,要能夠與團隊共同開發中大型專案,還是需要學習框架進階觀念、生態系、以及 JavaScript 生態系各種工具 坊間補習班,通常會在課程很早期開始教上述這些內容。我認為這會令學習者非常眼花撩亂 所以我讓你僅僅學完 `Essentials` 的內容,就立刻動手開發複雜、好玩的應用程式 我認為這樣才能清楚認識框架的強大,以及知道「工具不是導入越多、搞得越複雜就越好」 而是要視情況,只導入必要的、大小適宜的技術工具,這樣才能收放自如 那麼更大型的專案,又該引入哪些進階觀念、生態系工具呢? 這些會在後續的課程提到! --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(九)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/QxMYx5
## 課程目標 - 能夠寫出國家資訊與地圖應用程式 ## 課程內容 開發應用程式時,經常需要把多種 API 組合起來使用! 如果各種 API 有提供 Vue 包裝的元件版本,通常會容易許多 如果沒有,那就自己想辦法管理好狀態,在 Vue 裡面使用,通常也沒問題 --- 這一課來寫各國資訊查詢 使用這服務來取得各國資料 https://restcountries.com/ 內含每個國家「中心點」的經緯度 --- 接著要用地圖套件 Leaflet https://leafletjs.com/ 底層圖資,使用 OpenStreetMap https://www.openstreetmap.org/ ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 顯示世界地圖,上面有上百個代表國家的大頭針(marker),放在國家「中心點」的經緯度 - 點擊大頭針,會跳出一個視窗,視窗內含以下資訊: - 國旗圖案 - 國家名稱 - 首都名稱 - 貨幣符號 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 能夠寫出天氣查詢應用程式 ## 課程內容 開發應用程式時,經常需要上網找一些資料 API 比如搜尋 `台灣氣象資料 api` 會找到中央氣象局開發的 API 服務 https://opendata.cwb.gov.tw/index 想使用這些 API,通常就把官網說明文件看一看,試一試即可 如果不順利,就上網找找看有沒有人寫過 API 串接教學,照做即可 為了避免 API 服務被濫用、過度呼叫,通常 API 需要註冊之後,取得金鑰(key)才能呼叫 如何使用金鑰驗證?通常是在發出 api call 的時候,在 http request header 裡面附上 API key 也有可能就直接在呼叫的 url 附上,或者在 http post 內用 form data 附上 各種 API 驗證方式不同,取決於 API 提供者的主觀偏好 多找找範例、說明文件,多多嘗試即可 --- 這一課來寫天氣查詢應用程式 關鍵字 `weather app ui` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 頁面上有一個「縣市」選單,可選擇要查詢的縣市 - 選擇縣市之後,在畫面上顯示此縣市當下的這些資訊: - 天氣現象 - 最高溫度 - 最低溫度 - 降雨機率 做出以上功能,你就完成這次的課程目標了!
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!