标签：汽车 hub 界面 idt 使用场景 dex 注意 怎么 vue
练习2 ： 将该示例的render 写法改写为 template 写法，加以对比，总结出两者的差异性，深刻
理解其使用场景。
解答：
1，使用render与template，其差异性，如同使用脚本语言与图形界面操作
2，使用render，专注点在各种精细的操作，使用template,注意力则主要放在数据的操作上，其底层如何运作，则为其次。
3，使用render，如同 开手动档汽车，何时挂何档，怎么让油门与离合器相配合，是重点
4，使用template，如同 开自动档汽车，一键启动后，不再需要操心离合器，一切自动搞定。
5，既要享受使用开自动波的乐趣，也要能知道一旦汽车抛锚，如何检测。
在table.vue中，删除了render函数，改为使用template，如下：
<template>
<table>
<colgroup>
<col v-for="item in currentColumns" :key="item.key" :style="{width:item.width}">
</colgroup>
<thead>
<tr>
<template v-for="(col, index) in columns">
<th v-if="col.sortable" :key="col.title">
<span>{{col.title}}</span>
<a :class="{on:col._sortType === ‘asc‘}"
@click="handleSortByAsc(index)"
>↑</a>
<a :class="{on:col._sortType===‘desc‘}"
@click="handleSortByDesc(index)"
>↓</a>
</th>
<th v-else :key="col.title">
{{col.title}}
</th>
</template>
</tr>
</thead>
<tbody>
<tr v-for="row in currentData" :key="row.name">
<td v-for="cell in currentColumns" :key="cell.key">
{{ row[cell.key] }}
</td>
</tr>
</tbody>
</table>
</template>
再贴下render函数：
render(h){ var _this =this; var cols=[]; this.currentColumns.forEach((col,index)=>{ cols.push(h(‘col‘,{ style:{ width:col.width } })) }); var ths=[]; this.currentColumns.forEach((col,index)=>{ if(col.sortable){ ths.push(h(‘th‘,[ h(‘span‘,col.title), h(‘a‘,{ class:{ on:col._sortType === ‘asc‘ }, on:{ click(){ _this.handleSortByAsc(index) } } },‘↑‘), h(‘a‘,{ class:{ on:col._sortType===‘desc‘ }, on:{ click(){ _this.handleSortByDesc(index) } } },‘↓‘) ])); }else{ ths.push(h(‘th‘,col.title)); } }) var trs=[]; this.currentData.forEach(row=>{ var tds = []; _this.currentColumns.forEach(cell=>{ tds.push(h(‘td‘,row[cell.key])); }); trs.push(h(‘tr‘,tds)); }); return h(‘table‘,[ h(‘colgroup‘,cols), h(‘thead‘,[ h(‘tr‘,ths) ]), h(‘tbody‘,trs) ]) }
标签：汽车 hub 界面 idt 使用场景 dex 注意 怎么 vue
原文地址：https://www.cnblogs.com/sx00xs/p/11372837.html
