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

9.3.1　Vue指令概述
Vue.js框架设计了一个复杂且完整的“指令”系统，用于实现较
为复杂的动态页面渲染功能。在Vue.js框架下，一般的指令
（ Directives ） 都 是 指 带 有 前 缀 （ “v-” ） 的 特 殊 属 性
（Attribute）。
Vue指令的功能是，当表达式的值（一般对应property属性）发生
改变时，将其产生的连带变化“响应式”地作用于D?M，从而完成页面
的渲染操作。关于Vue指令的具体形式，请参考下面的简单示例：

<p v-if="seen">Now, you can see me!</p>

上面代码示例中的v-if就是一个Vue指令，由前缀（v-）开头，连
接具体参数指令（if）。顾?思义，v-if就是一个条件表达式指令。
从这个代码示例中可以看到，Vue指令的预期值是单个的JavaScript表
达式。当然也有例外情况，比如：v-for指令，后面会单独对其进行介
绍。
9.3.2　v-if条件表达式指令
Vue.js框架设计了一个v-if指令，用于实现条件表达式的判断功
能。这个v-if指令实现了JavaScript脚本语言的“if ? if else ? if
elseif else”条件表达式的功能，也就是将条件表达式逻辑嵌入到
Vue代码中去执行。
在Vue代码中使用v-if指令，与在JavaScript代码中使用“if-
elseif-else”语法略有不同，使用v-if指令的Vue代码在格式上略显
烦琐，需要设计人员仔细审查代码逻辑，从而避免出现逻辑错误。
下面还是通过具体的代码实例进行讲解，请看这个通过v-if指令
“显示”和“?藏”页面元素的应用。
【 代 码 9-4 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义其id属性值（"id-di?-derecti?es-if"）。在第0?行代码中，
分别通过?-if指令?断两个对象（js和?ue）的布尔值，从而实现
在页面中“显示”和“隐藏”元素的功能。
第06～12行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。同时，这段代码创建Vue对象的入口，并将该对
象所定义的内容渲染到页面中对应的DOM元素中。具体说明如下：
■　第0?行代码中，通过el属性绑定DOM元素（"id-di?-
derecti?es-if"）。
■　第08～11行代码中，通过data属性进行绑定数据操作。
其中，第0?、10行代码分别定义了两个布尔值属性（js
和?ue），并初始化为布尔值（true和false），对应第
0?行代码中引用的两个对象（js和?ue）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面效果如图9.4所示。

 

 如图9.4中的箭头所示，页面中仅显示了“JavaScript”信息，而
“Vue.js”信息没有显示出来。这个结果与第09、10行代码定义的两
个布尔值属性值（js: true和vue: false）相对应，v-if指令判断为
true，则显示页面元素，v-if指令判断为false，则?藏页面元素。
下面再介绍一个通过v-if和v-else指令实现“显示”和“?藏”
页面元素的应用。
【 代 码 9-5 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层及其id
属性值（"id-di?-derecti?es-if"）。在第0?行代码中，分别通
过?-if指令?断对象（b_tf）的布尔值，如果值为false，则执行
相对应的?-else指令，从而实现在页面中“显示”和“隐藏”元
素的功能。
第06～12行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。其中，第0?行代码定义了一个布尔值属性
（b_tf），并初始化为布尔值（false），对应第0?行代码中引用
的对象（b_tf）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面效果如图9.5所示。

 

如图9.5中的箭头所示，页面中仅显示了“Vue.js”信息，而
“JavaScript”信息没有显示出来，这个结果与第09行代码定义的布
尔值属性值（b_tf: false）相对应，v-if指令判断为false，则会去
执行v-else指令引用的页面元素。
最后再介绍一下如何通过完整的v-if，v-else-if和v-else指令，
来实现“显示”和“?藏”页面元素的方法。
【 代 码 9-6 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

 

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义其id属性值（"id-di?-derecti?es-if"）。其中，第0?～0?行
代码通过?-if，?-else-if和?-else指令实现多重条件的?断，具
体说明如下：
■　在第0?行代码中，通过?-if指令?断对象（ty?e）的值
是否等于字符J，如果结果为true（真），则在页面中显
示字符串“Ja?aScri?t”。
■　在第05行代码中，通过?-else-if指令?断对象（ty?e）
的值是否等于字符V，如果结果为true，则在页面中显示
字符串“Vue.js”。
■　在第06行代码中，通过?-else-if指令?断对象（ty?e）
的值是否等于字符A，如果结果为true，则在页面中显示
字符串“both Ja?aScri?t and Vue.js”。
■　在第0?行代码中，如果前面的?断结果没有一个为
true，则在页面中显示字符串“None”。
第11～16行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。其中，第1?行代码定义了一个属性（ty?e），并
初始化为字符（'A'），对应第0?～0?行代码中引用的对象
（ty?e）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面效果如图9.6所示。

 

如图9.6中的箭头所示，页面中显示了“type='A'”对应的信息。
假设在第14行代码中将属性（type）的值初始化为任意字符（例
如：'N'），则页面效果如图9.7所示。

 

