[Vue 牛刀小試]：第四章 - 頁面元素樣式的設定

 一、前言

　　前端開發中有三大件：HTML、CSS、JavaScript，在前面的學習中，不管是學習 Vue 的指令系統還是 Vue 的事件修飾符，主要還是針對的是我們在前端開發中的 JavaScript 這一塊，而在實際的開發中必定會需要涉及到對於頁面布局的設計。即使你采用的是使用第三方的 UI 組件，當我們實際開發中時，還是需要自己寫一些樣式去滿足自己的需求，如何實現在 Vue 中對元素設置樣式則是本章學習的重點

　　學習系列目錄地址：https://www.cnblogs.com/danvic712/p/9549100.html

　　倉儲地址：https://github.com/Lanesra712/VueTrial/blob/master/Chapter01-Rookie/style.html

 二、干貨合集

　　我們知道，為頁面的元素設置樣式主要有以下的三種方式：

　　a）內聯樣式（行內樣式）：即我們直接在標簽元素的 style 屬性中設置樣式，設置的樣式只能作用於當前的元素

　　b）內部樣式（內嵌樣式）：即我們在頁面的 head 標簽中使用 style 標簽設置的 CSS 樣式，它可以應用於當前的整個頁面

　　c）外部樣式：即我們在需要使用樣式的頁面的 head 標簽中通過 link 導入一個 css 樣式文件，或者，我們也可以使用 @import 關鍵字在 style 標簽中引入 CSS 樣式文件，因此，使用外部樣式方式設置的樣式可以整個網站。 

　　1、通過屬性為元素設置 class 樣式

　　在以前的前端開發中，我們可以直接在 class 屬性中寫上需要設置的元素樣式，瀏覽器就會自動幫我們渲染完成，例如我們經常使用到的 Boostrap 這一類的 UI 框架，當我們在頁面中引入了樣式文件，再去使用其中的樣式，只需要在 class 屬性中指明樣式名稱即可。例如下面的代碼中我們創建了一個固定寬度並支持響應式布局的 div。

<div class="container"></div>

　　而當我們想以同樣的方法為元素的 class 屬性設置樣式時，我們可以發現我們期望的結果並沒有出現。打開控制台，我們可以看到 vue 給我們提供了一個報錯信息：當前實例上找不到名為 textRed 的屬性或是方法。通過在之前學習 v-bind 指令的時候了解到，這里綁定的其實是一個 js 變量，所以在這里我們對於樣式的綁定並不會生效。

<style>
    .textRed {
        color: red
    }
</style>

<h2 :class="textRed"></h2>

　　

　　a）數組語法

　　在vue 中作者給我們提供了使用數組進行綁定樣式的方式，這里我們可以直接在數組中寫上樣式的類名即可。注意：這里如果不使用單引號包裹類名，其實代表的還是一個變量的名稱，因此，還是會出現錯誤信息。

<style>
    .textRed {
        color: red
    }
    .textThin {
        font-weight: 200
    }
</style>

<div id="app">
    <h2 :class="['textRed','textThin']">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>
</div>

　　當然，如果你就是想以變量的方式，就需要你先定義好這個變量。

<style>
    .textRed {
        color: red
    }
    .textThin {
        font-weight: 200
    }
</style>

<div id="app">
    <h2 :class="[textRed,textThin]">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            textRed: 'active',
            textThin: 'text-danger'
        },
        methods: {}
    })
</script>

　　

　　當我們需要設置多個樣式時，只需要在這個數組中增加樣式類名即可，我們通過查看元素可以發現，這里已經自動渲染成了瀏覽器可以識別的寫法。可能你會發現，這樣寫好像沒有什么好處啊，反而比之前更麻煩了。不過，在這里我們可以使用三元表達式根據條件切換列表中的 class ，嗯，這種寫法原來的寫法是不可以的。

<style>
    .textRed {
        color: red
    }
    .textThin {
        font-weight: 200
    }
    .textAquamarine {
        color: aquamarine
    }
</style>

<div id="app">
    <h2 :class="[flag?'textAquamarine':'textRed','textThin']">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {}
    })
</script>

　　在這里，我們就可以根據 flag 的值去加載不同的樣式。不過當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法：

<h2 :class="[{'textAquamarine':flag,'textRed':!flag},'textThin']">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

　　

　　b）對象語法

　　在上面的例子的最后，我們在數組中使用了對象的形式來設置樣式，而在 vue 中，我們也可以直接使用對象的形式來設置樣式。此時，對象的屬性為樣式的類名，value 則為 true or false，當值為 true 時則顯示樣式。這里，由於對象的屬性可以帶引號，也可不帶引號，所以屬性就按照你自己的習慣寫法就可以了。

<h2 :class="{textAquamarine:flag,textThin:flag}">我是標題標題標題標題標題標題啊啊啊啊~~~</h2> 

　　當對象中的屬性過多時，如果我們還是采用直接全部寫到元素上時，勢必會顯得比較繁瑣，這時，我們同樣可以在元素上只寫上對象變量就可以了，當然，別忘了在 vue  實例中定義。

<h2 :class="styleObject">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObject: {
                textAquamarine: true,
                textThin: true
            }
        },
        methods: {}
    })
</script>

　　2、通過屬性為元素設置 style 樣式

　　a）對象語法

　　與使用屬性為元素設置 class 樣式相同，在 vue 中，我們也可以使用對象的方式，為元素設置 style 樣式。

　　v-bind:style 的綁定對象的語法雖然像 CSS，但其實實質上還是一個 JavaScript 對象。CSS 屬性名可以用駝峰命名法 (camelCase) 或短橫線分隔 (kebab-case，需使用單引號括起來) 來命名。

<h2 :style="{color:'aquamarine','font-weight': '200'}">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

　　同樣的，可以直接綁定一個樣式對象變量，這樣的話代碼看起來也會更簡潔美觀。

<h2 :style="styleObject">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObject: {
                color: 'aquamarine',
                'font-weight':200
            }
        },
        methods: {}
    })
</script>

　　b）數組語法

　　當我們使用數組的方式為 style 屬性設置樣式的時候，數組中每一項都是 vue 實例中 data 中的樣式對象，即我們可以設置多個樣式對象，通過數組的方式，全部應用到元素上。

<h2 :style="[baseStyle,additionStyle]">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            baseStyle: {
                    color: 'aquamarine'
            },
            additionStyle: {
                'font-weight': '200'
            }
        },
        methods: {}
    })
</script>

 三、總結

　　a）在 vue 中可以使用數組語法、對象語法對綁定的 class、style 屬性的元素設定樣式。

　　對於數組語法來說，綁定 class 屬性的元素在設置樣式時在數組中放置的元素為各個樣式類的類名（直接放置類名需要加上單引號）；而綁定 style 屬性的元素在設置樣式時再數組中放置的則是一個個包含樣式的對象。

　　對於對象語法來說，綁定 class 屬性的元素在設置樣式時對象的每一個屬性為樣式類名，對應的屬性值則是布爾值，我們則可以通過更改屬性值的 true or false 來設置樣式的是否啟用；而對於綁定 style 屬性的元素在設置樣式時，對象中的屬性則是一個個的 css 內置屬性，而對應的屬性值則是這個 css 屬性的自定義值。

　　b）當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測並添加相應的前綴。