vue_模板渲染

渲染

当获取到后端数据后，我们会把它按照一定的规则加载到写好的模板中，输出成在浏览器中显示的HTML，这个过程就称之为渲染。

vue.js是在前端（即浏览器内）进行的模板渲染。

前后端渲染对比

前端渲染的优点在于：

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

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

而后端渲染的优点在于：

①对搜索引擎友好。

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

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

条件渲染

v-if ，v-show ，v-else

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

<div v-else>no</div>

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

• 注意：v-else 必须紧跟v-if ,不然指令不起作用

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

<div v-else>hidden</div>

• 与v-if不同的是，v-show 元素的使用会渲染并保持在DOM中。v-show 只是切换元素的css属性display
• 即 show 为 false 的时候 

  <div style="display:none;">show</div>

v-if vs v-show

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

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

列表渲染

v-for

数组：

 <li v-for="(value,index) in myData" :key = "index"> 

    {{ index }}
</li>

:key = "index" 可以根据index 重新排序元素

对象

<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>

//第三个参数为索引：

<li v-for="(value, key, index) in object"> 
　　{{ index }}. {{ key }} : {{ value }} 
</li>

v-for 迭代整数

<li v-for="n in 10">
     {{ n }}
</li>

结果：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10