參賽前言 大家好!我又來啦~~~在心裡默默下定決心,說好今年絕對死不參加,但是好死不死又因為各種難以啟齒的原因、五味雜陳的心情,所以我又來啦 XD 相信每一位參...
狀態管理有點像是 cookie 或 localStorage,可是又多了更多操作可以用,讓你再切換頁面時可以使用相同的變數。 用來使用這個功能的套件叫做 vue...
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 const routes: Array&l...
今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完...
v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子 <template> <div...
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 {...
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成...
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁...
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,這 30 天我將以最新的 composition api + types...
最近愛上以玩遊戲的方式去學習CSSヽ(✿゚▽゚)ノ好快樂~ 尤其是之前對選擇器和Grid Layout一直沒有很熟練,透過遊戲,印象更深刻,也不失為一個不錯的學...
【工作內容】 依照UX/UI 設計稿進行網頁開發 功能評估並規劃時程 與後端團隊合作,串接 API 資料 撰寫前端單元測試、整合測試 調整網頁渲染效能 (SS...
前言 由於 CKEditor 的客製化需要仰賴 Webpack,無法在 Vite 的專案上使用因此需要改使用 TinyMCE,發現網路上太多用很不直覺且奇怪的方...
經過前面二十九天的的練習與學習,相信大家應該在表單的實作上都熟悉了不少,只要不是太複雜、太特別的表單應該也都難不倒你們。 今天是本系列文的最後一天,就讓我們來...
昨天跟大家分享了自訂表單元件的作法,但昨天的作法只適用於一個欄位、一個 FormControl 。 雖然 FormControl 裡是可以設 {} 的值,但如...
經過了這段時間的練習與學習,相信大家應該越來越能體會 Angular 表單的強大與便利。 不過既然 Angular 表單這麼好用,如果能讓自己做的 Compo...
今天想要跟大家分享的是跨欄位驗證的小技巧,這個小技巧其實沒有多厲害或多特別,只是可能滿多人剛好不知道原來可以這樣用。 而我們在 Day 23 - Reacti...
之前在開發表單的時候,我們都是使用 Angular 所提供的驗證器來驗證表單欄位裡的值是否符合我們的需求。 雖然 Angular 已經這麼貼心地提供了這麼多驗...
大家在日常生活中,應該看過滿多表單的某個欄位會隨著另個欄位的改變,而造成該欄位的驗證邏輯需要改變的情況吧? 舉例來說,可能會有個欄位叫做聯絡資訊,使用者可以選...
昨天跟大家分享了 Cypress 有多厲害之後,大家有沒有很期待呢? 這兩天就讓我來跟大家介紹 Cypress 到底有多厲害吧! 由於 Cypress 的功...
在這個各種前端框架、開發工具層出不窮、百花齊放、百鳥齊鳴的美好時代, E2E 自動化測試工具的選擇自然也很多。 今天我們會先來初步了解一下目前有哪些 E2E...
這段期間,我們用 Template Driven Forms 與 Reactive Forms 各自做了一個登入表單(靜態)與被保人表單(動態),而且我們也都...
前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程,課程主打 No Frameworks、No Compi...
Congratulations to all of us! The final day has already come! Hooray!Pic: Unspla...
昨天幫我們用 Reactive Forms 所撰寫的被保人表單寫完單元測試之後,今天則是要來為它寫整合測試。 大家還記得整合測試的目標是要測什麼嗎?我幫大家複...
前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程,課程主打 No Frameworks、No Compi...
What is AJAX? AJAX = Asynchronous JavaScript And XML.AJAX is not a programming l...
今天我們要來為我們用 Reactive Forms 所撰寫的被保人表單寫單元測試,如果還沒有相關程式碼的朋友,趕快前往閱讀第十一天的文章: Reactive...
After introducing about the 2 methods for timing events in the last article, let...
在很多很多的前置作業後 今天終於要開始寫code了 到此為止我們應該流程畫有了 畫面流程也有了今天很多努力終於可以建立前端專案了 這邊終於可以開始建立專案了這邊...
前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程,課程主打 No Frameworks、No Compi...