前言： 昨天的內容是在單獨的js檔案中，完成API的對接，從Strapi的資料庫中，撈出資料，今天的內容就是把寫在測試程式裡的程式碼拿到專案中實作。 編輯 li...
清空-點及清除所有信息(v-on)Clear =>讓列表裡面的值全部清空lists=[] v-on click觸發 clear(){ this...
點擊刪除指定內容(v-on splice索引) splice方法的使用當我們點擊某個待辦事項的刪除按鈕時，remove方法將被調用，並將該待辦事項從lists...
今天來練習一個小小的代辦清單:新增功能:1.生成列表結構 v-for2.獲取用戶輸入 (v-model 雙向數據綁定)3.enter，新增數據 (v-on .e...
前言: 今天這篇還是在測試程式(scripts\strapi-request.mjs)裡，寫有關API對接的範例是獨立的程式，並不會動到專案裡的程式碼。 安裝套...
(一) v-for根據數據生成結構列表(如陣列或物件) 語法: item in items (item 的名稱可任意命名，只要是合法的 JavaScript...
定義圖片陣列-圖片數組imgArr 添加圖片索引-index 綁定src屬性-v-bind 圖片切換 v-on 邏輯-v-show 顯示狀態切換 <d...
(一)v-show: 根據條件的布林值來控制元素的顯示和隱藏，與CSS的display屬性相關聯，但與v-if指令不同，v-show 不會將元素從DOM中移除，...
(一) v-text:設置標籤的文本內容textContent我們除了可以用兩個大括號{{}}將data值綁定之外，也可用使用v-txet <div id...
http://localhost:1337/api/reviews資料格式 測試api (在前端資料夾) 後端需要啟動ironman_2023\scripts\...
(一)Vue.js 的實體物件: 透過new Vue()或Vue.createApp()得到新物件，並指定變數名稱，透過此物件來掛載在網頁上的某個 DOM 節點...
Vue是一個用於建立使用者介面的 JavaScript 框架。他提供聲明性和基於元件的程式設計模型，幫助開發人員構建交互性強、高效的網頁應用程序。以下是Vue的...
Headless CMS: A headless Content Management System, or headless CMS, is a back e...
一、導覽列(navbar)是網頁或應用程式界面中常見的一種元素，用於幫助使用者導航和定位到網站或應用的不同部分或功能。它通常位於網頁或應用的頂部或側邊，提供了一...
(一)陰影(二) 定位、文繞圖一、定位1.一般定位position2.圖層定位利用到z-index屬性來設定元件層次，z-index 數字越大的在越上面，反之則...
CSS串接樣式表，可控制版面位置、網頁配色以及產生文字與圖片特效(一) 在HTML文件裡面使用CSS樣式，有三種方式1.行內宣告:將CSS寫在html標記裡，&...
今天的內容是要把進行中的專案部署到網路上Next.js 是由Vercel這家公司所開發的所以可以把Next.js專案免費部署到Vercel基本上只要先將專案gi...
(一)超連結a target: 設定連結的網頁開啟方式1)_blank: 在新的瀏覽器窗口或標簽中打開連結。2)_self: 連結的目標會開啟在目前執行的視窗...
app\page.jsx import Link from "next/link" import Heading from "@/...
lib\reviews.js export async function getReviews() { const slugs = await get...
app\reviews[slug]\page.jsx // 產生靜態頁面 export async function generateStaticParams(...
編輯 app\reviews\stardew-valley\page.jsx 檔案內容如下: import { readFile } from "no...
安裝所需套件 npm i -D marked npm install -D @tailwindcss/typography npm install -D gra...
編輯 app\page.jsx 檔案內容如下: import Link from "next/link" import Heading fr...
這邊用到的字型來自Google Font 挑一款自己喜歡的字型吧 編輯 app\fonts.js 檔案內如下: import { Orbitron } from...
在專案的根目錄下建立 public\images 資料夾找一些圖片放到images資料夾裡(可以直接用wiki裡面的圖片) 接著在 app\reviews\ 底...
在導入TailWind Css之後，網頁的樣式被清除了，如h1需要使用者重新定義標籤的樣式 編輯 app\page.jsx 檔案內容如下: function H...
編輯 app\layout.jsx 檔案內容如下: import Link from "next/link"; import "....
安裝所需套件: npm install --save-dev tailwindcss postcss autoprefixer npx tailwindcss...
不惑的胖虎
iThome鐵人賽
看影片追技術