iT邦幫忙

菜鳥前端相關文章
共有 310 則文章

技術 CSS 特殊形狀怎麼切?

我是圖片:https://drive.google.com/file/d/1j8EyVDr5OfNZdq4niRz_nZQnTJzMITQB/view?usp=...

鐵人賽 Vue.js DAY 30
試試用Vue建立網站吧 系列 第 30

技術 Day30-試試Vue3-老天鵝~撐到30天了

終於撐到連續發文的第30天,分享個賽中小故事。 (1)主題名稱由來其實起初參加第 15 屆鐵人賽的主題不是「試試用Vue建立網站吧」,而是「跟著雲端前輩用Vue...

鐵人賽 Vue.js DAY 29
試試用Vue建立網站吧 系列 第 29

技術 Day29-試試Vue3-後台管理者頁面(2)

資料來源是先前建立的餐廳 API(採用 json-server 方式建立),管理者具有新增餐廳的權限。本系列旨在練習開發前端畫面,因為現有前端技術僅支持簡單的...

鐵人賽 Vue.js DAY 28
試試用Vue建立網站吧 系列 第 28

技術 Day28-試試Vue3-後台管理者頁面(1)

後台管理者頁面設計概念同本專案的前端頁面。管理者於指定的頁面登入後,主頁功能除首頁、登出外提供「管理餐廳列表」一項功能。因後台模板與前端相似,開發過程會簡單說明...

鐵人賽 Vue.js DAY 27
試試用Vue建立網站吧 系列 第 27

技術 Day27-試試Vue3-餐廳實評頁面(2)

程式碼盡量只寫要說明的地方,無關的就不贅述。 (3-4)頁面表單提交的規範 點選任一張卡片時,表單中「餐廳評論」欄位才可進行編輯。否則唯讀狀態。 原本已有評...

鐵人賽 Vue.js DAY 26
試試用Vue建立網站吧 系列 第 26

技術 Day26-試試Vue3-餐廳實評頁面(1)

因開發過程細節較多會分成兩篇來說明。 (1)新增餐廳實評頁面檔案路徑 src / views / front 底下新增 CommentView.vue 檔案。...

鐵人賽 Vue.js DAY 25
試試用Vue建立網站吧 系列 第 25

技術 Day25-試試Vue3-規劃餐廳實評的頁面

「Day14-試試Vue3-規劃口袋餐廳的頁面」提到建立新頁面之前,建議專注於設計所需的 html 結構。這樣可以更好地思考如何渲染資料以及應該使用哪些 Jav...

鐵人賽 Vue.js DAY 24
試試用Vue建立網站吧 系列 第 24

技術 Day24-試試Vue3-口袋餐廳的口袋清單(2)

