DAY 9 - v-bind 綁定樣式與 v-on 監聽事件 v-bind 綁定你的 attributes(屬性) v-bind 簡寫、縮寫 常見運...
Vue.js基礎之數據綁定 數據綁定是Vue的核心功能之一，允許我們建立視圖（模板）與數據之間的關聯。當數據發生變化時，視圖會自動更新，反之亦然。 開新專案(步...
後台管理者頁面設計概念同本專案的前端頁面。管理者於指定的頁面登入後，主頁功能除首頁、登出外提供「管理餐廳列表」一項功能。因後台模板與前端相似，開發過程會簡單說明...
在轉寫框架時，用了很多import，可是卻不知道有區分靜態跟動態導入（dynamic import）？那動態載入跟框架裡面的用法有什麼關係？於是我將很多困惑交給...
同「Day5-試試Vue3-建立會員API」與「Day13-試試Vue3-建立餐廳API」篇採用 json-server 方式建立 API。 (1)新增 use...
元件大致上的使用規則都已經了解後，這一個單元會實際用一個例子來講解元件的其中一個用法，就是可以使用元件來製作 Tab 的瀏覽方式。 一開始先新增三個元件檔案，分...
本篇開箱的是vue-easy-lightbox，簡單應用就能有圖片預覽功能 ▲ 示意圖 介紹 基於Vue.js 3.0與TypeScript構建的圖片瀏覽(...
小弟在網上找的範例為: <script setup lang="ts"> import { useRoute } from 'v...
看了一整天，問chatgpt好多個蠢問題之後，甚至還跟它談心了，"v-model真的看不懂怎麼辦...?"雙向綁定這樣的說法好像很炫，但我聽...
上篇簡單介紹了圖片懶加載，那其實頁面（組件）也可以懶加載，因此本篇要介紹改進初始頁面加載的好方法 也就是將我們的應用程式以較小的區塊加載，而不必在頁面加載時...
什麼是組件？ 在 Vue 中，組件可以被看作是一個可重用的 Vue 實例，帶有名稱。它們和常規的 Vue 實例很相似，只是它們用於定義可重用的代碼塊。組件是構建...
接續上一篇使用iframe來實現這個功能，這一篇將介紹使用Vue的套件：vue3-google-map來完成嵌入地圖及設置圖釘。 在官方文件有提到，若要使用此套...
本篇開箱的是Vue Final Modal 4，簡單應用就能有modal視窗 ▲ 示意圖 介紹 Vue Final Modal 是一個輕量、無渲染、對行動裝...
template 輸入和添加 v-model綁定input的數據，裡面的字顯示新增待辦，也加上enter和按鈕觸發事件 待辦列表 v-for渲染我們的filte...
因開發過程細節較多會分成兩篇來說明。 (1)新增餐廳實評頁面檔案路徑 src / views / front 底下新增 CommentView.vue 檔案。...
本篇開始會對「Day15-試試Vue3-口袋餐廳的html架構」的內容進行調整，試將資料內容改用 JavaScript 來動態渲染畫面。因開發過程細節較多會分幾...
資料來源是先前建立的餐廳 API（採用 json-server 方式建立），管理者具有新增餐廳的權限。本系列旨在練習開發前端畫面，因為現有前端技術僅支持簡單的...
來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣，目前官方沒有支援 Vue 的擴充，所以要手動設定。 首先建立一個基於 Vite 的 js...
分享寫「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」時整理幾種其他歡迎訊息顯示會員名的寫法，及從中學到的新知識點。會分兩篇介紹。 (1)登入會...
對於前端新手來說，編寫 JavaScript 可能較具挑戰性。譬如如何使用 v-for 進行資料渲染等 JavaScript 方法，建議先專注於建立想要的 ht...
在前端開發中，記憶化（Memoization）主要用於優化性能，特別是在需要頻繁計算或重新渲染的情況下。所以我們今天來認識一下在Vue中，有幾種方式可以實現Me...
同「Day5-試試Vue3-建立會員API」篇採用 json-server 方式建立 API。 (1)新增 restaurant.json 檔案建立資料專案根目...
此篇接續介紹口袋餐廳頁面的靜態 html 架構。 (1) html 程式碼畫面示意圖請參考前一篇。介面開發的技巧如下： 導覽（nav）架構請參考「Day8-試...
這篇簡單說明使用者故事（以會員角度）。 假定華特義式餐廳為一餐飲集團，旗下有多個義式料理相關的餐飲品牌。為提供集團會員更多便利和互動性，會員主頁除首頁、登出外提...
今年其實很猶豫要不要參賽，想把去年的安裝教學做完，還是報名了。壓線最後一刻 ~~~(有可能不會完成30天的影片發文:P)(但會把Vue Cli和Node.js...
本篇開箱的是vue-ellipsis-3，是一款簡單上手就能實現的文字縮略元件。 相信大家在網頁功能上一定會碰到這個需求，超過某個寬度時要出現...省略號（...
接續處理口袋餐廳清單右側的「移除」鈕功能。 (2)口袋餐廳清單-移除鈕分為資料渲染與觸發方法兩部分說明。 1.「移除」鈕的限制只能移除口袋餐廳清單（以下簡稱口袋...
(3-1)動作拆解-品牌受眾分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in restaurants"...
口袋餐廳頁面下方區塊是篩選後的清單，以表單形式顯示所選的口袋餐廳。畫面示意圖請參考「Day14-試試Vue3-規劃口袋餐廳的頁面」篇。 (1)口袋餐廳清單-主表...
阿蘇蘇
lohchanhin
jennydisc
切版姐姐
Mr. JK
Jasper
Olivia
iThome鐵人賽
看影片追技術