新的一天又開(kāi)始了作煌，小白博主又來(lái)分享他的成長(zhǎng)之路了。
今天想向大家介紹一下Vue中的指令
什么是vue指令
*在vue中提供了一些對(duì)于頁(yè)面 + 數(shù)據(jù)的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示
*類似于html頁(yè)面中的屬性 `<div v-xxx ></div>
v-bind 簡(jiǎn)寫(xiě) （:）
通俗的說(shuō)傍妒，v-bind的作用就是可以將變量放到標(biāo)簽的屬性上彰檬，變量的值改動(dòng)和屎，標(biāo)簽屬性值也是在改變的
修飾符
-
.prop- 作為一個(gè) DOM property 綁定而不是作為 attribute 綁定惹盼。 -
.camel- (2.1.0+) 將 kebab-case attribute 名轉(zhuǎn)換為 camelCase。(從 2.1.0 開(kāi)始支持) -
.sync(2.3.0+) 語(yǔ)法糖惑灵，會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的v-on偵聽(tīng)器山上。
用法
動(dòng)態(tài)地綁定一個(gè)或多個(gè) attribute，或一個(gè)組件 prop 到表達(dá)式英支。
在綁定 class 或 style attribute 時(shí)佩憾，支持其它類型的值，如數(shù)組或?qū)ο蟆?/p>
在綁定 prop 時(shí)干花，prop 必須在子組件中聲明妄帘。可以用修飾符指定不同的綁定類型池凄。
沒(méi)有參數(shù)時(shí)抡驼，可以綁定到一個(gè)包含鍵值對(duì)的對(duì)象。注意此時(shí) class 和 style 綁定不支持?jǐn)?shù)組和對(duì)象肿仑。
<!-- 綁定一個(gè) attribute -->
<img v-bind:src="imageSrc">
<!-- 動(dòng)態(tài) attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 縮寫(xiě) -->
<img :src="imageSrc">
<!-- 動(dòng)態(tài) attribute 名縮寫(xiě) (2.6.0+) -->
<button :[key]="value"></button>
<!-- 內(nèi)聯(lián)字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 綁定 可以綁定數(shù)組對(duì)象 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 綁定 可以綁定數(shù)組對(duì)象 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 綁定一個(gè)全是 attribute 的對(duì)象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過(guò) prop 修飾符綁定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 綁定致盟。“prop”必須在 my-component 中聲明尤慰。-->
<my-component :prop="someThing"></my-component>
<!-- 通過(guò) $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
注意：屬性值如果與常量拼接可以用(+)號(hào)或ES6的(${})
【詳情參考】https://cn.vuejs.org/v2/api/#v-bind
又是昏昏欲睡的一天馏锡，明天一定努力！拜伟端！
