Vue 模板渲染/条件渲染/列表渲染

当获取到后端数据后，我们会把它按照一定的规则加载到写好的模板中，输出成在浏览器中显示的 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>