Pseudo-classes 偽類狀態：hover、active、focus、focus-within、focus-visible 連結：visited、target 子元素*、has、empty first、last、only、odd、even first-of-type、last-of-type、only-of-type input 元素 disabled、enabled valid、invalid

預設會在專案的根目錄使用 tailwind.config.js 做為配置檔初始化：npx tailwindcss initTypeScript：npx tailwindcss init --ts 改名： 初時化時透過指令自訂檔名。例：npx tailwindcss init custom-name.js 指定自訂檔案路徑使用 Tailwind CLI 時：npx tailwindcss -c ./custom-name.js -i input.css -o output.css 作為 PostCSS plugin 時：// postcss.config.js module.exports = { plugins: { tailwindcss: { config: './custom-name.js' },

外觀樣式 Chinese (Traditional) Language Pack for Visual Studio Code：VS Code 的中文 (繁體) 語言套件 One Dark Pro：主題樣式 vscode-icons：資料夾、檔案的 icon Color Highlight：色碼文字的背景顯示該色碼的顏色 檢查 Code Spell Checker：檢查英文拼字 ESLint

透過 npm 或 yarn 安裝 安裝 jQuery：npm install jQuery 或 yarn add jquery 使用 Vite 創建的 Vue 2、Vue 3 專案 引入方法一：在 main.js import import jQuery from 'jquery'; Object.assign(window, { $: jQuery, jQuery }); 引入方法二：透過 Rollup plugin 安裝：npm install @rollup/plugin-inject --save-dev

跨越層級的資料傳遞方式 父元件使用 provide(key, value) 提供資料，其所有後代元件都可以透過 inject(key) 取得資料inject 可帶第二個參數設定預設值，若在祖先元件中找不到指定的 key，則會使用預設值 適合在小專案或是小區塊的功能開發上使用 大型專案仍建議以 Pinia 或 Vuex 為主，Provide / inject 為輔 寫法 Vue 3 使用 <script setup>

以 v- 開頭的屬性，當指令的值改變時，會響應式更新 DOM 透過指令的作用與狀態的變化，就可透過改變狀態（資料）來操作整個網頁系統 指令的值應為 JavaScript expressions，但 v-for、v-on、v-slot 除外 內建指令清單 v-text：設定 textContent v-html：設定 innerHTML v-show：改變 display 狀態，顯示或隱藏元素 v-if：依據條件顯示對應的元素。不要同時使用 v-if 和 v-for v-else：依據條件顯示對應的元素

複用操作 DOM 元素的邏輯 Directive Hooks Vue 2 Vue 3 說明 無 created 在綁定 element 的 attribute 前或 event listeners 應用前

截圖 操作方式 macOS：同時按 "shift"+"command"+"p" 鍵，輸入 "screen" 在本機覆寫網頁內容和 HTTP response headers :::info Override web content and HTTP response headers locally 影片 26:44：你不知道的 Chrome DevTools（开发者工具）@FEDAY2023_ Jecelyn Yeen 簡報 p.65：你不知道的 Chrome DevTools（开发者工具）@FEDAY2023_ Jecelyn Yeen

選到同一個物件才有優先權的判斷和比較 明確性越高，優先權越高 相同選取器下，原始碼順序後者蓋掉前者 優先權大至小具備 !important 的 CSS 屬性 Animation（動畫執行期間） inline style ID class、pseudo-class 偽類、屬性選取器 Tag、pseudo-element 偽元素 * 號萬用選取器

:::info 瀏覽器支援度：IE 不支援，其他主流瀏覽器在 2022 年初陸續支援 ::: 改善過去不斷的堆疊選取器，提高優先權去覆寫前面其他選取器的優先權的情況 適合用在修改 component 預設樣式或是處理 Bootstrap 樣式 順序規劃可參考：@layer 基本 CSS, 共用 CSS, 組件 CSS例：@layer libraries, base, common, layout, xxxxcomponent 子 layer 寫法 /* 寫法一 巢狀 */

絕對單位：px、pt、pc、cm、mm、in、Q 相對單位：%、em、rem、ch、ex、lh、rlh Viewport 單位vw、vh、vmax、vmin、vi、vb lvw、lvh、lvmax、lvmin、lvi、lvb svw、svh、svmax、svmin、svi、svb dvw、dvh、dvmax、dvmin、dvi、dvb 容器查詢單位：cqw、cqh、cqi、cqb、cqmax、cqmin 角度單位：deg、turn、rad、grad

圖片 jpg破壞性壓縮檔案格式 最多可支援 24 位元色彩（256 * 256 * 256 個顏色） 適合情境：希望檔案小、畫質爛沒關係 png 圖檔雖有壓縮但畫質比 jpg 好 透明度可調 適合情境：希望畫質比 jpg 好，檔案大一點沒關係、圖片去背

運算子優先順序 運算子類型 運算子 結合性 []、() 從左到右 邏輯、一元 !、+（正）、-（負）、++、--

直譯式語言：彈性較高，不需預先定義型別 採用語法作用域（Lexical Scope，又名靜態作用域）：語法解析時已確定作用域 單執行緒（Single Thread），一次只能執行一件事（系統的執行） 非同步行為先移到事件佇列（Event Queue）例：setTimeout()，就算延遲時間為0秒，也不會立即執行，會先移到事件佇列 動態型別：執行階段才會賦予型別 靠事件驅動的語言（event-driven language） 在瀏覽器上的 JavaScript 包含：JavaScript 核心(ECMAScript 標準)、BOM、DOM

關於 this JavaScript 的一個關鍵字 function 執行時，自動生成的一個內部物件 隨著 function 執行場合的不同，this 所指向的值也會有所不同 決定 this 的關鍵在於 function「呼叫的時機點」，當透過物件呼叫某個方法的時候，此時 this 就是那個物件 代表的是 function 執行時所屬的物件，而不是 function 本身 在大多數的情況下，this 代表的就是呼叫 function 的物件 綁定的基本原則 1. 預設綁定（Default Binding）

屬性 屬性 介面 說明 attributes Element 指定節點所有屬性的資訊，是一個 NamedNodeMap 集合 childNodes

在瀏覽器裡的 window 物件扮演著兩種角色： ECMAScript 標準裡的「全域物件」 (Global Object) JavaScript 用來與瀏覽器溝通的窗口 [name=Kuro Hsu] [time=Dec 14, 2017 18:57] 重新認識 JavaScript: Day 11 前端工程師的主戰場：瀏覽器裡的 JavaScript window 物件實作了 Window 介面，代表了一個包含 DOM 文件的視窗，其中的 document 屬性指向了視窗中載入的 Document 物件 window 物件常用屬性、方法、事件

判斷屬性是否存在 hasOwnProperty()obj.hasOwnProperty('hasOwnProperty'); 只檢查物件本身的屬性 in 'hasOwnProperty' in obj; 會往上檢查物件的原型鏈 取值、新增、刪除

NaN NaN 與任何數值運算都是 NaN NaN 不等於 NaN 使用 isNaN() 判斷是否為 NaN typeof NaN; // "number" NaN + 0; // NaN NaN * Infinity; // NaN

設備資訊 設備：Macbook Pro M3 macOS：Sonoma 14.2 :::info 先安裝 Homebrew，Homebrew 會需要下載 Command Line Tools for Xcode，等待時間可以去安裝 NVM 或設定 Terminal 主題 透過 Homebrew 安裝軟體時先裝 Warp，裝好後打開 Settings > Features > Session，開啟 Receive desktop notifications from Wrap 使用 Warp 輸入指令安裝軟體，等待時間可以進行其他系統設定 :::