如图9.7中所示，由于条件判断结果没有任一项为真，则页面中显
示了第07行代码中v-else指令对应的信息。

9.3.3　v-sho?显示指令
Vue.js框架还设计了一个v-show指令，用于实现“显示”或“?
藏”页面元素的功能。虽然看起来，这个v-show指令实现的效果与v-
if指令实现的效果类似，但是在底层实现上还是有区别的。
使用v-if指令“?藏”的页面元素会真正地被删除，在最终的
HTML页面D?M树中不会出现这些元素。而使用v-show指令“?藏”的页
面元素仅仅就是?藏起来，在最终的HTML页面D?M树中这些元素还是存
在的，只是被CSS代码?藏不显示而已。
下面通过具体的代码实例进行讲解，请看这个通过v-show和v-if
指令“显示”和“?藏”页面元素的应用。
【 代 码 9-7 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

 

【代码说明】
第01～11行代码中，在页面中通过<di?>元素定义了一个层，并定
义其id属性值（"id-di?-derecti?es-sho?"）。第0?、05行代码
分别通过?-sho?指令?断两个对象（nosho?和sho?）的布尔值。
第08、0?行代码分别通过?-if指令?断另外两个对象（js和?ue）
的布尔值。这样写代码，我们就可以针对?-sho?指令和?-if指令
在页面中的执行结果进行对比。
第1?～21行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。其中，第15～20行代码通过data属性进行绑定数
据操作，具体说明如下：
■　第16、1?行代码分别定义了两个布尔值属性（nosho?和
sho?），并初始化为布尔值（false和true），对应第0?
行和第05行代码中引用的两个对象（nosho?和sho?）。
■　第18、1?行代码分别定义了两个布尔值属性（js和
?ue），并初始化为布尔值（true和false），对应第08
行和第0?行代码中引用的两个对象（js和?ue）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面效果如图9.8所示。

 

如图9.8中的箭头所示，页面中显示了第05行代码定义的
“Vue.js”信息，第04行代码定义的“JavaScript”信息没有显示出
来。这个结果与第16、17行代码中定义的两个布尔值属性值（noshow:
false和show: true）相对应。另外，页面中显示了第08行代码定义的
“JavaScript”信息，第09行代码定义的“Vue.js”信息没有显示出
来。这个结果与第18、19行代码中定义的两个布尔值属性值（js:
true和vue: false）相对应。
可以看到，v-show指令和v-if指令执行后，在页面中得到了相同
的显示效果。但是请注意，在底层代码逻辑上二者是不同的，如图9.9
所示。

 

如图9.9中的箭头和标识所示，v-show指令判断结果为false时，
会通过CSS代码将元素?藏（display: none）起来。而v-if指令判断
结果为false时，则会将元素直接删除掉。
9.3.4　使用<template>元素渲染分组
本小节介绍Vue.js框架的<template>元素，这个<template>元素
本质上是一个虚拟元素，在最终的页面代码中是不体现的。但是，这
个<template>元素在Vue.js框架下又十分有用，可以配合v-if指令完
成很多强大的功能。
在Vue.js框架中，v-if指令必须和页面元素配合在一起使用。从
前面介绍的代码实例中可以看到，通过v-if指令的条件选择功能，可
以实现一组页面元素的切换效果。这时候，就可以通过<template>元
素将这组页面元素包裹起来，而这个<template>元素在最终的页面中
不会渲染出来。从这个意义上讲，Vue.js框架定义的<template>元素
更像是一个一个抽象的页面元素包裹器。
下面通过具体的代码实例进行讲解，请看这个通过<template>元
素包裹一组页面元素的应用。
【 代 码 9-8 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

 

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义其id属性值（"id-di?-derecti?es-tem?l"）。第0?～05行代码
和第06～08行代码分别通过<tem?late>元素包裹“用户名
（Username）”和“邮箱（Email）”两组页面元素，后面会在这
段代码的基础上进行功能扩展。
第1?～21行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。其中，第1?行代码通过el属性绑定了页面元素
（"id-di?-derecti?es-tem?l"）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面效果如图9.10所示。

 

如图9.10中的箭头所示，页面中显示了第04行和第07行代码定义
的登录信息，但从浏览器调试窗口中是看不到<template>元素信息
的。这一点印证了前文中关于<template>元素的介绍，该元素在最终
的页面中不会被渲染出来。
那么，<template>元素在实际中如何使用呢？请看这个通过
<template>元素切换显示登录信息的应用。
【 代 码 9-9 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

 

【代码说明】
在第0?行代码中，通过<tem?late>元素包裹了一个“用户名
（ Username ） ” 页 面 元 素 ， 并 通 过 ?-if 指 令 ? 断 对 象
（loginty?e） 的布尔值，根据?断结果显示该“用户名
（Username）”页面元素。
在 第 0? 行 代 码 中 ， 通 过 <tem?late> 元 素 包 裹 一 个 “ 邮 箱
（Email）”页面元素，并通过?-else指令根据前面?-if指令的?
断结果显示该“邮箱（Email）”页面元素。
第10～1?行代码中，通过<button>元素定义了一个按钮，并注册
它的单击事件方法（on_btn_loginty?e()），用于执行切换对象
（loginty?e）布尔值的操作。

