認識vue指令
???????? vue的指令directive只是dom的行間屬性兴使，vue給這類屬性賦予了一定的意義，來實現(xiàn)特殊的功能
所有的指令都是以 v- 開頭
指令的職責是照激，當表達式的值改變時发魄，將其產(chǎn)生的連帶影響，響應式地作用于DOM
那么接下來我們可以看看vue提供了哪些指令
( 所有指令的值都是表達式俩垃！ )
v-text：文本指令
v-cloak指令的使用：處理頁面閃爍問題
第一步要給元素添加v-cloak
第二步：手動的給這個元素添加 display : none
v-html指令：雙大括號會將數(shù)據(jù)解釋為普通文本励幼，而非HTML代碼，為了輸出真正的HTML口柳，你將需要用到v-html指令
把html字符串當成html渲染苹粟，類似于innerHTML
使用v-html指令的div，將數(shù)據(jù)中的h1解析成了標簽元素
但是一定要注意的是跃闹，v-html指令一定要慎用嵌削，可能會攻擊，如果在數(shù)據(jù)中添加一個script標簽也能識別望艺，那么script里面就可能會添加攻擊你的腳本苛秕。
所以如果要使用v-html指令，一定要是可信的找默，不信任的會有問題艇劫。
總結三種將數(shù)據(jù)渲染的頁面的方法
1、雖然上面的三種方法可以將數(shù)據(jù)渲染到頁面上惩激，但是工作中最常用的是大胡子語法
2店煞、插值表達式最常用但是在加載的時候會出現(xiàn)閃爍的問題蟹演，無法將html格式數(shù)據(jù)渲染，只能當字符串展示顷蟀。
3酒请、v-text雖然沒有數(shù)據(jù)加載閃爍問題，但是會將標簽中間的數(shù)據(jù)覆蓋鸣个，也不能渲染html格式的數(shù)據(jù)羞反。
4、v-html謹慎使用會出現(xiàn)xss攻擊的風險毛萌。
v-once指令
平時我們使用Mustache語法苟弛，包括v-text，v-html指令渲染的頁面都是具有響應式的阁将，當數(shù)據(jù)發(fā)生變化膏秫，視圖也會跟著改變。
v-pre指令
跳過代碼編譯
v-bind指令：動態(tài)屬性綁定
未使用v-bind指令的class屬性的值是一個字符串做盅，表示給標簽添加一個className的類名
使用v-bind指令的class屬性值不在是字符串缤削，而是表達式，表達式里的className不是一個普通的字符吹榴，而是一個變量亭敢，Vue實例data中的數(shù)據(jù)。
簡寫方式
Vue對于v-bind指令還提供了簡寫的方式 ：
vue屬性的動態(tài)綁定
通過上面的學習图筹，我們知道帅刀，v-bind指令可以讓我們將屬性值關聯(lián)到Vue data數(shù)據(jù)中，這樣的屬性远剩，我們稱作屬性的動態(tài)綁定扣溺。
屬性的動態(tài)綁定比較符合vue以數(shù)據(jù)驅動的模式，如果需要修改哪個屬性值瓜晤，就可以直接通過修改vue數(shù)據(jù)即可锥余。
例如：項目中的輪播就像輪播圖中的數(shù)據(jù)，在替換輪播數(shù)據(jù)的時候就會非常便捷痢掠。
注意：
動態(tài)屬性綁定驱犹，在我們需要的時候在使用，如果一個屬性的值是固定的足画，并不會在未來發(fā)生改變雄驹，就沒有必要綁定屬性。
但在屬性動態(tài)綁定過程中有兩個屬性比較特殊锌云，這兩個屬性就是class和style屬性荠医。
在將 v-bind 用于class和style時，Vue.js做了專門的增強桑涎，表達式結果的類型除了字符串之外彬向，還可以是對象或數(shù)組。
使用動態(tài)綁定class屬性的div攻冷，class屬性值被替換成為了vue data屬性中的數(shù)據(jù)娃胆，也就是說動態(tài)綁定class屬性的box是一個變量。
沒有使用動態(tài)綁定class屬性的值就是一個普通的字符串divBox等曼。
動態(tài)綁定的class與普通class混用注意事項
動態(tài)綁定class和沒有綁定的class可以同時使用里烦，步?jīng)_突，Vue會將動態(tài)class屬性與普通class屬性在最后顯示是合并到一起禁谦。
數(shù)組語法：動態(tài)綁定多個類名胁黑，需要數(shù)組的寫法
因為動態(tài)綁定的class值是表達式，我們就可以利用數(shù)組來羅列多個動態(tài)綁定的類名州泊。
因此可以 v-bind:class 動態(tài)綁定class值中協(xié)商數(shù)組丧蘸，使用數(shù)組來羅列多個綁定的class類名。
這樣渲染出來就會有兩個類：divbox和pbox
動態(tài)綁定class值的處理器
既然動態(tài)綁定class的值是表達式遥皂，那么我們就可以在表達式里力喷，寫一些基本的表達式處理數(shù)據(jù)，通過邏輯的判斷來決定要不要給dom元素添加這個類名演训。
注意：
??????? 不推薦使用三目運算去做類名切換弟孟，因為如果一個標簽上有多個需要動態(tài)切換的類名，會出現(xiàn)后面的動態(tài)綁定的class沒有任何效果样悟，所以這種寫法是有問題的拂募，同時我們也會發(fā)現(xiàn)三目表達式切換類名不是特別的友好。
綁定行內樣式
?? v-bind動態(tài)綁定屬性除了class比較特殊外，還有一個style行內樣式屬性也比較特殊骤铃。
未使用vue動態(tài)綁定屬性的行內樣式
分析：
1絮识、和其他動態(tài)綁定屬性一樣，有時候爬凑，我們就希望樣式的值是可以動態(tài)變化的
2、那么我們就需要使用到v-bind動態(tài)綁定屬性的指令
3试伙、同時使用動態(tài)綁定屬性以后嘁信，style屬性的值將變成表達式，以前的寫法就不合適了
4疏叨、既然是表達式潘靖，我們就可以使用對象和數(shù)組方式羅列樣式
對象語法
動態(tài)綁定style屬性的基本用法
1、如果使用動態(tài)綁定屬性方法綁定行內樣式卦溢，那么style屬性值將不再是字符串，而是表達式单寂。
2、動態(tài)綁定style的值既然是表達式宣决，那么就可以在表達式中使用對象。
3尊沸、如果值為對象，那么對象的屬性名則為CSS樣式屬性洼专，值為樣式的值棒掠。
4屁商、注意烟很，此時對象中的屬性值，可以是確定的樣式值棒假，也可以是vue的數(shù)據(jù)變量溯职。
5、因此有些值不能再像style標簽中一樣書寫帽哑，以前使用不加引號谜酒，現(xiàn)在使用必須加引號。
表達式里的大括號即為JS對象妻枕，對象屬性的標識符是不支持-連字符的
如果我們有兩種處理方案
1僻族、駝峰式
2、如果要使用連字符屡谐，就需要添加雙引號述么，將屬性變成字符串的寫法
