iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

試試用Vue建立網站吧 系列

練習網上學習到的vue3知識來動手建立一個網站,從中複習vue3與發現不熟練之處,藉此紀錄並加以學習。

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11-試試Vue3-歡迎訊息顯示會員名(localStorage)

這邊分享歡迎訊息顯示會員名用儲存在瀏覽器的 localStorage 方法。 (1)介紹 localStorageHTML 5 出現後瀏覽器暫存有了 Local...

2023-09-26 ‧ 由 jennydisc 分享
DAY 12

Day12-試試Vue3-使用者故事(會員主頁)

這篇簡單說明使用者故事(以會員角度)。 假定華特義式餐廳為一餐飲集團,旗下有多個義式料理相關的餐飲品牌。為提供集團會員更多便利和互動性,會員主頁除首頁、登出外提...

2023-09-27 ‧ 由 jennydisc 分享
DAY 13

Day13-試試Vue3-建立餐廳API

同「Day5-試試Vue3-建立會員API」篇採用 json-server 方式建立 API。 (1)新增 restaurant.json 檔案建立資料專案根目...

2023-09-28 ‧ 由 jennydisc 分享
DAY 14

Day14-試試Vue3-規劃口袋餐廳的頁面

對於前端新手來說,編寫 JavaScript 可能較具挑戰性。譬如如何使用 v-for 進行資料渲染等 JavaScript 方法,建議先專注於建立想要的 ht...

2023-09-29 ‧ 由 jennydisc 分享
DAY 15

Day15-試試Vue3-口袋餐廳的html架構

此篇接續介紹口袋餐廳頁面的靜態 html 架構。 (1) html 程式碼畫面示意圖請參考前一篇。介面開發的技巧如下: 導覽(nav)架構請參考「Day8-試...

2023-09-30 ‧ 由 jennydisc 分享
DAY 16

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

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

2023-10-01 ‧ 由 jennydisc 分享
DAY 17

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

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

2023-10-02 ‧ 由 jennydisc 分享
DAY 18

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

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

2023-10-03 ‧ 由 jennydisc 分享
DAY 19

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

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

2023-10-04 ‧ 由 jennydisc 分享
DAY 20

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

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

2023-10-05 ‧ 由 jennydisc 分享