第1?～2?行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。其中，第21～2?行代码通过data属性进行绑定数
据操作，具体说明如下：
■　第22行定义了一个布尔值属性（loginty?e），并初始化
为布尔值（true），对应第0?行代码中引用的对象
（loginty?e）。
第 26 ～ 28 行 定 义 的 脚 本 代 码 是 单 击 事 件 方 法
（on_btn_loginty?e()）的具体实现过程。其中，第2?行代码通
过?m对象的$data实例引用对象（loginty?e），并进行布尔值取
反操作，从而实现在页面中动态切换显示登录信息的效果。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面初始效果如图9.11所示。

 

如图9.11中的箭头和标识所示，初始页面中只显示第04行代码定
义的“用户?（Username）”信息。尝试单击“Change Login Type”
按钮来改变登录信息，页面效果如图9.12所示。

 

如图9.12中的箭头和标识所示，单击“Change Login Type”按钮
后，页面中的显示信息切换成第07行代码定义的“邮箱（Email）”信
息。
另外，从图9.11和图9.12中可以看到，<template>元素在最终的
页面中并没有被?载进去，在Vue.js框架中仅仅是作为虚拟元素使用
的。
9.3.5　v-for循环指令
既然Vue.js框架设计了v-if条件指令，自然也不会忽略掉v-for循
环指令。这个v-for指令基本实现了JavaScript脚本语言的for循环语
句功能，将循环表达式逻辑嵌入到Vue代码中去执行。
下面通过具体的代码实例进行讲解，请看这个通过v-for指令定义
页面列表的应用。
【 代 码 9-10 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

 

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义其id属性值（"id-di?-derecti?es-for"）。具体说明如下：
■　第02～06行代码中，通过<ol><li>元素定义了一个列
表。
■　第0?行代码中，在<li>元素中通过?-for指令定义一个循
环语句块（li in liArr）。其中，变量（li）是循环自
变量，变量（liArr）是一个对象数组，变量（li）在对
象数组（liArr）中迭代。
■　第0?行代码中，通过变量（li）迭代对象（liArr）的
txt属性值，从而在页面中生成一个列表。
第10～25行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。具体说明如下：
■　第11行代码中，通过el属性绑定DOM元素（"id-di?-
derecti?es-for"）。
■　第12～2?行代码中，通过data属性进行绑定数据操作。
其中，第1?～2?行代码定义了一个对象数组（liArr）和
一个txt属性，并进行初始化操作，对应第0?行代码中引
用的对象（li.txt）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面效果如图9.13所示。

 

如图9.13中的箭头所示，页面中通过v-for循环指令，显示出由对
象数组（liArr）定义的一个列表。
通过上面的代码实例，我们已经体会到了v-for循环指令的强大。
通常，在复杂的HTML页面设计中需要定义很多类型相同的元素，此时
通过传统JavaScript脚本自动生成元素属性（如：id、class、style
等）的工作就会很烦琐。
而在Vue.js框架下，通过v-for循环指令自动生成这些元素属性就
很方便，相信这也是优秀的Vue.js前端框架能够被广大设计人员喜爱
的重要原因之一。下面通过具体的代码实例，讲解一下如何自动生成
一组<button>元素的id属性的方法。
【 代 码 9-11 】 （ 详 见 源 代 码 vuederectives 目 录 中 的
vuederectives.html文件）

 

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层及其id
属性值（"id-di?-derecti?es-for"）。具体说明如下：
■　第02～06行代码中，通过<tem?late>元素包裹一个
<button>按钮元素。
■　第0?行代码中，在<button>元素中通过?-for指令定义了
一个循环语句块（btn in btnArr），变量（btn）是循
环自变量，变量（btnArr）是一个对象数组，变量
（btn）在对象数组（btnArr）中迭代。另外，通过?-
bind?id指令绑定id属性，id属性值通过一个自定义方法
（genId()）自动获取。
■　第0?行代码中，通过变量（btn）迭代对象（btnArr）的
txt属性值，从而在页面中自动生成一组按钮。
第10～?5行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。具体说明如下：
■　第11行代码中，通过el属性绑定DOM元素（"id-di?-
derecti?es-for"）。
■　第12～2?行代码中，通过data属性进行绑定数据操作。
其 中 ， 第 1? ～ 28 行 代 码 定 义 了 一 个 对 象 数 组
（btnArr）、一个id属性和一个txt属性，并进行初始化
操作。这里的id属性对应第0?行代码中genId()方法的参
数（btn.id），txt属性对应第0?行代码中引用的对象
（btn.txt）。
■　第?1～??行代码是genId()方法的具体实现过程，通过参
数返回按钮<button>元素的id属性值。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuederectives.html页面，页面效果如图9.14所示。

 

如图9.14中的箭头和标识所示，页面中显示了一组自动生成的按
钮，在浏览器调试窗口中可查看到按钮自动生成的id属性值。