設定你的網站的預設主題 tailwind.config.js 中的 theme 區塊可以設定你自己的 color palette, type scale, fonts, breakpoints, border radius values 等等。 /** @type {import('tailwindcss').Config} */ module.exports = { theme: { screens: { sm: '480px', md: '768px',

目前在許多作業系統夜間模式都已經是必備的功能了，Tailwind 也有提供開發夜間模式的功能 使用 dark variant 來讓你的網站樣式根據夜間模式來做改變吧 image 圖片來源: Tailwind 官網 使用: bg-white

支援: Chrome、FireFox、Edge 不支援: IE(包含IE 11) 某些 css 新功能可能不是每個瀏覽器都支援，但 Tailwind 也有提供這些 css，使用者可以根據自己的開發狀況選用可以透過 Can I use 來檢查這個 css 功能在各個瀏覽器上的支援情況 Vender Prefix 有一些 css 會需要加上特別的前綴，這個 css 功能才能被對應的瀏覽器讀懂 ex:

用 flow-root 代替 clearfix clearfix: 消除float屬性 clearfix 與 float-root 更新依赖类顺序的 @apply 语句 @apply: 在你的css class 使用 tailwind 或自訂的 utility class: https://tailwindcss.com/docs/functions-and-directives#apply 在 textOverflow 下启用任何 truncate variants text-overflow word-break 在空格或分割元素内的任何模板标签中添加隐藏功能 Alpine

程式碼檢查工具 TSC ESLint TSLint 先來看看例子 :::info tsc 與 tslint 之間也有一些重複的檢測，但是大部分都是因為早期的 tsc 還沒能做到檢測此類別錯誤。 :::

物件導向 (Object Oriented) Java Python JS也有，但沒有那麼嚴謹 所有東西都是物品 class Caculator { private name: string; constructor(name: string) {

型別斷言（Type Assertion）可以用來手動指定一個值的型別。 語法： <型別>值 或 值 as 型別 :::info tsx中只能使用後者

let myFavoriteNumber: string | number; myFavoriteNumber = 'seven'; myFavoriteNumber = 7; myFavoriteNumber 可以是 string 或是 number 聯合型別會用 | 來分隔每個型別 存取聯合型別的屬性或方法 length 是 string 的屬性，卻不是 number 的屬性，所以不能直接用

在 javascript 中，資料分為原始資料型別與物件型別。 原始資料型別：boolean, number, string, null, undefined, symbol(ES6)，本篇會介紹前五種的資料型別。 boolean true、false let isDone: boolean = false; 使用 Boolean() 建構的並非 boolean，而是一個物件

一般情況都是使用 template 來做渲染，但有時候就是需要 javascript ，所以這時候就需要渲染函式。 基本用法 創建 vnode Vue 提供了 h() 函式來創建 vnode import { h } from 'vue' const vnode = h( 'div', // type

這個章節會介紹各種使用Vue的情境 獨立腳本 Vue 可以作為獨立腳本使用－也就是不用執行 build 。假如你的專案後端渲染了大部分的 html 結構，又或者是你的前端邏輯很簡單，你就可以使用 Vue ，把 Vue 想成是 jQuery 的替代品就好。 Vue 提供了一個叫做 petite-vue 的專案，他是專門設計給增強式開發的情境做使用。 作為 Web Component 嵌入 你可以使用 Vue 來 build 原生的網頁元件(這裡以後會介紹)，這種元件不論是用何種方式渲染的 html 頁面，都可以做嵌入（包含各種舊專案、靜態網站甚至是不同框架），如此一來便不需要考慮你的專案最終的應用情境。

回報安全漏洞 如果你發現 Vue 哪邊有安全漏洞，可以 email 給他們。同時 Vue 也推薦都使用最新版本的 Vue 。 最重要的守則: 千萬別使用不安全的模板 最基本的安全守則就是別使用來路不明的模板，這麼做基本上等同於你允許各種 JS 程式在你的專案中執行，如果那些程式碼是在 SSR 期間執行可能還會讓你的伺服器被攻擊。 Vue.createApp({ template: `<div>` + userProvidedString + `</div>` // NEVER DO THIS }).mount('#app') Vue模板會被編譯成JavaScript，而模板內的表達式將作為渲染過程的一部分被執行。儘管這些表達式在特定的渲染環境中執行，但由於全局執行環境的複雜性，Vue作為一個開發框架，要在性能開銷合理的前提下完全避免潛在的惡意代碼執行是不現實的。避免這類問題最直接的方法是確保你的Vue模板始終是可信的，並且完全由你控制。

為什麼需要測試 自動化測試可以幫助你的團隊快速且自信地建立複雜的 Vue 專案，Vue 鼓勵你把你的專案切成可測試的函式、模組、類別與元件。因為就和任何新專案一樣，你的 Vue 專案可能以任何形式崩潰，所以測試就變得相當重要。(簡單來說就是可以利用測試確保的你的專案符合你的需求，或是幫助你找出 bug 等等) 這篇文章會介紹一些基本的技術並且提供可以使用在 Vue3 的推薦工具。 還有一個專門介紹 Vue 專屬的組合式函式測試方式的章節 何時開始測試 越早越好，最好是專案建立時就能建立測試方法

簡介 SFC 是 Vue 提供的一種文件格式(*.vue)，更多介紹可以看我的筆記，以下會詳細的介紹 SFC 會使用的各個語法。 Language Block template 每個 SFC 最多只能擁有一個 tpo level 的 template 寫在 template 中的模板都會被提出來傳給 @vue/compiler-dom 來做編譯，會編譯成 js 的渲染函式。 script 每個 SFC 最多只能擁有一個 script 區塊 (script setup 則不在此限)

介紹 單一元件檔 (Single-File Components, SFC) 我想大家已經相當熟悉，也就是平常開發中會用到的 *.vue 檔案。以下是個例子: <script setup> import { ref } from 'vue' const greeting = ref('Hello World!') </script> <template> <p class="greeting">{{ greeting }}</p>

與 Transition 的區別 <TransitionGroup> 基本上和 <Transition> 擁有相同的 class、props、與 JS hook listener，但還是有一些不同的地方 預設不會渲染容器元素，但你可以用 tag 這個 prop 來作為你要渲染的元素。(可以看下面的例子) Transition Mode 不能用，因為我們不是在互斥的元件之間切換。 Group 裡面的每個元素都要有唯一的 key 值 (跟 v-for 一樣) CSS transition class 會分配給 list 中的每個元素，而不是直接給整個群組。 :::warning 記得在 DOM template 時要寫成 <transition-group>

Vue 提供了各式各樣的指令，像是 v-model、v-show 等等，同時 Vue 也有提供讓你自定義指令的方法。 指令是讓用來操作普通元素的底層 DOM 元素的程式邏輯變的可覆用。 自定義指令是一個包含生命週期(類似元件的生命週期)的物件，他會關連到指令想操作的 DOM 元素。 <script setup> // enables v-focus in templates const vFocus = { mounted: (el) => el.focus()

在大型專案中，很常需要將專案切分成小元件，並只在需要時載入來節省效能，Vue 為此提供了 defineAsyncComponent 函式。 import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent(() => { return new Promise((resolve, reject) => { // ...load component from server resolve(/* loaded component */) }) })

屬性繼承 fallthrough attritube 指的是傳遞給元件的屬性或是 v-on 事件監聽器，但卻沒有透過 props 或 emit 做宣告，常見的例子有 style、class、id 的屬性 :::info :pencil2: 看起來都是以 html 的屬性居多 ::: 舉個例子，假設有個 MyButton 元件的模板如下 <button>click me</button> 另一個元件使用了這個 button 元件，並傳入 class=large 的屬性

元件必須要註冊後才能使用，註冊方式分為「全域( global )」以及「區域( local )」 全域註冊 註冊後整個 app 都可以使用 使用 app.component() 來註冊 在 SFC 中要使用 import import MyComponent from './App.vue'