《Vue.j实战》一书 p171 练习 2 试做
Posted sx00xs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《Vue.j实战》一书 p171 练习 2 试做相关的知识,希望对你有一定的参考价值。
练习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) ])
以上是关于《Vue.j实战》一书 p171 练习 2 试做的主要内容,如果未能解决你的问题,请参考以下文章
2019.8.27更新:《Vue.js实战一书p231练习试做