Vue - Vue指令系统（v-show & v-if）在没有框架的前提下要把一个数组渲染成DOM表格需要经历一系列do

在没有框架的前提下要把一个数组渲染成DOM表格需要经历一系列document.createElement()、appendChild()等冗长复杂的代码来实现，使用Vue后让类似这样的工作变得十分简单快捷。

使用Vue只需要一个v-for指令就能实现把数组渲染成DOM表格：

   arr = [
        {"name":"Tom", "id":1, "age":11},
        {"name":"Marry", "id":2, "age":10},
        {"name":"John", "id":3, "age":13},
        {"name":"Lucy", "id":4, "age":12},
   ]
   
   <table>
        <tr v-for="item in arr">
            <td>{{item.name}}</td>
            <td>{{item.id}}</td>
            <td>{{item.age}}</td>
        </tr>
   </table>

HTML参与编程运用的是Vue指令系统。

v-show和v-if指令

v-show决定一个元素是否显示。

v-if决定一个元素是否上树。

v-show和v-if的区别

v-if相对于v-show性能更高，因为v-if能彻底消亡子组件并且能触发子组件完整的生命周期；v-show使元素不显示但元素依然在树上，当v-show属性的属性值为假时（包括false, 0或空），元素将被添加display: none，v-if使元素不显示（属性值为假）即不让其上树（会留下一个注释占位符）；v-show则相对于v-if效率更高。