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

 1、前言

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

　　學習系列目錄地址：http://www.javashuo.com/article/p-bzzucmub-ba.html

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

 2、乾貨合集

　　咱們知道，爲頁面的元素設置樣式主要有如下的三種方式：

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

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

　　c）外部樣式：即咱們在須要使用樣式的頁面的 head 標籤中經過 link 導入一個 css 樣式文件，或者，咱們也可使用 @import 關鍵字在 style 標籤中引入 CSS 樣式文件，所以，使用外部樣式方式設置的樣式能夠整個網站。 

　　一、經過屬性爲元素設置 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>

　　二、經過屬性爲元素設置 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>

 3、總結

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

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

　　對於對象語法來講，綁定 class 屬性的元素在設置樣式時對象的每個屬性爲樣式類名，對應的屬性值則是布爾值，咱們則能夠經過更改屬性值的 true or false 來設置樣式的是否啓用；而對於綁定 style 屬性的元素在設置樣式時，對象中的屬性則是一個個的 css 內置屬性，而對應的屬性值則是這個 css 屬性的自定義值。

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