《Vue.j实战》一书 p171 练习 2 试做

Posted sx00xs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《Vue.j实战》一书 p171 练习 2 试做相关的知识,希望对你有一定的参考价值。

练习2 : 将该示例的render 写法改写为 template 写法,加以对比,总结出两者的差异性,深刻
理解其使用场景。

Demo效果在线浏览

解答:

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练习试做

《Vue.js实战》一书 p117 练习 1& 2 (2019.12.19)

敏捷开发-敏捷宣言

《Unity5实战》一书的勘误

《Unity5实战》一书的勘误

图书Vue.js实战