光脚丫思考Vue3与实战：第04章 模板语法 第02节 指令的参数+动态参数

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

第02节 指令的参数+动态参数

温馨提示：

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

链接：https://pan.baidu.com/s/11_hwQF-cBQDtWX1WzdjmmQ 提取码：oro0 

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

下图是文章大纲：

一、概述

指令(Directives)是带有v-前缀的特殊attribute。指令attribute的值预期是单个JavaScript表达式(v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。回顾我们在介绍中看到的例子：

 

这里，v-if指令将根据表达式seen的值的真假来插入/移除<span>元素。

二、参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind指令可以用于响应式地更新HTML attribute：

示例代码：06-Bind.html
在这里href是参数，告知v-bind指令将该元素的href attribute与表达式url的值绑定。
另一个例子是v-on指令，它用于监听DOM事件：

示例代码：06-Bind.html
在这里参数是监听的事件名，比如上述代码的事件名就是click。我们也会更详细地讨论事件处理。

三、动态参数

从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数：

示例代码：06-DynamicParameter.html
这里的attributename会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的Vue实例有一个数据property attributename，其值为"href"，那么这个绑定将等价于v-bind:href。
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

示例代码：06-DynamicParameter.html
在这个示例中，当eventname的值为"click"时，v-on:[eventname]将等价于v-on:click。

1、对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为null。这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。 

2、对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在HTML attribute名里是无效的。例如：

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
在DOM中使用模板时(直接在一个HTML文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把attribute名全部强制转为小写：

示例代码：06-DynamicParameter.html
如上面的代码所示，浏览器的控制台会出现一个警告错误，如下图所示：

如上图所示，数据的名称是attributename，而data中的数据名却是attributeName。 

四、参考资料

• 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