光脚丫思考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
光脚丫思考Vue3与实战：第04章 模板语法 第02节 指令的参数+动态参数相关推荐
- 光脚丫思考Vue3与实战：第04章 模板语法 第03节 指令的修饰符
下面是本文的屏幕录像的在线视频: 第03节 指令的修饰符 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1J08bPvs6OI ...
- 光脚丫思考Vue3与实战：第04章 模板语法 第01节 概述+插值
下面是本文的屏幕录像的在线视频: 光脚丫思考Vue3与实战:第04章 模板语法 第01节 插值 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baid ...
- 光脚丫思考Vue3与实战：第04章 模板语法 第04节 指令的缩写
下面是本文的屏幕录像的在线视频: 第04节 指令的缩写 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1Dd2HeUXH6DZ ...
- 光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第01节 计算属性
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1MiGKmrzp40i1ZD_4borteQ ...
- 光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第02节 侦听器
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1qUekWio3fpWToT9PiECpEg ...
- 光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第03节 计算属性的其他玩法
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1h600_BRR9O2Lr87zVQNgEw ...
- 光脚丫思考Vue3与实战：第02章 安装Vue.js
下面是本文的屏幕录像的在线视频: 02-安装Vue.js 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本:https://pan.baidu.com/s/16594YUpNNrkjZf ...
- 光脚丫思考Vue3与实战：第03章 Vue实例
下面是本文的屏幕录像的在线视频: 03-Vue实例 04-生命周期示意图+钩子函数 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 03-Vue实例:https://pan.baid ...
- 光脚丫思考Vue3与实战：第01章 初步认识Vue3
下面是本文的屏幕录像的在线视频: 01-初步认识Vue.js-PART1 01-初步认识Vue.js-PART2 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: PART1:http ...
最新文章
- HardwareSoftwareTutorial
- CodeForces - 813E Army Creation(主席树+思维)
- Dapr闪电说 - Dapr落地云原生架构
- 4.13 | 学习笔记
- 用于实现 Web 服务的 SOA 编程模型，第 10 部分: SOA 用户角色
- 可穿戴设备的主流传感器介绍
- JavaScript中的try...catch...finally
- javascript -- 事件代理
- VSS2005的安装与配置
- 数据分析职位需求分析报告-数据来源于Boss直聘网站
- 手机怎么修改浏览器的html,手机设置默认浏览器
- 2019百度之星初赛第五题
- NCRE考试感想 四级嵌入式(上)
- HTML5 新增API学习总结
- java实现远程文件下载
- 微型计算机中内存比外存怎样,在同一台计算机中，内存比外存( )。
- 北斗三号b1c频点带宽_北斗三号B1C信号捕获技术研究
- 使用纯JAVA数据库驱动程序连接MySql数据库
- iOS公司开发者账号申请教程
- EDFS 推出了开创性的下一代 NFT 和去中心化存储