接續處理口袋餐廳清單右側的「移除」鈕功能。 (2)口袋餐廳清單-移除鈕分為資料渲染與觸發方法兩部分說明。 1.「移除」鈕的限制只能移除口袋餐廳清單(以下簡稱口袋...

鐵人賽 Vue.js DAY 23
試試用Vue建立網站吧 系列 第 23

技術 Day23-試試Vue3-口袋餐廳的口袋清單(1)

口袋餐廳頁面下方區塊是篩選後的清單,以表單形式顯示所選的口袋餐廳。畫面示意圖請參考「Day14-試試Vue3-規劃口袋餐廳的頁面」篇。 (1)口袋餐廳清單-主表...

鐵人賽 自我挑戰組 DAY 30
從零開始學習前端 系列 第 30

技術 #從零開始2️⃣9️⃣:切版實作(8)商品 RWD

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 自我挑戰組 DAY 29
從零開始學習前端 系列 第 29

技術 #從零開始2️⃣8️⃣:切版實作(7)商品

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 自我挑戰組 DAY 28
從零開始學習前端 系列 第 28

技術 #從零開始2️⃣7️⃣:切版實作(6)商品選單 RWD

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 自我挑戰組 DAY 27
從零開始學習前端 系列 第 27

技術 #從零開始2️⃣6️⃣:切版實作(5)商品選單

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 自我挑戰組 DAY 26
從零開始學習前端 系列 第 26

技術 #從零開始2️⃣5️⃣:切版實作(4)nav&footer RWD

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 自我挑戰組 DAY 25
從零開始學習前端 系列 第 25

技術 #從零開始2️⃣4️⃣:切版實作(3)nav&footer

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 自我挑戰組 DAY 24
從零開始學習前端 系列 第 24

技術 #從零開始2️⃣3️⃣:切版實作(2)mixin設定

撰寫手機樣式(@media可以參考#從零開始1️⃣6️⃣:RWD!!@media(max-width)和@media(min-width)這篇) 我設定了幾個斷...

鐵人賽 Vue.js DAY 20
試試用Vue建立網站吧 系列 第 20

技術 Day20-試試Vue3-建立會員餐廳API

同「Day5-試試Vue3-建立會員API」與「Day13-試試Vue3-建立餐廳API」篇採用 json-server 方式建立 API。 (1)新增 use...

鐵人賽 Vue.js DAY 21
試試用Vue建立網站吧 系列 第 21

技術 Day21-試試Vue3-口袋餐廳選單(5-1)

說明口袋餐廳的表單提交前,先調整登入會員的 Pinia store 與會員登入頁面。將會員登入時的電子郵件與 id 也儲存於登入會員的 Pinia store...

鐵人賽 Vue.js DAY 22
試試用Vue建立網站吧 系列 第 22

技術 Day22-試試Vue3-口袋餐廳選單(5-2)

前置作業1:調用 Pinia store 資料<script></script> 將 LoginStore.js 檔裡的 useLogi...

鐵人賽 Modern Web DAY 30
前端轉職人生 系列 第 30

技術 前端轉職人生Day30-完結篇

真是不敢相信已經來到第30天了 還真想不到去年此時還在查著鐵人賽文章的我,此刻已經在上班了,還挑戰了鐵人賽30天!!! 真的很感謝鐵人賽這樣的制度以及眾多前輩無...

鐵人賽 Modern Web DAY 29
前端轉職人生 系列 第 29

技術 前端轉職人生Day29-額外補充知識篇

在學習的過程以及查找學習資源的過程,有很多覺得很重要,但優先順序排在比較後面的,或是因為要做某些功能而查到的額外知識,也有想了解但還沒花時間了解的知識,底下就記...

鐵人賽 自我挑戰組 DAY 23
從零開始學習前端 系列 第 23

技術 #從零開始2️⃣2️⃣:切版實作(1)環境建立

匯總前二十幾篇學習到的,接下來會以甜點店商設計稿(可商用)的產品頁(product)實際操作練習。 觀察設計稿有沒有通用、重複的部分 設計稿導覽列和頁尾部分似乎...

鐵人賽 Vue.js DAY 19
試試用Vue建立網站吧 系列 第 19

技術 Day19-試試Vue3-口袋餐廳選單(4)

(3-2)動作拆解-品牌名稱與地址分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in filterRes.filt...

鐵人賽 Vue.js DAY 18
試試用Vue建立網站吧 系列 第 18

技術 Day18-試試Vue3-口袋餐廳選單(3)

(3-1)動作拆解-品牌受眾分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in restaurants"...

鐵人賽 Vue.js DAY 17
試試用Vue建立網站吧 系列 第 17

技術 Day17-試試Vue3-口袋餐廳選單(2)

程式碼盡量只寫要說明的地方,無關的就不贅述。 (2)建立要導出的資料試著整理出動態渲染畫面所需的資料實體有哪些。以下說明 <script></...

鐵人賽 Vue.js DAY 16
試試用Vue建立網站吧 系列 第 16

技術 Day16-試試Vue3-口袋餐廳選單(1)

本篇開始會對「Day15-試試Vue3-口袋餐廳的html架構」的內容進行調整,試將資料內容改用 JavaScript 來動態渲染畫面。因開發過程細節較多會分幾...

鐵人賽 自我挑戰組 DAY 19
從零開始學習前端 系列 第 19

技術 #從零開始1️⃣8️⃣:寫CSS寫的心好累-SCSS、OOCSS、BEM設計模式(下)

OOCSS(Object-Oriented CSS) OOCSS(Object-Oriented CSS)強調了分離結構和外觀的概念。以下是 OOCSS...

鐵人賽 自我挑戰組 DAY 18
從零開始學習前端 系列 第 18

技術 #從零開始1️⃣7️⃣:寫CSS寫的心好累-SCSS、OOCSS、BEM設計模式(上)

在前端開發中,CSS 的組織和管理變得至關重要,特別是當項目變得越來越龐大時。為了使 CSS 更易於維護、擴展和協作,有三種常見的設計模式被廣泛使用:SCSS、...

鐵人賽 自我挑戰組 DAY 22
從零開始學習前端 系列 第 22

技術 #從零開始2️⃣1️⃣:學習使用SCSS/Sass(下)

擴展/繼承(Extend/Inheritance) 我們可以定義一組樣式,然後將這些樣式應用於不同的元素,同時保持代碼的整潔和可維護性。 使用@extend...

鐵人賽 自我挑戰組 DAY 21
從零開始學習前端 系列 第 21

技術 #從零開始2️⃣0️⃣:學習使用SCSS/Sass(上)

根據官方文件說明,Sass有兩種語法,最常用的是SCSS語法(.scss),而另一種的縮排語法(.sass)則比較不常見。縮排語法使用縮排而不是中括號來嵌套程式...