铁路校友博客-卢松松的追随者

一个互联网十五年的老站长-15years weber 铁路校友AIO/P Good Luck To You!

vue 的v-on与v-bind简写、缩写

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 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。


发表评论:

Powered By Z-BlogPHP 1.7.3

关于我们:本人从2010年开始网络创业, 自学 建站,8年手机副业经验。网站内容:本站是本人记录生活感悟,读书学习的网站,希望能对大家有所帮助。网名:光影 职业:SEO营销顾问籍贯:四川广安,现定居成都 电话:个V:wx374241337 邮箱:374241337@qq.com 【腾讯云】轻量新用户上云福利,2核2G4M 低至 65元/年 , 超大容量云硬盘 0.5折起!