当获取到后端数据后,我们会把它按照一定的规则加载到写好的模板中,输出成在浏览器中显示的 HTML,这个过程就称之为渲染。而 Vue.js 是在前端(即浏览器内)进行的模板 渲染。
1.前后端渲染对比
前端渲染 的优势:是在浏览器里利用 JS 把数据和 HTML 模板进行组合,业务分离,后端只需要提供数据接口。
2.条件渲染
(提供指令来说明模板和数据间的逻辑关系)
v-if/v-else 根据数据值来判断是否输出该DOM元素,以及包含的子元素
<div v-if="yes">yes</div>
<div v-else>no</div> #v-else 必须紧跟 v-if
当前 vm 实例中包含 data.yes = true,则模板引擎将会编译这个 DOM 节点,输出yes,否则输出no
v-show 根据条件展示元素的一种指令
<div v-show="show">show</div>
<div v-else>hidden</div>
也可以搭配 v-else 使用,用法和 v-if 一致。
<div v-if="show">if</div>
<div v-show="show">show</div>
v-if vs v-show
v-if 引起了 dom 操作级别的变化,而 v-show 仅发生了样式的变化,从切换的角度考虑,v-show 消耗的 性能要比 v-if 小。
3.列表渲染
v-for根据接收到数组重复渲染 v-for 绑定到的 DOM 元素及 内部的子元素,并且可以通过设置别名的方式,获取数组内数据渲染到节点中。
<ul>
<li v-for="item in items">
<h3>{{item.title}}</h3>
<p>{{item.description}}</p>
</li>
</ul>
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'}
]
}
});
输出结果:
<li v-for="(key, value) in objectDemo">
{{key}} - {{$key}} : {{value}}
</li>
var vm = new Vue({
el : '#app',
data: {
objectDemo : {
a : 'a-value',
b : 'b-value',
c : 'c-value',
}
}
});
输出结果:
<li v-for="n in 5">
{{ n }}
</li>
输出结果:
4.template标签的用法
<template v-if="yes">
<p>There is first dom</p>
<p>There is second dom</p>
<p>There is third dom</p>
</template>
结果:
<template v-for="item in items">
<p>{{item.name}}</p>
<p>{{item.desc}}</p>
</template>