Vue：學習筆記（五）-Class 與 Style 繫結
提醒
原帖完整收藏於IT老兵驛站，並會不斷更新。
前言
本篇繼續對Vue的【Class 與 Style 繫結】篇進行總結學習。
正文
操作元素的 class 列表和內聯樣式是資料繫結的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表示式計算出字串結果即可。不過，字串拼接麻煩且易錯。因此，在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表示式結果的型別除了字串之外，還可以是物件或陣列。
繫結 HTML Class
物件語法
我們可以傳給 v-bind:class 一個物件，以動態地切換 class：
<div v-bind:class="{ active: isActive }"></div>
所謂物件語法，就是樣式這裡使用一個物件（大括號括起來的是物件，JavaScript的物件寫法，這裡是一個匿名物件），字首是class，這個物件的域是在data物件中。
data: {
isActive: true,
hasError: false
}
還可以這麼寫：
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
這裡是一個具名物件。
這個物件也可以是一個計算屬性。
陣列語法
陣列的原理是一樣的，語法類似下面：
<div v-bind:class="[activeClass, errorClass]"></div>
以陣列的形式嵌入，定義在：
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
data物件的兩個域。
用在元件上
還沒有看到元件一節，先略過。
繫結內聯樣式
物件語法
v-bind:style 的物件語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 物件。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名：
這裡使用的還是物件，不過字首變成了style。
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
這個是匿名物件的例子，感覺語法和class一樣，可能只是優先順序不一樣。
具名物件：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
陣列語法
類似上面。
自動新增字首
這裡涉及瀏覽器字首的一些知識，參考這裡。
摘抄一段：
瀏覽器廠商們有時會給一些在試驗階段和非標準階段的css屬性或JavaScript API新增字首, 這樣開發者就可以在使用這些試驗階段的程式碼時能夠確保不會被其他標準程式碼所依賴而導致破壞標準WEB程式碼的問題。開發人員應該等到瀏覽器行為被標準化之後再取消字首。
例如經常看到的：
-webkit- (谷歌, Safari, 新版Opera瀏覽器等)
-moz- (火狐瀏覽器)
-o- (舊版Opera瀏覽器等)
-ms- (IE瀏覽器 和 Edge瀏覽器)
多重值
摘抄記錄：
從 2.3.0 起你可以為 style 繫結中的屬性提供一個包含多個值的陣列，常用於提供多個帶字首的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
這樣寫只會渲染陣列中最後一個被瀏覽器支援的值。在本例中，如果瀏覽器支援不帶瀏覽器字首的 flexbox，那麼就只會渲染 display: flex。
總結
這篇內容主要涉及了在Vue中怎麼設定CSS，這裡涉及了CSS的class和style，這裡需要總結一下。
設定CSS一共有三種方式：
- 內聯 - 使用HTML元素的
style屬性，例如：
<h1 style="color:blue;">This is a Blue Heading</h1>
- 內部 - 使用
<head>區域的<style>元素，例如：
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
- 外部 - 使用外部的CSS檔案
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
還有一個優先順序的關係，可以參考這裡。
參考
https://cn.vuejs.org/v2/guide/class-and-style.html
https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix
https://www.w3schools.com/html/html_css.asp