縮寫

v-?前綴作為一種視覺提示，用來識別模板中 Vue 特定的 attribute。當你在使用 Vue.js 為現有標簽添加動態行為 (dynamic behavior) 時，v-?前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的單頁面應用程序 (SPA - single page application)?時，v-?前綴也變得沒那么重要了。因此，Vue 為?v-bind?和?v-on?這兩個最常用的指令，提供了特定簡寫：

v-bind?縮寫

<!-- 完整語法 --> <a v-bind:href="url">...</a><!-- 縮寫 --> <a :href="url">...</a><!-- 動態參數的縮寫 (2.6.0+) --> <a :[key]="url"> ... </a>

v-on?縮寫

<!-- 完整語法 --> <a v-on:click="doSomething">...</a><!-- 縮寫 --> <a @click="doSomething">...</a><!-- 動態參數的縮寫 (2.6.0+) --> <a @[event]="doSomething"> ... </a>

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

?

?

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('')

}

}

})

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

總結

以上是生活随笔為你收集整理的Vue中的变量绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。