EP6 - 類別與風格綁定
Class and Style Bindings 前端的框架，
看到這個標題還真的不知道會怎麼綁定？
有時候覺得處理Style覺得蠻麻煩的～到處都有重複內容www
不知道Class跟Style可以去翻翻 html ccs
資料綁定的一個常見需求是操作元素的 類別列表(class list)和內聯樣式(inline styles)。由於 class 和 style 都是屬性，我們可以使用 v-bind 來動態地賦予它們一個字串值，就像對其他屬性一樣。然而，嘗試使用字串串聯來生成這些值可能會讓人感到厭煩且容易出錯。因此，Vue 提供了當 v-bind 與 class 和 style 一起使用時的特殊增強功能。除了字串之外，這些表達式也可以評估為物件或陣列。
綁定 HTML 類別 - Binding HTML Classes
又來看片摟！
綁定至物件 - Binding to Objects
我們可以傳遞一個物件給 :class（即 v-bind:class 的縮寫）來動態切換類別：
<template>
<div :class="{ active: isActive }"></div>
</template>
上述語法表示 active 類別的存在將由資料屬性 isActive 的真假來決定。
你可以在物件中包含更多字段來切換多個類別。此外，:class 指令也可以與普通的 class 屬性共存。因此，給定以下狀態：
const isActive = ref(true)
const hasError = ref(false)
以及以下模板：
<template>
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
</template>
它將渲染為：
<template>
<div class="static active"></div>
</template>
當 isActive 或 hasError 改變時，類別列表將相應更新。例如，如果 hasError 變為 true，類別列表將變為 "static active text-danger"。
綁定的物件不必是內聯的(inline)：
const classObject = reactive({
active: true,
'text-danger': false
})
<template>
<div :class="classObject"></div>
</template>
這將渲染為：
<template>
<div class="active"></div>
</template>
我們也可以綁定到返回物件的計算屬性上。這是一種常見且強大的模式：
const isActive = ref(true)
const error = ref(null)
const classObject = computed(() => ({
active: isActive.value && !error.value,
'text-danger': error.value && error.value.type === 'fatal'
}))
<template>
<div :class="classObject"></div>
</template>
綁定至陣列 - Binding to Arrays
我們可以將 :class 綁定到一個陣列，以應用一組類別：
const activeClass = ref('active')
const errorClass = ref('text-danger')
<template>
<div :class="[activeClass, errorClass]"></div>
</template>
這將渲染為：
<template>
<div class="active text-danger"></div>
</template>
如果你想在列表中有條件地切換類別，可以使用三元運算符來實現：
<template>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
</template>
這樣將始終應用 errorClass，但只有當 isActive 為真值時才會應用 activeClass。
然而，如果你有多個條件類別，這樣寫會顯得有點冗長。因此，我們也可以在陣列語法中使用物件語法：
<template>
<div :class="[{ [activeClass]: isActive }, errorClass]"></div>
</template>
與元件一起使用 - With Components
本節假設您已了解元件的知識。若不熟悉，可以跳過本節並稍後再回來。
當您在具有單一根元素的元件上使用 class 屬性時，這些類別會添加到元件的根元素，並與已存在的任何類別合併。
例如，如果我們有一個名為 MyComponent 的元件，其模板如下：
<!-- 子元件模板 -->
<p class="foo bar">Hi!</p>
然後在使用該元件時添加一些類別：
<!-- 使用元件時 -->
<MyComponent class="baz boo" />
渲染的 HTML 將是：
<p class="foo bar baz boo">Hi!</p>
類別綁定也是如此：
<MyComponent :class="{ active: isActive }" />
當 isActive 為真時，渲染的 HTML 將是：
<p class="foo bar active">Hi!</p>
如果您的元件具有多個根元素，則需要定義哪個元素會接收這些類別。您可以使用 $attrs 元件屬性來實現：
<!-- 使用 $attrs 的 MyComponent 模板 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
這表示 MyComponent 有兩個根元素：<p> 和 <span>。在這個範例中，$attrs.class 會獲取從父組件傳遞下來的 class 屬性值，並應用到 <p> 元素上。<span> 元素則不會受到影響。
<MyComponent class="baz" />
class="baz" 會被傳遞給 MyComponent，並應用到 <p> 元素上。最終渲染的 HTML 會是：
將渲染為：
<p class="baz">Hi!</p>
<span>This is a child component</span>
在這個例子中，class="baz" 被應用到 <p> 元素，而 <span> 元素保持原樣，這樣您就能控制類別應用的位置，尤其是當元件有多個根元素時。
您可以在“Fallthrough Attributes”部分中了解更多有關元件屬性繼承的內容。
綁定內聯樣式 - Binding Inline Styles
綁定到物件 - Binding to Objects
:style 支援綁定到 JavaScript 物件值，它對應於 HTML 元素的 style 屬性：
const activeColor = ref('red')
const fontSize = ref(30)
模板：
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
雖然建議使用 camelCase 鍵，但 :style 也支援使用 kebab-case 的 CSS 屬性鍵（對應於實際 CSS 中的寫法），例如：
<div :style="{ 'font-size': fontSize + 'px' }"></div>
將樣式物件直接綁定通常是一個好主意，這樣模板會更清晰：
const styleObject = reactive({
color: 'red',
fontSize: '30px'
})
模板：
<div :style="styleObject"></div>
物件樣式綁定通常與返回物件的計算屬性一起使用。
綁定到陣列 - Binding to Arrays
將 :style 綁定到多個樣式物件的矩陣。這些物件將被合併並應用於同一元素：
<div :style="[baseStyles, overridingStyles]"></div>
自動前綴 - Auto-prefixing
當您在 :style 中使用需要供應商前綴的 CSS 屬性時，Vue 會自動添加適當的前綴。Vue 通過在運行時檢查當前瀏覽器支持的樣式屬性來完成這一點。如果瀏覽器不支持特定屬性，則會測試各種前綴變體，以嘗試找到一個被支持的變體。
在 Vue 中，當你使用需要供應商前綴的 CSS 屬性時，Vue 會自動添加這些前綴。供應商前綴（如 -webkit-、-moz-、-ms- 等）是用來確保 CSS 屬性在不同瀏覽器中能夠正常運行的。
多個值 - Multiple Values
您可以向樣式屬性提供多個（已前綴的）值的陣列，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
這將僅渲染瀏覽器支持的最後一個值。例如，這會在支持未前綴版本的 flexbox 的瀏覽器中渲染 display: flex。
在這個例子中，display 屬性被設置為一個陣列，包含了三個不同的值：
-webkit-box-ms-flexboxflex
瀏覽器會使用支持的最後一個值。在這個例子中，flex 是現代瀏覽器支持的標準屬性，因此 Vue 會將其應用到元素上。對於舊版本的瀏覽器，會根據支持情況選擇適當的前綴版本。
補充：前綴（Vendor Prefixes）
前綴（Vendor Prefixes）是一種用來確保新興或尚在實驗階段的 CSS 屬性在不同瀏覽器中能夠正常運行的技術。不同的瀏覽器廠商（如 Google、Mozilla、Apple、Microsoft）會在他們的瀏覽器中實現 CSS 標準，但在標準正式確定之前，這些實現通常需要使用前綴來區分實驗性功能。
常見的前綴
- -webkit-：由 Apple 和 Google 使用，主要應用於 WebKit 和 Blink 內核的瀏覽器，如 Safari 和 Chrome。
- -moz-：由 Mozilla 使用，主要應用於 Firefox 瀏覽器。
- -ms-：由 Microsoft 使用，主要應用於 Internet Explorer 和 Edge 瀏覽器。
- -o-：由 Opera 使用，但 Opera 現在已經基於 Blink 內核，這個前綴已經不常見了。
示例
假設你想使用 CSS3 的 flex 屬性來創建彈性佈局。在早期版本的瀏覽器中，flex 屬性可能需要使用前綴來支持：
/* 標準屬性 */
display: flex;
/* 前綴屬性 */
display: -webkit-flex; /* Safari 和早期版本的 Chrome */
display: -moz-flex; /* Firefox */
display: -ms-flex; /* Internet Explorer 10 */
在這個例子中，display: flex; 是標準屬性，而其他三個帶有前綴的屬性用來確保在不同瀏覽器中的兼容性。
為什麼需要前綴
- 實驗功能：瀏覽器中的新 CSS 功能可能尚未成為標準，瀏覽器製造商會使用前綴來測試和實驗這些功能。
- 兼容性：不同瀏覽器可能實現了不同的功能版本，使用前綴可以確保功能在不同環境中的一致性。
- 逐步支持：隨著 CSS 標準的演進，前綴屬性會被標準屬性取代，最終前綴會被移除。
現代做法
現在，許多現代瀏覽器已經支持標準 CSS 屬性，不再需要使用前綴。開發者可以通過工具（如 PostCSS 和 Autoprefixer）自動添加必要的前綴，簡化開發過程。
這章節蠻不錯的～原來可以這樣綁定Class跟Style
動態的切換這些類別跟style，
以前的寫法可能都要寫一大堆Javascript來做切換～
這框架似乎省去很多麻煩啊～ 還是要多來練習一下
你可能也想看
