Skip to content

Main Navigation

Vue2 資料響應核心

Component

父子組件資料傳遞 props、$emit

directive 自定義指令 v-*

Router

路由守衛 Navigation Guards

路由信息設置 Meta Fields

路由資料傳遞 Passing Props to Route Components

路由 history 模式

Config

本地端開發機 https

客製化開發伺服器網域

Third Party

產生 Google 登入按鈕

產生 Apple 登入按鈕

LINE LIFF 應用程式

Perf

打包壓縮檔

Vue3 生命周期

資料響應 reactive && ref

計算屬性 computed

監聽器 watch

ref 模板元素引用

依賴注入 provide && inject

組件 v-model 雙向綁定

Config

Head 設置 (SEO and Meta)

Views

Components 元件

Router

Router 路由基礎操作

Middleware 中間件

Data

資料獲取 Data Fetching

狀態管理 useState

Nginx

Docker

容器化 Node JS App

Appearance

Sidebar Navigation

前言

Browser

HTTP Cookie TCP XHR AJAX 瀏覽器輸入網址後發生的事 Restful API 路由語義化設計風格 CDN 內容分發網路申請 Google OAuth 2.0 憑證加入 Apple 開發者計劃 Web Server 與 Application Server 正向代理與反向代理 HTTP 請求壓縮

Web3

Web 3.0 Blockchain 區塊鏈 Smart Contract 智能合約 DApp 去中心化應用程式

Javascript

BOM 瀏覽器物件模型 DOM 文件物件模型 Date 觀念與處理 Event Loop Closure 閉包封裝「鏈式」函式庫 Promise 非同步處理 IO 目標是否進入畫面 API 懶加載圖片 DEMO Lazy image 陣列處理 Prototype chain 原型鏈與繼承 Constructor 建構函式 Factory Function 工廠函式 Constructor VS Factory Function Class 類 Hoisting 提升解析網址查詢參數 URLSearchParams By Value && By Reference 傳值傳址 Shallow VS Deep Copy 深拷貝與淺拷貝 Cookie 操作解構賦值 Side Effect 副作用 Pure Function 純粹函式 Functional Programming 函式程式設計 SOLID 設計原則 MVVM 軟體架構 Virtual DOM 誰是 this ?<script> 非同步資源載入與安全驗証 Math 數學函式 Variable 變數 Web APIs Notification 推播信息 Websocket 客戶端與服務端雙向資料傳輸 Websocket 基礎操作 Geolocation API 取得裝置地理位置 getter 與 setter 物件屬性定義 Object.defineProperty Proxy 物件代理 Web Component 自定義組件 GSAP 特效動畫 GSAP 安裝 GSAP 補間動畫 GSAP 時間軸 GSAP 關鍵幀 GSAP 滾動觸發器 SpeechSynthesis 語音合成器懸浮視窗 (子母視窗) PIP

Vue

Vue2 資料響應核心父子組件資料傳遞 props、$emit Slots 插槽路由守衛 Navigation Guards 路由信息設置 Meta Fields 路由資料傳遞 Passing Props to Route Components 路由 history 模式設置客製化開發伺服器網域本地端開發機 https 產生 Google 登入按鈕產生 Apple 登入按鈕 LINE LIFF 應用程式 directive 自定義指令 v-*資料響應 reactive && ref 計算屬性 computed 監聽器 watch Vue3 生命周期 ref 模板元素引用組件基礎依賴注入 provide && inject 組件 v-model 雙向綁定

Nuxt3

Components 元件 Pages 頁面 Layouts 佈局 Assets 資源 Router 路由基礎操作 Router Middleware 中間件 Head 設置 (SEO and Meta)資料獲取 Data Fetching

Html

dialog 對話彈窗 picture 響應式載入圖片

CSS

CSS 設計模式元素置中的 5 個方法特殊實用功能滑鼠任意拖拽元素停留效果 Flexbox 彈性盒子 Grid 網格系統 Grid Container 屬性設置 Grid Item 屬性設置動態視窗填滿 dvh 字體尺吋單位 px、em、rem

Security

XSS 跨站腳本攻擊 CSRF 跨站偽造請求 CORS 與同源政策 JWT 身份驗證機制

Git

快速找出 bug commit 複製 commit 到當前分支 cherry-pick

On this page

Table of Contents for current page

Reference

懸浮視窗 (子母視窗) PIP

Youtube 也是使用此技術做為視窗懸浮

Reference

Picture-in-Picture API (MDN)

Last updated:

Previous pageSpeechSynthesis 語音合成器

Next pageVue2 資料響應核心