下面是本文的屏幕录像的在线视频:
第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