Vue.js+Node.js全栈开发教程：Vue.js指令参数详解

9.4.1　Vue.js指令接收参数
针对Vue.js框架中的一些指令，可以通过接收一个“参数”来绑
定一些功能，这个接收的参数需要在指令?称之后用冒号（:）来连
接。例如，在前面的【代码9-10】中用到过绑定元素id属性，就是通
过v-bind指令用冒号（:）连接id属性描述符（v-bind:id）来实现
的。
下面介绍一个通过v-bind指令接收href参数，绑定超链接<a>元素
的地址属性的代码实例。
【 代 码 9-12 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义其id属性值（"id-di?-derecti?es-bind-href"）。具体说明如
下：
■　第0?行代码中，在<a>元素中通过?-bind指令接收一个参
数href，并绑定超链接<a>元素的地址属性，属性值为一
个对象（url）。
第0?～12行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。具体说明如下：
■　第08行代码中，通过el属性绑定DOM元素（"id-di?-
derecti?es-bind-href"）。
■　第0?～11行代码中，通过data属性绑定数据操作。其
中，第10行代码定义一个对象（url），并初始化为
Vue.js 框 架 的 中 文 官 方 地 址
（"htt?s???cn.?uejs.org"）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面效果如图9.15所示。

 

如图9.15中的箭头所示，页面中显示了第03行代码定义生成的超
链接（目标地址见浏览器控制台中的信息），单击该超链接会跳转到
目标地址（"https://cn.vuejs.org"）。
除了前面介绍的通过v-bind指令接收id属性参数，本节介绍的通
过v-bind指令接收href属性参数，还有通过v-on指令绑定监听click事
件，都属于通过Vue.js指令接受参数的范畴。设计人员在Vue.js框架
下，可以大胆地使用这些指令来接受相关参数来实现绑定HTML元素属
性的操作。
9.4.2　Vue.js指令接收动态参数
上一小节介绍了Vue.js指令接收参数的用法，读者应该会注意
到，这些接收的参数都是已经定义好的“静态”参数。其实，还可以
将这些接收的参数设计成为“动态”的，就是通过JS表达式来定义这
些参数。
将Vue.js指令接收的参数用JS表达式来定义，就可以事先不指定
具体取值，而是事后通过表达式动态运算来获取具体值，从而实现
“动态”参数的功能。Vue.js指令接收的动态参数需要使用方括号（[
]）来定义，方括号（[ ]）内为通过JS表达式表示的参数。
下面介绍一个通过v-on指令，在<input>元素上接收“动态”事件
参数的代码实例。
【 代 码 9-13 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

 

【代码说明】
第01～08行代码中，在页面中通过<di?>元素定义了一个层，并定
义其id属性值（"id-di?-derecti?es-bind-in?ut"）。具体说明
如下：
■　第0?行代码中，在<in?ut ty?e="text">元素中通过?-on
指令接收一个动态参数“[ty?e ? focus ? change]”，
通过?断对象“ty?e”的布尔值来选取具体事件（focus
事件或者change事件），参数值为一个事件方法
（e?ent）。
■　第06、0?行代码定义一组<button>按钮元素，通过?-on
指令接收单击事件click参数，用于切换对象（ty?e）的
布尔值。
第11～25行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。具体说明如下：
■　第1?～1?行代码中，通过data属性进行绑定数据操作。
其中，第1?行代码定义一个对象（ty?e），并初始化为
空（null）值。第15行代码定义一个对象（focus），初
始化为focus事件名称。第16行代码定义一个对象
（change），并初始化为change事件名称。
■　第18～2?行代码中，通过methods属性进行绑定方法操
作。其中，第1?～2?行代码是事件方法（e?ent）的具体
实现，通过?断对象（ty?e）的布尔值向浏览器控制?
中输出相应的日志信息。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面初始效果如图9.16所示。

 

如图9.16中的箭头所示，尝试在页面中单击文本输入框，使其获
取用户输入焦点（focus），页面效果如图9.17所示。

 

如图9.17中的箭头所示，浏览器控制台中输出了文本输入框获取
用户输入焦点事件的日志信息。假如上述操作无信息反馈，可以先单
击“event:focus”按钮，将当前<button>按钮的响应事件切换到
focus事件上。
继续单击“event:change”按钮，将当前<button>按钮的响应事
件切换到change事件上。然后，尝试在页面中修改文本输入框中的文
本内容，触发其文本改变事件（change），页面效果如图9.18所示。

 

如图9.18中的箭头和标识所示，当在页面中的文本输入框中修改
文本后，浏览器控制台中输出了文本改变事件（change）的日志信
息。
9.4.3　通过Vue.js指令动态参数改变元素类型
Vue.js指令接收动态参数的使用方式非常灵活，除了动态修改事
件类型外，还可以动态修改元素类型。
下面介绍一个通过Vue.js指令接收动态参数的方式，动态切换文
本输入框和按钮的代码实例。
【 代 码 9-14 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

 

 【代码说明】
第01～12行代码中，在页面中通过<di?>元素定义了一个层，并定
义其id属性值（"id-di?-derecti?es-bind-in?ut"）。具体说明
如下：
■　第0?～06行代码中，在<in?ut>元素中通过?-bind指令接
收了一个动态参数对象[attr.ty?e.name]，参数值为对
象（attr.ty?e.?al）。还通过?-bind指令接收一个参数
?alue，参数值为对象（attr.?alue）。
■　第0?行和第10行代码定义了一组<button>按钮元素，通
过?-on指令接收单击事件click参数，参数值为事件方法
（e?ent），通过在调用该方法时传递布尔值参数来实现
元素类型的切换功能。
第15～?1行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。具体说明如下：
■　第1?～26行代码中，通过data属性进行绑定数据操作。
其中，第1?～25行代码定义一个JSON对象（attr），该
对象内部定义了切换<in?ut>元素类型所需的参数属性。
■　第2?～?0行代码中，通过methods属性进行绑定方法操
作。其中，第2?～??行代码是事件方法（e?ent）的具体
实现，通过?断参数（b）的布尔值实现<in?ut>元素类
型的动态切换操作。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面初始效果如图9.19所示。

如图9.19中的箭头所示，页面中初始显示的是一个文本输入框元
素。然后，尝试在页面中单击“type:button”按钮来切换元素类型，
页面效果如图9.20所示。

 

如图9.20中的箭头所示，页面中所显示的元素已经由一个文本输
入框元素切换为一个按钮了。