VUE中常见频繁用到的指令缩写(v-bind、v-on)(官方介绍)

r囧r小猫 2024-03-27 09:15 10阅读 0赞

![74243b20302142cb9959ae253450b1a0.png][]

`v-` 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，`v-` 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的[单页面应用程序 (SPA - single page application)][_SPA - single page application] 时，`v-` 前缀也变得没那么重要了。因此，Vue 为 `v-bind` 和 `v-on` 这两个最常用的指令，提供了特定简写：

#### [v-bind 缩写][v-bind] ####

<a v-bind:href="url">...</a>
    
    
    <a :href="url">...</a>
    
    
    <a :[key]="url"> ... </a>

#### [v-on 缩写][v-on] ####

<a v-on:click="doSomething">...</a>
    
    
    <a @click="doSomething">...</a>
    
    
    <a @[event]="doSomething"> ... </a>

它们看起来可能与普通的 HTML 略有不同，但 `:` 与 `@` 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

[74243b20302142cb9959ae253450b1a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/35a94891a3904ababcb3063deed28dba.png
[_SPA - single page application]: https://en.wikipedia.org/wiki/Single-page_application
[v-bind]: https://v2.cn.vuejs.org/v2/guide/syntax.html#v-bind-%E7%BC%A9%E5%86%99
[v-on]: https://v2.cn.vuejs.org/v2/guide/syntax.html#v-on-%E7%BC%A9%E5%86%99