寫在前面的話：
文章是個人學習過程中的總結，為方便以后回頭在學習。
文章中會參考官方文檔和其他的一些文章，示例均為親自編寫和實踐，若有寫的不對的地方歡迎大家和我一起交流。
VUE基礎系列目錄
一.前言
vue中的指令是指以“v-”開頭的一個語法，它主要是將vue中data數據和數據的變化作用到DOM元素中。
二.指令的基本語法
<tag v-指令ID="單個的javascript表達式">
</tag
三.v-html
v-html指令在《VUE基礎系列（三）——VUE模板中的數據綁定語法》中有使用過，但是是以模板數據綁定的使用總結的，而實際上v-html被稱為vue中的指令，它的作用我們之前也總結過：v-html會將數據中的html片段解析成DOM節點插入到元素子節點中。
在這里我們寫一個跟以前不一樣的示例，學習一下v-html的另外一個特性：v-html指令會以innerHTML的方式更新元素的內容。
#示例
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(上)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css"> .content{ font-size: 16px;
}
</style>
</head>
<body>
<div id='box'>
<div class="content" v-html='msg'>
<h1>這是一段測試文本</h1>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({ el: '#box', data: { msg: '<h1>我也是一段測試文本,我可能會覆蓋div.content中的節點內容</h1>', } }); </script>
</body>
</html>
#結果
#總結
- v-html會將數據中的html片段解析成DOM節點插入到元素子節點中。
- v-html指令會以innerHTML的方式更新元素的內容（即如果v-html指令所在的DOM元素存在子節點，那子節點就會被指令綁定的數據所覆蓋）。
四.v-text
v-text指令會將數據數據解析成文本在更新到元素中，並且是以innerText的方式更新的。
#示例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>vue中的指令(上)</title>
5 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6 <style type="text/css">
7 .content{
8 font-size: 16px;
9 }
10
11 </style>
12 </head>
13 <body>
14 <div id='box'>
15 <div class="content" v-text='msg'>
16 <h1>這是一段測試文本</h1>
17 </div>
18 </div>
19 <script type="text/javascript">
20 var vm = new Vue({ 21 el: '#box', 22 data: { 23 msg: '<h1>我也是一段測試文本,我可能會覆蓋div.content中的節點內容</h1>', 24 } 25 }); 26 </script>
27 </body>
28 </html>
#結果
#總結
- v-text會將數據中的html片段以文本的形式插入到元素子節點中（不解析html片段，將html片段以字符串的形式原封不動的顯示在模板中）。
- v-text指令會以innerText的方式更新元素的內容（即如果v-text指令所在的DOM元素存在子節點，那子節點就會被指令綁定的數據所覆蓋）
五.v-bind
v-bind這個指令我們在《VUE基礎系列（三）——VUE模板中的數據綁定語法》中也有過總結：v-bind可以將數據綁定到元素的屬性上，在這里我們不在演示這個特性。
在瀏覽vue官方文檔時，可以看到v-bind指令對元素的class屬性和style屬性有一些增強的特性（官網鏈接傳送門 biubiubiu ！！！）。
1.v-bind綁定元素的class屬性
v-bind:class可指定javascript表達式有兩種數據類型：對象類型和數組類型。下面我們寫一個示例，分別看一下這兩個數據類型的用法和效果。
#對象類型
<!DOCTYPE html> <html> <head> <title>vue中的指令(上)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .red{ color: red; } .green{ color: green; } </style> </head> <body> <div id='box'> <!-- 給v-bind:class指定對象類型的javascript表達式--> <h1 v-bind:class='{red: redActive}'>這是一段測試文本</h1> <h1 v-bind:class='{green: greenActive}'>這也是一段測試文本</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { redActive: false, greenActive :true } }); </script> </body> </html>
從上面的代碼示例中可以看出，當v-bind綁定的對象的鍵值為true時，鍵會作為字符串添加到元素的類名中，相應的css規則就會生效。
同時對象類型的javascript表達式支持多個鍵值對。
<!DOCTYPE html> <html> <head> <title>vue中的指令(上)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .red{ color: red; } .green{ color: green; } .small{ font-size: 20px; } </style> </head> <body> <!-- v-bind:class --> <div id='box'> <h1 v-bind:class='{red: redActive }'>這是一段測試文本</h1> <!-- 對象類型的javascript表達式支持多個鍵值對，只要滿足值為true，對應的鍵都會以字符串的形式添加到class類名中 --> <h1 v-bind:class='{green: blackActive, small: smallActive}'>這也是一段測試文本</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { redActive: false, blackActive :true, smallActive :true, } }); </script> </body> </html>
可以看到，多個鍵值對時，只有對應鍵的值為true，元素就會存在多個類名。
#數組類型
接下來我們寫一個數組類型的javascript表達式
<!DOCTYPE html> <html> <head> <title>vue中的指令(上)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .red{ color: red; } .small{ font-size: 20px; } </style> </head> <body> <div id='box'> <h1 v-bind:class='[redActive,smallActive]'>這是一段測試文本</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { redActive: 'red', smallActive :'small', } }); </script> </body> </html>
可以看到數組表達式的語法和對象表達式的語法是完全不一樣的，是直接將數組的值作為元素的類名。
2.v-bind綁定元素的style屬性
v-bind綁定數據到style屬性，同樣可以指定數組類型和對象類型的javascript表達式。
#對象類型
為style綁定的對象類型的基本語法如下：
<tag v-bind:style="{ css屬性：vue中的數據或者css屬性值 }"> </tag>
或者
<tag v-bind:style="vue中的某個對象類型數據"> </tag>
css的屬性值可以直接是css的屬性值，也可以是vue中的data數據，或者直接使用vue中的某個對象數據。
注意：這里需要注意的是當css屬性是類似於font-size這樣中間帶橫線的屬性，有兩種方式書寫，一種是駝峰命名方式fontSize，一種是使用單引號括起來'font-size'。
我們先寫一個例子
<!DOCTYPE html> <html> <head> <title>vue中的指令(上)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .red{ color: red; } .small{ font-size: 20px; } </style> </head> <body> <div id='box'> <!-- css的屬性值可以直接是css的屬性值，也可以是vue中的data數據 --> <h1 v-bind:style="{color: 'red',fontSize: fontSize}">這是一段測試文本</h1> <!-- 直接使用vue中某個對象類型的數據 --> <h1 v-bind:style="styleObj">這是一段測試文本</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { fontSize: '20px',
// styleObj 對象類型的數據 styleObj: { color: 'green', fontSize: '30px' } } }); </script> </body> </html>
這個結果也是顯而易見，我們也就不多說了。
#數組類型
數組類型的javascript表達式可以是單個或者多個的vue對象數據。
<!DOCTYPE html> <html> <head> <title>vue中的指令(上)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .red{ color: red; } .small{ font-size: 20px; } </style> </head> <body> <div id='box'> <!-- v-bind:style綁定數組類型的javascript表達式，其中styleObject和borderStyle均為對象類型的數據--> <h1 v-bind:style="[styleObj, borderStyle]">這是一段測試文本</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { fontSize: '20px', styleObj: { color: 'green', fontSize: '30px' }, borderStyle: { border: '1px solid' } } }); </script> </body> </html>
可以看到，多個對象的數據以內聯樣式成功的作用到了元素上。
七.總結
1.v-html指令
- v-html會將數據中的html片段解析成DOM節點插入到元素子節點中。
- v-html指令會以innerHTML的方式更新元素的內容（即如果v-html指令所在的DOM元素存在子節點，那子節點就會被指令綁定的數據所覆蓋）。
2.v-text指令
- v-text會將數據中的html片段以文本的形式插入到元素子節點中。
- v-text指令會以innerText的方式更新元素的內容（即如果v-text指令所在的DOM元素存在子節點，那子節點就會被指令綁定的數據所覆蓋）。
3.v-bind指令
v-bind可以將數據綁定到元素的屬性上
v-bind綁定元素的class屬性
- 可指定的javascript表達式有兩種數據類型：對象和數組。
- 對象：對象的鍵值為true時，鍵會作為字符串添加到元素的類名。
- 數組：直接將數組的值作為元素的類名。
v-bind綁定元素的style屬性
- 可指定的javascript表達式有兩種數據類型：對象和數組。
- 對象：可指定的對象值有三種，css的屬性值，vue中的data數據，vue中的某個對象數據。
- 數組：數組元素為單個或者多個的vue對象數據
要加油鴨