vue的模板渲染
0 Views 前端 with
本文字数:1,537 字 | 阅读时长 ≈ 6 min

vue的模板渲染

0 Views 前端 with
本文字数:1,537 字 | 阅读时长 ≈ 6 min

本节主要讲述vue的模板渲染

当获取到后端数据后,我们会把它按照一定的规则加载到写好的模板中,输出成在浏览器中显示的 HTML,这个过程就称之为渲染。而 Vue.js 是在前端(即浏览器内)进行的模板渲染。本节主要介绍 Vue.js 渲染的基本语法。

1、前后端渲染对比

早期的 Web 项目一般是在服务器端进行渲染,服务器进程从数据库获取数据后,利用后端模板引擎,甚至于直接在 HTML 模板中嵌入后端语言(例如 JSP),将数据加载进来生成HTML,然后通过网络传输到用户的浏览器中,然后被浏览器解析成可见的页面。而前端渲染则是在浏览器里利用 JS 把数据和 HTML 模板进行组合。两种方式各有自己的优缺点,需要更具自己的业务场景来选择技术方案。

前端渲染的优点在于:

① 业务分离,后端只需要提供数据接口,前端在开发时也不需要部署对应的后端环境,通过一些代理服务器工具就能远程获取后端数据进行开发,能够提升开发效率。

② 计算量转移,原本需要后端渲染的任务转移给了前端,减轻了服务器的压力。

而后端渲染的优点在于:

① 对搜索引擎友好。

② 首页加载时间短,后端渲染加载完成后就直接显示 HTML,但前端渲染在加载完成后还需要有段 js 渲染的时间。

Vue.js 2.0 开始支持服务端渲染,从而让开发者在使用上有了更多的选择。

2、条件渲染

Vue.js 提供 v-if,v-show,v-else,v-for 这几个指令来说明模板和数据间的逻辑关系,这基本就构成了模板引擎的主要部分。下面将详细说明这几个指令的用法和场景。

2.1、v-if/v-else

v-if和v-else的作用是根据数据值来判断是否输出该DOM元素,以及包含的子元素。例如:

1
<div v-if="yes">yes</div>

如果当前 vm 实例中包含 data.yes = true,则模板引擎将会编译这个 DOM 节点,输出

yes

我们也可以利用 v-else 来配合 v-if 使用。例如:

1
2
<div v-if="yes">yes</div>
<div v-else>no</div>

需要注意的是,v-else 必须紧跟 v-if,不然该指令不起作用。例如:

1
2
3
<div v-if="yes">yes</div>
<p>the v-else div shows</p>
<div v-else>no</div>

最终这三个元素都会输出显示在浏览器中。

v-if 绑定的元素包含子元素则不影响和 v-else 的使用。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div v-if="yes">
<div v-if="inner">inner</div>
<div v-else>not inner</div>
</div>
<div v-else>no</div>
new Vue({
data : {
  
yes : true,
  
inner : false
}
})

输出结果为:

1
2
3
<div>
<div>not inner></div>
</div>

2.2、v-show

除了 v-if,v-show 也是可以根据条件展示元素的一种指令。例如:

1
<div v-show="show">show</div>

也可以搭配 v-else 使用,用法和 v-if 一致。例如:

1
2
<div v-show="show">show</div>
<div v-else>hidden</div>

与 v-if 不同的是,v-show 元素的使用会渲染并保持在 DOM 中。v-show 只是切换元素的 css 属性 display。例如:

1
2
<div v-if="show">if</div>
<div v-show="show">show</div>

2.3、v-if vs v-show

从上述 v-show 图能够明显看到,当 v-if 和 v-show 的条件发生变化时,v-if 引起了dom 操作级别的变化,而 v-show 仅发生了样式的变化,从切换的角度考虑,v-show 消耗的性能要比 v-if 小

除此之外, v-if 切换时,Vue.js 会有一个局部编译 / 卸载的过程,因为 v-if 中的模板也可能包括数据绑定或子组件。v-if 会确保条件块在切换当中适当地销毁与中间内部的事件监听器和子组件。而且 v-if 是惰性的,如果在初始条件为假时,v-if 本身什么都不会做,而v-show 则仍会进行正常的操作,然后把 css 样式设置为 display:none。

所以,总的来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗,我们需要根据实际的使用场景来选择合适的指令。

3、列表渲染

v-for 指令主要用于列表渲染,将根据接收到数组重复渲染 v-for 绑定到的 DOM 元素及内部的子元素,并且可以通过设置别名的方式,获取数组内数据渲染到节点中。例如:

1
2
3
4
5
6
7
8
<ul>
<li v-for="item in items">
  
<h3>{{item.title}}</h3>
  
<p>{{item.description}}</p>
</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vm = new Vue({
el: '#app',
data: {
items: [{
title: 'title-1',
description: 'description-1'
},
{
title: 'title-2',
description: 'description-2'
},
{
title: 'title-3',
description: 'description-3'
},
{
title: 'title-4',
description: 'description-4'
}
]
}
});

其中 items 为 data 中的属性名,item 为别名,可以通过 item 来获取当前数组遍历的每个元素,输出结果为:

4、template标签用法

上述的例子中,v-show 和 v-if 指令都包含在一个根元素中,那是否有方式可以将指令作用到多个兄弟 DOM 元素上? Vue.js 提供了 template 标签,我们可以将指令作用到这个标签上,但最后的渲染结果里不会有它。例如:

1
2
3
<template v-if="show">
<p>你看到了说明这个show是true</p>
</template>
1
2
3
4
5
6
var vm = new Vue({
el: '#app',
data: {
show: true
}
});

输出结果为:

同样, template 标签也支持使用 v-for 指令,用来渲染同级的多个兄弟元素。例如:

1
2
3
<template v-for="item in items">
<p>{{item}}</p>
</template>
1
2
3
4
5
6
7
8
var vm = new Vue({
el: '#app',
data: {
items: [
"A", "B", "C"
]
}
});

May 30, 2018
May 30, 2018