站長收到學員來信詢問，寫篇文章簡單回答如下 --- 在你翻閱「自學網頁の嬰兒教材：JavaScript」教學系列時，應該會發現七、八、九的內容，好像都在用舊版語法？ 為什麼站長的教材，看起來是教 Vue 2，不是教 Vue 3？ 學過時的東西，不是浪費時間嗎？為什麼不教大家最新的東西？ 別擔心，這是站長故意設計的，簡單說明如下： ## 不是 Vue 2 跟 Vue 3 的差別，是 Options API 跟 Composition API 的差別 舊版的語法，現在稱之為 Options API 新版的語法，現在稱之為 Composition API 這兩種寫法都會在 Vue 3 被支援！不用擔心！ 課程內容的範例程式碼，導入的版本也都是 Vue 3 ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> ``` 你不會學到過氣的東西，別擔心！ ## 但是 Options API 就是舊版寫法呀，早晚會被 Vue 核心團隊拋棄吧？那不就無法用了？ 這不是事實！Options API 不會被拋棄，會繼續支援下去： https://stackoverflow.com/questions/68611657/ 官方問答，甚至跟你說小型專案，很適合繼續用 Options API： > Will Options API be deprecated? > No, we do not have any plan to do so. Options API is an integral part of Vue and the reason many developers love it. We also realize that many of the benefits of Composition API only manifest in larger-scale projects, and Options API remains a solid choice for many low-to-medium-complexity scenarios. ## 可是站長為什麼不教 Composition API 就好？為什麼要教 Options API？ 主要原因有三個 第一，Options API 簡單很多！非常容易吸收！ 而且跟站長前面設計的 JS 系列教材，銜接比較順利！ 學完一～六的同學，讀 Options API 教材的內容時，一定會覺得很簡單 如果直接教 Composition API，我認為你會學得比較吃力 第二，實務工作上，我認為你很可能會需要接觸一些比較舊的專案，都還是用 Options API 寫的 所以身為 Vue 工程師，兩種 API 寫法你都要會才行 第三，寫過 Options API 之後，你再去學 Composition API 會非常容易，幾乎就是改語法、換順序而已 但你如果先學 Composition API，我認為很多細節，你會覺得很「黑箱」，有一種不安全感 ## 可是站長完全不教 Composition API，我要怎麼上班？工作上都用新語法呀？ 的確，課程沒有提到 Composition API，但我認為你學過 Options API 之後，自己翻官網、改寫成 Composition API 會很容易 所以我的確完全不教 Composition API，就交給你自己自學啦！ 不過，你如果真的完全不想學 Options API，那在 Vue 官網，把左上角的 API 語法設定成 Composition API 即可 本課程內容依然可以進行，你就通通用 Composition API 寫作業即可 或者，你就把作業通通寫兩次，第一次用 Options API，第二次用 Composition API 即可 以上，簡單說明，不用擔心學 Options API 浪費時間！ 剛好相反！我認為先學 Options API 對於你的基本功會更有幫助！
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/ ---
自學網頁の嬰兒教材：第2課 ── CSS 輕入門: https://jsfiddle.net/applelily/4kuo01L6/ --- 自學網頁の嬰兒教材：第3課 ── 網頁排版: https://jsfiddle.net/applelily/xcr3jzfe/3/ --- 自學網頁の嬰兒教材：第4課 ── 好用的表格: https://jsfiddle.net/applelily/m10zqh76/8/ --- 自學網頁の嬰兒教材：第5課 ── 用力送出表單: https://jsfiddle.net/applelily/v3ju1Lbr/73/ --- 自學網頁の嬰兒教材：第6課 ── 在自己電腦上寫網頁: https://jsfiddle.net/applelily/23gu1qzb/2/ --- 自學網頁の嬰兒教材：第7課 ── 大感動！我也有個人網頁了！: https://jsfiddle.net/applelily/7r4s0gLo/1/ ---
第1課 ── HTML 輕入門作業分享 https://jsfiddle.net/qgm06yux/1/ 四處翻人家作業也學到一些 https://jsfiddle.net/p9wkgjf0/ 試著打熟一點，不過置中不太懂為什麼沒作用
第1課 ── 基本的函數操作、onclick 事件 https://jsfiddle.net/s1k6z280/57/ 第2課 ── 基本的變數操作、從 html 取得內容 https://jsfiddle.net/d6r4gbfp/1/ 第3課 ── 修改 html 的內容 https://jsfiddle.net/68eytsu5/5/ 第4課 ── 基本的陣列操作 https://jsfiddle.net/6mczqLeu/3/ 第5課 ── 基本的 if/else 條件流程控制 https://jsfiddle.net/n9h2mcuv/1/ 第6課 ── 認識資料型態與轉換 https://jsfiddle.net/hnxus0ym/5/ 第7課 ── 認識巢狀結構 https://jsfiddle.net/2m4g0v9t/3/
第1課 ── 碼表應用程式 https://replit.com/@superyngo1/vue3timer 第一次獨立開發，css苦手，看前輩做的這麼漂亮就練習了一個文字背景漸變 第2課 ── 筆記應用程式 https://replit.com/@superyngo1/vue3notebook 看到學長的範例就練習建置vue的sfc和typescript 花了一些心思設定筆記的選取順序和刪除變換 css苦手 第3課 ── 分帳應用程式 https://replit.com/@superyngo1/vue3billsplitter?v=1 被typescrtpt的型別檢查搞得很苦 看了一些youtube教學css比較會排版面了 規格要求外新增了待付的選項 第4課 ── 行事曆應用程式 https://replit.com/@superyngo1/vue3calendar 漸漸掌握vue的資料框架 看前輩用很多vue標籤覺得厲害 仍對typescrtpt頭痛 第5課 ── 體重追蹤應用程式 https://replit.com/@superyngo1/Weight-Tracker-Chart 放棄建置(以及typescript)回到用cdn導入vue 寫的愉快 感謝學長拆雷 第6課 ── 天氣查詢應用程式 https://replit.com/@superyngo1/vue3weathercheck 第一次導入api 還算輕鬆 看到學長寫法用v-show去控制顯示資料原來還可以這樣 第7課 ── 國家資訊與地圖應用程式 https://replit.com/@superyngo1/vue3-World-Map-with-Country-info 原本以為只要資料串好 格式設定好應該很簡單 結果卡在一堆低級錯誤(for loop格式寫錯等) 還糾結為何flag顯示不出來圖案(看學長的可以) 最後才發現原來是瀏覽器的問題 心累
[第1課 ── 學習 Vue 元件基本觀念](https://play.vuejs.org/#eNp1kMsKAjEMRX8ldqOCWNxKEdyILvyD2RQngwP2Qc2IIPPvNm1nfKBQSm56btLkIbbeL28dirVQ11NoPW0q2xrvAsEedY0BmuAMTJcyS4anI3LUrR0BFp/PO+forUKWBQGoLN4TVmOjuwvBg7MnF70WLV3XOQHlI4ssuEsJcz2O+5SpNenZfHAFpC7YQXE7vvuEVzYeJceJoyA0/qIJowJQZXaZVRqzxGUmVkqOJrEQr/3wMj/LnVebA2gD58RMlIyJb/+wvv9uE4nf3tdm/7ubxPzy90/ta6nn) [第2課 ── 學習 Vue 的 props 觀念](https://play.vuejs.org/#eNqNkcGO0zAQhl9l5D0URNOWBVbUhJVYEDdOXHNx60mISGzLcVBLlHdnMolDutWuNoqizD+emW9+d+KLc5s/LQop0uboSxfuM1PWzvoAP84PShcIubc1rDbbKR6OrzIDkBk88UGNuWqrAN2gHi1VGzShkaMAsdF6iHr+ahXUq9cx7zG03sSI+g7fnk9nht50O6NRELB2lQpIEUBan5MDU1bqgNXnTNy8/7a/+36bCSKprF8q9+k2Hn+ieFlmvTIFkhDwFL7GXrvd7iWN9vv9m0Uvj5oib1ujUV9Wp9t5IbEWC48vriQjiGuvAZy37r/Rg/s0UMLP4EtTsNXDM29wlWHeK3UClfBgbYWKXF/eyHPX0ThlQB4r1TS0djc3mn56ckE24VzhkIXVQR1/F5xLmHwlxw3WcZGZnAYLHgHQdUzdMw/B0MhLH5mLp3AFM0W/lNa0qYRbd4I7d/o0yrXyRWkSXxa/goS3uzlxsF6jT7zSZUs+v5sTuTUhacq/KOHjLE7QN3mes8KEm2n3iPCo5Yc4bHR2pA6i/wcEYzAB) [第3課 ── 學習 Vue 的 events 觀念](https://play.vuejs.org/#eNqVVM1u00AQfpWVAblV4yRQUVETqlKuLZdcItU9OPE6sWrvmvW6TYkiIXEAVUgcQEUViB+BxAnEEQSvk6g98QrM7tpru04RRHE2++3MtzPfzHhi3I3j5kGKDdvoJAMWxHzDIUEUU8bRztFWyjklyGc0QmazlQPCwXQIQg7BY2nqYd9NQ44mAh1Q8CeY8MRWANJUDbGdyl/P5e7Scm7AME8ZyXcIJcFDDO67Zq9rNkzx7MCzDU9v29yTBOJDbHR9LdtNJbdD4Ntp6Vxgw3EUhy7HsEOoEx1ZfZVW6PZxeMcxfHeA+5TuOwaEHlIG0JXV9VuutwYIx2N+L0d933eMjU5LcyjKPruMOnmQugyXiClzyVAAFd52uw2QMv4X+gPLl45CJUR9pRYw2PpeAMRerHpbZx5dGvhKWQwVXl0JxGhKPLTpet59AMkKeNUvqZNb/0MeBSRNJL0FfnX6GLLkR6FIc+JTwruQq40IWkFmPDan4KLa4/zn2/mL49nx+7PTd/OnJ/Pvr+HP71/Pzh+dnn38MD95Mvvyav7m8fzlj7Ovx7NPn2ffnkv+VgwEnZZuIqNhlOegMjgOpFGfB4RiRuNiGBwuhbBRl7OADHUzS0lqqFamdqL6xUZblIbYVbOVz07NWKp50VZNIkIR5iPqFRFCLGEw2C/GUwYyCpLmVRwFfMkUFTeXNXn1UFXMXM5P5WAW8/m34cwapaio2XcH+0MZvCX1MW2lUyOXS+sDpS7iQcgehG6SAMfuJBdKrY1cC7lMG0KuvarvpkwffOWqW2gyUS2MplN49Yne0I1YahCZlkxAumUpZUL2KfMwRE3gBXk7aw4QEyoFb7J2PM6wQcoSkVxMA8Ixy1DlbDHXC1Io1k1tHrlsGBCrT+GqCIhqJywYjnjhIUvRVHJUI9Pk7ZKhmkRl5/DDwOMjG60W0Y6woi9BYUCwleOKCyExntZhBq63c/hiWu1rpbt73TxA6a16WyulbBaaVHPdWWByo8qyvcikytJbZKOzVr0tC29M/wBn121P) [第4課 ── 學習 Vue 的 v-model 觀念](https://play.vuejs.org/#eNqNVF1v0zAU/StX2VA3qWm7jSIIYQLeeOAJiRfCg5s4m4VjG8cJ66ry27n+ysc6TSxra1/fc33OuY4PySelVn1HkyzJ21IzZW4LwRoltYGv+y9CdQZqLRtYrNZhbtMXhQAoBH1wiRWtSccNHGy0lIgWVJg28wGIhZZ2dnTfFTHk4jKua2o6LeIMwNAHk4HoOHfJCHLIQuB/vh5o4sTQRnFiKM4A8mafMse4TxtZUf6hSGypIgFOdm5aM85phQE/AFZh0GHSqyK5zdexxP8WlJ3hTLiScTgtev20aL4eKCfLZOLorAEF7nLqLIDSUo22AjhS3wnvaAbfjGbiLhgGnuBJ1MvO4LOUnBIxxCP30xWGsVkR30Bk2DDb4h+LTmE3aTZyWfwM7XqpVxXr3QCH3uLM22adNHtFR6s1/d0xjRYHRviXlZy0LaYcoiD/u5wIiaNjkUyRvWWIyJEubjFJ+OjYYMK5FXjxjLolnNMez/fKEH1HsXk2eomN9r7kznnIaqmDnls4HHw/4HjM127kTVh7FyaHwjnVmj33NuH60HvZMsOkyNAQTGU9fe8XGqTBMLzdqAfYuKB7X7ytAf2HVebe5rwKKEWqCpuawbWFXeFXWKilMGnLHvFIXb0J0bEeyiq7Fv56PcsQRAtYFYNhRyNVBunr7bSE/XgjTkSRXSt5Z6Ioh/ZiEEJrvA8mHEfy14NmxGgiYjnEw2Z104alstOt1BjGIxWzcZg6CHaqyaAkihnU8egpOL6rcE0EtjtS/rrTshNVWkpu651RGhnvpK4ohgRefrNQupPGSNzhBrmiSHTKbauIxlMUUsNpncGnep5ujeK2XtyUaHYve6pfoFu9tc8pznc14ua0rcWe9tlms63LcgIf7rwZFHs1YsrKPs9JcrlPhQwv8FzKad13G/tEJF417qVJjv8AFoE/Hg==) [第5課 ── 學習 Vue 的 slots 觀念](https://play.vuejs.org/#eNrNlE1vnDAQhv/KiBySSAHStLlQulJzb3uJVFXiYmBg3YJt2cM229X+9w7GsB/aNtdIKxaP3xnPeJ5hF302JtkMGGVR7iorDa0KVZDsjbYEX7ZPQim00Fjdw3WSzobR5bpQAIXCFy+tsRFDR7AbrZVmf4WKXDYZYAl1Ny73/lkLEje3s8AiDVb51WTYe2Wh+Jenh9xUTtibThDyCiDvt3E5JVl1wrlPRRSWZRu3VmyLyOsAfugB1mKD0GlHnCKLKpJaAWmgNYJUhFYhJfC8lg6EMcB/umk6qTCZYixnw5XwziE2wPOY/Lev8F02MmjT00TTJVO/fjV5i3URgdWDqrF+izWcbPLS0babdEmoIrTWiLqWqs3g4d68fJxsvbCtVHGpiXSfwbvDTi0dB91m0HQ4234OjmSzjbliYqwycEZUGJdIvxFVEIlOtiqWnBRjV7EMbdipdKdtBldN03iLRysJgMxZlqL61frr5mO8ftw91XNP/i3nzVnNwPrLiO6i45E5m7JLo8O3ZbU5zA0PxkRABk9adyiUn515hl4ZjlpuIJvR2i2Rwst+mY3crHLXaUpXeWpmWzlwb2Y6CvICUKJHjjWRw/58OptXE88jIUdeecrn/xcUM5c54ZDBfehYw42OnfyDjMaHgIbvwhR+dqsG68arN9qTH5wX3o6oKrWtkZWKv0snptiKWg584Y+L9hyXS80mKxRDaBmzoOF2UuzNjbaM9GAM2kq4+bhLJbHX6CDHy8wY4A7uk/fuvNpsrTeHaboAXluKm4fHxzs4PDjO7RynoCR0fIlxufRjcvd/AZMZBoM=) [第6課 ── 學習用外部狀態管理 vue 元件](https://play.vuejs.org/#eNrtVUtvGzcQ/isDpYAdQCs7dYMCW0VogB56aC499BL1QO3OSqz5KjkrSwn83zPkch+SpSQ/IIKw4Azn/fj4efbeucW+xVk5W4bKS0ertZHaWU/w4fiHFMpuofFWw83irmdEhZu1AVgbPCTRGhvRKoLPkVtZ1jdoKJQdAwZT80g+p28tSNy+7gU8UutNTwGEnX16r9DTB1sLVUIjVMCk19/+iUrZC7fPycXa8H95N6TEBKF2ShAyBbDctETWwO+VktXju/Xs1CG8A/ItrmerxFvedeLXVcdoRtXEO1FN6vpY1F1d94W2NaoX3lk3SdMQM7wiSQr7aE5SYZOjWGUNceVXf1mPGqQLrYbaKushSAKhkbg9JmBFseAgaulkkJU0W0AlaQF/o2cVj46DR1O3ISnurWodRQ/5FAD3aCSb4/572+ttlDC1JCkDOPQNejbBZ7Ik9BxQgCCw2jBrjwpMq/9vhQY8oK8km5c8NhpES3Mwgti3ljyMYt45ASU2nNbia/l3xS4ID7Syj2eSy7uh9t9ux9jR6+3IHf7Rju9pR6VswK925OSSyUBHLnKUyyuX4cGJuuYSlfDWHeDNvTv81vGr1gfrSw5Pctl95mrht9IUXm53VI7iHT4kD7P5bAptJ1i45thfQhzH4K1jfPt4k2bmH6EYEv9NEMQaWkbs+3jTOkY5LC+IRIxsCesBIde0jwIDHX9bpBEhu1/GSdrJsBjNjhIdtmaUZPVk9MxGUv4pBnl7IcI5dDoTm/0xHdbU++Dp3dl6BHluQGzxacjfcpage3CWXfUYfh3AeRlruWeHIgReWDYZ95RXOK5ux+hr020vz9pUoRK+Hm74bvcwnJkKyhKPvEaWTJvOohwLc0eNu4nK0l3TzgBwSd+tEgAl4vxJSYWcxMfpTq1O1uqS5cmLE0nOOy9bd7q+ZnGk+AXL7duI6nHrbWvqooqYVYLfbsTt/Rzyf/Hr67xjzjIsMVzwUywPWGcuWVfCfSby/vWkwmZCbSxHrEeaUYoDPLI5hf12/9cGks2RY0klLaHi77DlQsmtKSRnxgM5uUmjtIjtvp7Wq6ZpBrA4FE+yph2Dy/2ILDvM6PF25A0o9PPI+664gxMVFhukJ0SThaI8A6HnlyCVkSNrdX/JMFujLzw/Dy1n9zAiWJ/a7mGeT65P80IWHRKOVR4y6BgTe4MVJQ0WffaTRBtOpgjyEwPWm19exnOK111vAqqmK0zBz9B5CGdQfhrqFKufvwCVGY00) [第7課 ── 學習開發狀態複雜的 vue 元](https://play.vuejs.org/#eNrVWHtv2zYQ/yqEE9T26ncad1DtoMswZAXW/ZECw4AoQGmJtrVIlEBRTrLA333HpyhZtuNuAzYkkMU73uN3d3ycXlo/ZNlgU5CW15rlAYsyfuXTKMlSxtHn5x/TOGVoydIEtQdDPRbT2z5FyKfkSU4MyRIXMUcvghqkIE0J5bmnCMgo6onRVj5DzHGna/iM8IJRM0JoTZ5+w7GH2mfLJR6PRtIaiJbyj5gHa6tf0n0K/7OhBQEDTpIsxpzACKFZ8twPJJ44Wq052vSTNCTx3G8pc37rajY0c2oSIWYPRwVmQ2sPPIJxzp9jZfs74+kifern0Z8RXXnwzkLC+kD6oJgJZquIemikxxkOQzlTERQ8qbPVaznJqORuX1oylmZlRiQSwFAQD33hDKzIsCIVGw9dp2lMMNVEAb9KU1kgSSSyfNcuMkgo8Uqt7fujafY5I6FM8+TyUhtCaMUIoZI6no4tdQEqJXFkSSoHtyQHhE6lWH6ON+S2wYCg3zQaEZzrXUNBwRhU8+3NNZhhq0VHaBNyo66x5hRmQvg6DctABxAy9olmBS/jgBBfR/ngXISv0xC7HsBpd7VqbSJYk+Dhs53zC6ErvjYqfe7zaIk6Um2paBDLWWiG3lvbPj9mW/Ld6EpPhAmAqX+al6HKZ0dE1sEqHBMkdDVHI/TmDZKD2VxkRU4TOsXfjmE0F4F4+2uRLAhTagc8VeXaGU+7A1ggXzhmvDPptUftrpkpFZlCOkFEV9lhCQPreBKbA+nIliUKSCVFRdBM2yIS56SMpBZTk4xIqcSKVSvHBOLfyovj0+ti/T/IitkgTJBNDI9kxkxzc2NU7cmORvefSc43rJ3jM//h7OhN2kRZh/BIbvQsNzVaz57MlH7tS47ZX+dzZ4PdXaYZZjn5RLmUuRvfo7cym3eTezhGLD6dSqeEqnIXVu5dk1wJryp2acWmTWLl4QaSX8Xpdv7ieL/t6aFxyxK0vW33az18+qoi7iFHLmRhtIHzEec5XKnkJaofYBb6LeQZ6ou+jsifnr6HiOcWLl/KXlWLgqOuZEKRvC4JRe0FDh5WLC1oqLhtzznZHXVD0NekOsOUiCufgVthQsU6LGDGeEHiq59/+n02VK8OLxK3AVe0LynC3Y0oNyCWtee3lORHOQdYBxbPOdkAnAEsvBXhA6mrC1oT/KQKFaTfw/hjEEfBg4iWvZsIKmSUCWLTRcPF7QSoFgUon4YooGUq9EI6rm73RoM/ZwI3w3QFkFEUKolStWYkEYXRSKGCN9gO4b28mesDtOJFNd7gZB9Cs19K7KouSBi9GuQKWDcngQSJk0Ha0+hEmDW5vwNUsK5PAgoSJwM1O/uJOKtidZjlu3k70LgpY7Z5Ew2bhyi0t/UW7SIzXVxa8Dii0FfZaXI3HJQ7nNH3GIUcbs+Ty5EVtvomJc20hQ5Jt44Mh1EBvcalw4D+co3D9BFaGPgDDjqbTqeOH6r7NZDsruihM0Jcf9W8hgBYswazmi975Ca1FxcXH2SLLr4NQAyAtFwu65JVQ7XNGkQMiF0lR/yqnAnGwJqogwVaxlqcoR/nPE0q4Q6jHMrj2UPLmBjaH0UOPZfo/ikH9XCawJMwzcUQPdqPoK7AnwrnoK9wGNgOverN+LA3++yVasVDHTTGghAHxVX0MVkClu+tMU6eeJ/Dgs1h4YMfRZYRFuDcrRRYg9/m9U4M8wwHpL8g/BF2qldBA9sebAWQ3nUU25VVc8N+P9HOiofYNWoL8V3prYQtLdfSVwmTheeqFntbc4h3v+doIbWzVp0ZT+qFyUzJlkbt96DtX340SC4=) 作業心得： 製作元件就像在組LEGO一樣，基礎和常用的就那幾個，把他們組一起成為一個新的作品，一開始製作觀念還很模糊，之後就慢慢熟悉，也了解能製作出可以重複使用元件多麼重要
* [第1課 ── 碼表應用程式](https://replit.com/@birdiewu/Ma-Biao-Ying-Yong-Cheng-Shi-online-stopwatch?v=1) * [第2課 ── 筆記應用程式](https://replit.com/@birdiewu/Bi-Ji-Ying-Yong-Cheng-Shi-online-notepad?v=1) * [第3課 ── 分帳應用程式](https://replit.com/@birdiewu/Fen-Zhang-Ying-Yong-Cheng-Shi-online-split-the-bill?v=1) * [第4課 ── 行事曆應用程式](https://replit.com/@birdiewu/Xing-Shi-Li-Ying-Yong-Cheng-Shi-online-calendar?v=1) * [第5課 ── 體重追蹤應用程式](https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1) 備註：如果第五課卡關，說不定你遇到跟我一樣的問題，可以參考[這裡的討論串](https://codelove.tw/@birdie2019/post/Ja69K3) * [第6課 ── 天氣查詢應用程式](https://replit.com/@birdiewu/Tian-Qi-Cha-Xun-Ying-Yong-Cheng-Shi-weather-in-taiwan?v=1) * [第7課 ── 國家資訊與地圖應用程式](https://replit.com/@birdiewu/Guo-Jia-Zi-Xun-Yu-Di-Tu-Ying-Yong-Cheng-Shi-world-map?v=1) 心得分享： JavaScript第八系列的作業跟前七個系列相比真的有挑戰性和困難度，此系列讓我進入到學習的陣痛期，不習慣、沒自信地摸索著，在網路上東看看西看看方法，文件重複看了好多次，code也拼拼湊湊完成每個作業的規格，遇到卡關的問題學著自己解決(除了第五課的問題外，那邊卡關兩天，最後終於揮白旗XD)，想想有什麼辦法可以做或可以找哪方面的資料，我認為自己不是很聰明和邏輯好的人，剛開始覺得作業規格條件好困難，一直出現卡關的問題，現在回頭看其實我都挑戰完成了欸！雖然回去翻作業看還是有小瑕疵和待優化的地方，但還是恭喜自己終於完成了! _(:з」∠)_
在自學網頁の嬰兒教材：第3課 ── 網頁排版，練習使用 inline-block 版面配置，但一直無法變成如圖下那樣，請問是少了甚麼東西嗎? 謝謝! https://jsfiddle.net/u2bkycxL/1/ 
目前似乎一共有八個系列 但是標題上看不太出來是哪個系列 我認為這在學習閱讀上會導致滿大的障礙(對我來說 是否有考慮用EP幾 或是其他方法 標註是第幾個系列 否則 JavaScript 自學網頁の嬰兒教材：第2課 ── XXXXXXXXXXXXXXXXXX 這種第二課可能會有八篇 必須我自己藉由XXXX的文字內容去猜到底是哪個階段的話 還滿煩躁的 個人想法是 「JavaScript 自學網頁の嬰兒教材」這幾個字似乎也稍微過於冗長、重複太多次 也許可以找個縮寫名稱 或是乾脆省略(? 畢竟這應該也不是SEO重點(? 也希望其他學員發表想法 大家討論看看~ 也許只是我個人的小偏見~提供參考而已:))))
恭喜你完成了一系列的專案開發挑戰 放眼市面上的新手教材，應該沒人會把作業設定到這麼困難！ 但我認為時機差不多了，所以要求一些有挑戰性、有趣的專案來讓你做，應該難不倒你 而且這種只用基本功能，就完成複雜專案的經驗，有助於掌握框架的本質、熟練框架基礎 既然你通通順利完成了，代表你的學習狀況「相當不錯」...... 再次跟你說聲恭喜！ --- 這些專案內容，已經相當接近實務上、職場上會遇到的開發需求 也就是說，你的開發經驗已經「大大提升」了不少 事實上，光是目前的技能與經驗，已經可以應付職場上絕大多數的功能要求 你已經離「進入職場工作」，又大大靠近了一步！ 但是呢，要能夠與團隊共同開發中大型專案，還是需要學習框架進階觀念、生態系、以及 JavaScript 生態系各種工具 坊間補習班，通常會在課程很早期開始教上述這些內容。我認為這會令學習者非常眼花撩亂 所以我讓你僅僅學完 `Essentials` 的內容，就立刻動手開發複雜、好玩的應用程式 我認為這樣才能清楚認識框架的強大，以及知道「工具不是導入越多、搞得越複雜就越好」 而是要視情況，只導入必要的、大小適宜的技術工具，這樣才能收放自如 那麼更大型的專案，又該引入哪些進階觀念、生態系工具呢？ 這些會在後續的課程提到！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（九）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/QxMYx5
* [第1課 ── 認識 Vue 基本環境與 render state](https://jsfiddle.net/birdie2019/54pzj7w2/51/) * [第2課 ── 體驗一下 Reactivity 的效果與便利](https://jsfiddle.net/birdie2019/54pzj7w2/55/) * [第3課 ── 學習 Vue 條件判斷式的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/84/) * [第4課 ── 學習 Vue 迴圈的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/94/) * [第5課 ── 學習 Vue 事件處理的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/396/) * [第6課 ── 認識 Lifecycle Hooks 與 Watchers](https://jsfiddle.net/birdie2019/54pzj7w2/415/) * [第7課 ── 認識 Template Refs](https://jsfiddle.net/birdie2019/54pzj7w2/432/) 心得分享： 老樣子，一樣一開始措手不及，文件有些看很多次還是看不懂，一直試才慢慢了解 (但還是有不了解的地方)，確實用Vue方便很多！程式碼部分少打逗號分號或括號對不起來的機率增加，如果作業過程跑不動說不定你跟我一樣遇到這個問題XD
恭喜你完成這份奇怪的 Vue 入門課程 如同我在這門課程中不斷強調的 任何的技術工具，其實都充滿了大量的過時觀念、多餘觀念、錯誤觀念 也就是很多小功能、小語法，要嘛是已經很少人在用了，要嘛是重複設計了，要嘛是根本設計失敗了。這些學了也用不到 偏偏你在補習班或者上網自學的時候，沒有人敢跟你這樣講。因為講的人自己也不太確定、沒有真正深入了解 所以我在這門課程只引導你使用最基本的語法、用最基本的功能 你已經完成了所有作業，代表這些基本功你都順利掌握了 不要小看這種只專注在基本功的學習方法 把基本功摸熟的人，在有必要學習任何進階觀念的時候，會比別人更快融會貫通 --- 偷偷跟你說一句，即便是業界工程師、業界講師，大多數人對於程式設計、大型工具的許多觀念，也都是一知半解的 這沒有什麼問題，我也總是跟你說：能解決問題就好 比較有問題的是：不確定的東西，要知道自己不懂、承認自己也不確定。在有必要的時候，要知道往哪個方向去深究 除此之外，既然自己也不太確定，就不要跟別人說 XXX 寫法一定比 YYY 寫法好，諸如此類的話 在程式開發這個圈子，絕大多數意見，都只是主觀意見，卻被講得好像是科學證明過的公認客觀意見、有對錯之分。這絕非事實 請積極學習，但也請保持懷疑＆批判的態度。面對新工具、新觀念，不需要感到太困擾或者焦慮 --- 翻閱 Vue 官方文件，你會發現 `Essentials` 這個段落，你幾乎通通讀完了 這些就是 Vue 的基礎觀念，已足夠你開發出各種易於維護、架構彈性的中型應用程式了 那麼該如何開發大型應用程式呢？那就需要更進一步學習模組化、元件等等的觀念 這些會在後續的課程提到！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（八）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/jqe6xX
第1課 ── 認識 data model 與 render function https://jsfiddle.net/birdie2019/7haz6fLj/9/ 第2課 ── 認識陣列操作 https://jsfiddle.net/birdie2019/7haz6fLj/15/ 第3課 ── 認識匿名函式 https://jsfiddle.net/birdie2019/7haz6fLj/24/ 第4課 ── 熟悉 render function https://jsfiddle.net/birdie2019/7haz6fLj/30/ 第5課 ── 熟悉匿名函式 https://jsfiddle.net/birdie2019/7haz6fLj/34/ 第6課 ── 認識 data model 的優點 https://jsfiddle.net/birdie2019/7haz6fLj/39/ 第7課 ── 資料序列化 https://jsfiddle.net/birdie2019/7haz6fLj/61/ 心得分享： 一開始前面幾堂不知所措，腦袋很習慣想要更新DOM去修改資料， 後面比較熟悉這種方式，最後一堂課更能感受data model的優點， 跟原本的相比少了很多程式碼，也輕鬆很多！
讓我總結說明一下，老方法、新方法的關鍵思維差異： - 在老方法中，工程師眼中主要關心 html，開發過程會一直去思考 html 結構，因為「應用程式的狀態（資料）」就存在 html 之中，html 同時是狀態、也是 UI - 在新方法中，工程師眼中主要關心 data model，通常就是一個 JSON 物件。這個物件的各個屬性，足以表達目前應用程式的狀態。至於狀態要怎麼呈現為 UI，則視為另一個獨立任務，可以另外處理。像這樣把兩件事分開來思考，對頭腦的負擔也比較小 --- 同樣的待辦清單小工具，原本的寫法，與現在的新寫法，請你比較一下程式碼 有沒有覺得變得易讀、好維護許多呢？ 在課程中，我多次說過以下這段描述： > 原本那種寫法，我稱之為「在各處胡亂更新各處 DOM」的寫法 > 新的那種寫法，只有在寫 render 時，腦中要思考 DOM > 在應用程式的其他地方，腦中都是思考 data model 就好 現在你懂我描述的感覺了嗎？ 在這個小工具的例子中，改善的程度可能不夠明顯 但在中型以上的網站、具有高互動性的複雜網頁，一定是用新寫法比較好 --- 這次的課程，讓你的能力從「前端設計」進入到「前端工程」了 之所以叫「工程」，是因為有時候需要建立中型、大型應用程式，這時就需要工程素養 原本那種「在各處胡亂更新各處 DOM」的寫法，絕對無法建立出大型軟體 就跟蓋房子一樣，隨便蓋的小房子臨時居住一下還可以，真的要蓋出厲害的高樓，當然需要足夠的工程技法、素養 --- 寫本課程作業時，render function 的內容會變很多 在實務上，render function 的任務會由框架或者某種模板引擎（template engine）套件完成 所以開發起來會省力很多，不像本課程作業寫起來那樣吃力 你未來使用任何工具只要知道：這些工具的背後，大概就是做了類似這樣 data model + render function 的事情即可！ --- 本課所教的 data model + render function 的寫法 是我為了教學方便，設計出來的一種「手工」開發方法 實務上，中型以上專案，幾乎都會使用 React 或者 Vue 框架 我留意到坊間許多課程、補習班，很快就進入框架的教學 我認為許多學員在結業之後，還是一知半解，甚至分不清哪些是 JavaScript 觀念，哪些是框架獨有的觀念 所以我才在這邊，教導這套手工、但很簡單的開發方法 寫過這種開發方法，接著再去學前端框架，我認為可以大幅改善那種「框架後面很黑箱」的感覺 所以你之後挑選任何框架學習，關於 `application state` 與 `render 出 UI` 這兩者的關係，就大致有個底了 --- 最後，老話一句，視網頁的需要，如果只是簡單頁面、小小 UI 工具，那麼就用老方法隨便寫即可。何況還有 data attribute 可以使用來管理狀態，簡單又方便。很多實務情境下，這樣也很夠了 如果真的有工程等級的需要，則可以使用本課程技巧，管理好「應用程式的狀態」，或者直接挑選框架使用 這行業有一句話叫做：No Silver Bullet（沒有萬用解法） 在開發手法的選擇上，也是一樣，請綜合權衡之後，選擇當下適合的方法吧！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（七）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/AqJGxd
身為前端新手學習者，雖然你已經知道怎麼寫 UI 小元件、怎麼寫簡單小工具 但是看著自己每天在用的那些網站、大型科技公司開發的 web application（網路應用程式） 你一定常常心想：這也太華麗了，畫面上 DOM 的變化很複雜、很頻繁，我好像寫不出來呀？ 別擔心，這是因為你目前為止的技能與開發方法，大概只接近 2010 年以前的業界工程師 你目前為止的能力還是比較接近「能把東西設計出來、做出來」而已，還不能夠「帶著工程思維去建造應用程式」 --- 這一門課程，會教你現代前端工程師，開發應用程式的方法與技巧 雖說是現代技巧，但完全不會用到 React 或者 Vue 這種框架 但在學完之後，你將可以比別人更懂，各種框架背後的基礎原理 這些內容非常有趣，將會大幅提升你的「工程素養」，讓你具備遠超過一般新手的基本功！ 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
第1課 ── 學會 Cookie 相關功能 https://replit.com/@birdiewu/DarkvioletClutteredDigits?v=1 第2課 ── 學會 Local Storage 相關功能 https://jsfiddle.net/birdie2019/wkqbvhma/378/ 第3課 ── 變數作用域、箭頭函式、ES6 語法 https://jsfiddle.net/birdie2019/0akLh4r8/7/ 第4課 ── 學會 AJAX 基本原理 https://jsfiddle.net/birdie2019/5sfhbq8v/8/ 第5課 ── 學會 AJAX 錯誤處理 https://jsfiddle.net/birdie2019/5sfhbq8v/12/ 第6課 ── 學會 AJAX 與各種 HTTP 請求方法 https://jsfiddle.net/birdie2019/5sfhbq8v/15/ 第7課 ── 學會 AJAX 與 data attribute 的結合 https://jsfiddle.net/birdie2019/5sfhbq8v/23/ 心得分享： 做完本單元五的課程作業，覺得自己技術再提升一點(?! ) 模擬購物網站有點成就感(自己講XD) 但同時覺得要做出大規模的購物網站真的不容易！ 因為資料好龐大( 像amazon或MOMO等等)，自己還有好多要學~
https://jsfiddle.net/birdie2019/5sfhbq8v/15/ 作業如上，雖然完成此課作業的功能但有個問題 JS程式碼的部分，作業網址第30行和第36行部分 為什麼改成event.target就無法運作了？如圖下圖 
在這門課程之前，你所掌握的知識大多是關於「設計出漂亮的網頁」 在這門課程中，學會了 Cookie, Local Storage, AJAX 等等現代技術 從這門課程開始，你逐漸開始具備「前端工程開發」的能力 能夠跟伺服器端溝通、能將狀態存在瀏覽器端，打造出好用、功能豐富的應用程式！ 身為前端工程師，本課程的內容，已經足以讓你跟後端工程師溝通、配合，完成各種專案的需求 各種資料結構、互動方式單純的中小型專案，你已經有能力從無到有打造出來 實務上，當應用程式更複雜，也就是資料更複雜、用戶操作行為更豐富的時候，會需要更進階的方式來開發，這些在之後的課程會提到 本課程提到的各種關鍵字、物件、函式，都只是簡單地介紹基本用法 針對有興趣的部份，歡迎自行上網研究，了解這些物件更多的屬性與函式用法！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（六）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/2anPxn
如果你是網頁設計師，或者開發的網站以公司介紹、形象網站為主 那麼目前為止的課程，已讓你具備相當的動態網頁開發能力 各種特效與視覺效果，你都做得出來 甚至更複雜的動態效果，直接上網找現成的套件，也都不是問題，你都能夠自行研究＆導入了 不過，如果需要開發與伺服器互動的應用程式，例如電子商務網站 或者是更多功能的工具類型網站，例如各種生產力工具 那麼就需要學習本課程的內容，包含 Cookie、Local Storage、與 Ajax 的說明 這些內容非常有趣，能讓你開發出各種多功能的前端應用程式，讓工程師的創造力有更多發揮空間 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
