縮寫

v-?前綴作為一種視覺(jué)提示，用來(lái)識(shí)別模板中 Vue 特定的 attribute。當(dāng)你在使用 Vue.js 為現(xiàn)有標(biāo)簽添加動(dòng)態(tài)行為 (dynamic behavior) 時(shí)，v-?前綴很有幫助，然而，對(duì)于一些頻繁用到的指令來(lái)說(shuō)，就會(huì)感到使用繁瑣。同時(shí)，在構(gòu)建由 Vue 管理所有模板的單頁(yè)面應(yīng)用程序 (SPA - single page application)?時(shí)，v-?前綴也變得沒(méi)那么重要了。因此，Vue 為?v-bind?和?v-on?這兩個(gè)最常用的指令，提供了特定簡(jiǎn)寫：

v-bind?縮寫

<!-- 完整語(yǔ)法 --> <a v-bind:href="url">...</a><!-- 縮寫 --> <a :href="url">...</a><!-- 動(dòng)態(tài)參數(shù)的縮寫 (2.6.0+) --> <a :[key]="url"> ... </a>

v-on?縮寫

<!-- 完整語(yǔ)法 --> <a v-on:click="doSomething">...</a><!-- 縮寫 --> <a @click="doSomething">...</a><!-- 動(dòng)態(tài)參數(shù)的縮寫 (2.6.0+) --> <a @[event]="doSomething"> ... </a>

它們看起來(lái)可能與普通的 HTML 略有不同，但?:?與?@?對(duì)于 attribute 名來(lái)說(shuō)都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會(huì)出現(xiàn)在最終渲染的標(biāo)記中。縮寫語(yǔ)法是完全可選的，但隨著你更深入地了解它們的作用，你會(huì)慶幸擁有它們。

?

?

var vm = new Vue({ el: '#example', data: { message: 'Hello' },

computed: { // a computed getter reversed

Message: function () { // `this` points to the vm instance return this.message.split('').reverse().join('')

}

}

})

?

?

可為：

?

var vm = new Vue({ el: '#example', data: { message: 'Hello' },

computed: { // a computed getter reversed

Message（）{ // `this` points to the vm instance return this.message.split('').reverse().join('')

}

}

})

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Vue中的变量绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。