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