渲染:获取后端的数据,按照一定的规则加载到写好的模板中,输出成在浏览器中显示的HTML.vue.js是在前端(即浏览器内)进行的模板渲染。
前后端渲染对比
后端:在服务器端进行渲染,服务器进程从数据库获取数据后,利用前端模板引擎,将数据加载生成HTML,然后通过网络传输到用户的浏览器中,然后被浏览器解析成可见的页面。
前端:在浏览器里利用JS把数据和HTML模板进行组合。
前段渲染的优点在于:
1.业务分离,后端只需要提供数据接口,前端在开发时也不需要部署对应的后端环境,通过一些代理服务器工具就能远程后去后端数据进行开发,能够提升开发效率。
2.计算量转移,原本需要后端渲染的任务转移给了前端,减轻了服务器的压力。
后端渲染的优点
1.对搜索引擎友好。
2.首页加载时间短,后端渲染加载完后就直接显示HTML,但前端渲染在加载完成后还需要有段js渲染的时间。
条件渲染
1.v-if/v-else
依据数据值来判断是否输出该DOM节点,以及包含的子元素。
<div v-if="yes">yes</div> //若当前vm实例中包含data.yes = true,则模板引擎将会编译这个DOM节点,输出<div>yes</div>
<div v-if="yes">yes</div>
<div v-else>no</div>
//注:v-else必须紧跟v-if使用。
v-if绑定的元素包含子元素则不影响和v-else的使用。
<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
}
})
输出结果为:
<div>
<div>not inner</div>
</div>
2.v-show
<div v-show="show">show</div>
<div v-show="show">show</div>
<div v-else>hidden</div>
注:v-show元素,无论绑定值为true或false,均会渲染并保持在DOM中。绑定值的改变只会切换元素的css属性display。v-if元素,页面不会显示该标签。
3.v-if vs v-show
1.v-if切换时,引起了dom操作级别的变化。v-show仅发生了样式的变化。所以,从切换的角度考虑,v-show消耗的性能要比v-if小。
2.v-if切换时,vue.js会有一个局部编译/卸载的过程,因为v-if中的模板也可能包括数据绑定或子组件。v-show则仍会进行正常操作,然后把css样式设置为display:none。
总的来说,v-if有更高的切换消耗而v-show有更高的初始渲染消耗。所以,需要根据实际的使用场景来选择合适的指令。
列表渲染
v-for指令主要用于列表渲染,将根据接收到数组重复渲染v-for绑定到的DOM元素及内部的子元素,并且可以通过设置别名的方式,获取数组内数据渲染到节点中。
v-for遍历数组:
<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: [
{_id:1,title:"title-1",description:"description-1"},
{_id:2,title:"title-2",description:"description-2"},
{_id:3,title:"title-3",description:"description-3"},
{_id:4,title:"title-4",description:"description-4"},
]
}
});
//items为data中的属性名,item为别名,可以通过item来获取当前数组遍历的每个元素。
v-for内置了$index变量,可以在v-for指令内调用,输出当前数组元素的索引。
另外,我们也可以自己制定索引的别名:
<li v-for="(index,item) in items">{{ index }} - {{ $index }} - {{ item.title }}</li>
注:vue.js对data中数组的原生方法进行了封装,所以在改变数组时能触发视图更新,但以下两种情况时无法触发视图更新的:
1.通过索引直接修改数组元素,例如:vm.items[0] = {title:’title-changed’};
2.无法直接修改”修改数组”的长度,例如:vm.items.length = 0
对于第一种情况,Vue.js提供了$set方法,在修改数据的同时进行视图更新,可以写成:
vm.items.$set(0,{title:'title-changed'})
或者 vm.$set('items[0]',{title:'title-also-changed'});
在列表渲染的时候,确定数组中的唯一标识id。通过trace-by给数组设定唯一标识。使Vue.js在渲染过程中会尽量复用原有的对象的作用域及DOM元素。
<li v-for="item in items" track-by="_id"></div>
v-for遍历对象,作用域内可以访问内置变量$key,也可以使用(key,value)形式自定义key变量。
<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'
}
}
})
v-for可以接受单个整数,用作循环次数:
<li v-for="n in 5">{{ n }}</li>
template标签用法
将指令作用到template标签上,但最后的渲染结果里不会有它。
<template v-if="yes">
<p>this is first dom</p>
<p>this is second dom</p>
</template>
//输出结果
<p>this is first dom</p>
<p>this is second dom</p>
template标签也支持使用v-for指令,用来渲染同级的多个兄弟元素。
<template v-for="item in items">
<p>{{ item.name }}</p>
<p>{{ item.desc }}</p>
</template>