光脚丫思考Vue3与实战：第04章 模板语法 第04节 指令的缩写

下面是本文的屏幕录像的在线视频：

第04节 指令的缩写

温馨提示：

1、视频下载：线上视频被压缩处理，可以下载高清版本：

链接：https://pan.baidu.com/s/1Dd2HeUXH6DZ5RHAMDlkyWg 提取码：9j9x

2、示例代码：https://pan.baidu.com/s/1SyOvCLPOTG22qj_B5qtiew 提取码：eozw 

下图是文章大纲：

一、概述

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

二、v-bind

下面的代码是完整的v-bind指令的使用方法：

除了完整的办法以外，可以采用下面的简写方式，其效果也是一样的：

另外，Vue.js从2.6.0开始支持了动态参数，v-bind动态参数的简写方式可以如下代码所示：

三、v-on

下面的代码是完整的v-on指令的使用方法：

除了完整的办法以外，可以采用下面的简写方式，其效果也是一样的：

另外，Vue.js从2.6.0开始支持了动态参数，v-on动态参数的简写方式可以如下代码所示：

四、后记

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

五、参考资料

• https://v3.vuejs.org/guide/introduction.html
• https://cn.vuejs.org/v2/guide/syntax.html
• https://www.cnblogs.com/meiyh/p/6593462.html
• https://blog.csdn.net/wangxiaoxiaosen/article/details/73732752
• https://www.jianshu.com/p/a515f95d9cef
• https://www.jianshu.com/p/3f0ee1f6ec30
• https://blog.csdn.net/XuM222222/article/details/80276884