用Vue.js的Render函数实现技术栈的介绍-原创手记-慕课网

最近在学Vue.js，刚好有课设，所以想边运用所学知识边完成课设，不过感觉能完成我心中所想的那个课设有点困难，尽力学完所需要的知识。

这次我运用Render函数实现组件化，不过Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。而且template写得也不用这么多且清晰很多。但是如果改了一写HTML结构的话就要改整个template，所以如果一个经常改动HTML结构且很复杂的话，Render还是更适合，且它比 template 更接近编译器。
先上效果：(把Output放大到全屏，效果更好哦)
点击查看效果

对于HTML来说，直接一个标签名就可以了。要传值，所以v-bind把值传给组件，组件通过props接受。

<div id="special">
    <my-special v-bind:item="special"></my-special>
</div>

我的结构是这样的。因为想有animate动画，所以分了两div从两边进

|-div:class="container"
    |-div：左边
     |--h6
     |--div:class="degree"
       |--div:条形图

    |-div：右边
      |--注释

因为Render函数每次只能创建一个标签，所以如果你想嵌套多个标签的话，只能分开写（当然这里不包括简单情况）。为了创建多个标签，我写了好多个函数。

拿两个函数举例

function progressBar(createElement,degree){
    return createElement('div',{
        attrs:{
            'class': 'progress-bar',
            'role': 'progressbar',
            'aria-valuenow': degree,
            'aria-valuemin': 0,
            'aria-valuemax': 100,

        },
        style: {
            'width': degree + "%"
        }
    },degree)
}

这个是创建条形图的。createElement接受的第一个参数就是标签名，后面的参数都是可选的，他会根据类型来自动匹配。这里的第二个参数是一个对应属性的数据对象，是一个{Object}。第三个参数是子节点(VNodes)，{String | Array}，如果是String的话类似于innerHTML的意思，不过这里如果里面包含了标签。例如<h1>这是标题</h1>，他会直接把这个h1标签当作是内容。

function leftall(createElement,txt,degree) {
    return createElement('div',
        [
            title(createElement,txt),
            progress(createElement,degree)
        ])
}

这个就没有了第二个属性参数，子节点是一个Array，说明title()和progress()创建的两个节点都会包含在这个div里面。

创建好“DOM结构”后，就要遍历元素了。这里我暂时用了个蠢办法，因为左右两个div是包裹在.container的div里面的，而元素又是从<my-special>组件里面拿到的，怎么才能传进这些两个div里面呢。。。现在我只能把整个item对象传进去了，遍历两次取要的相应信息。这里的子节点数组，刚开始写了forEach，但是，forEach返回的是void啊，我这里需要的是数组，所以要用map。

item.map(function(data) {
    return leftall(createElement,data.title,data.degree)
})

最后创建<my-special>组件，把左右div都包含进去，再实例化一下Vue对象，搞定。

Vue.component('my-special',{
    render: function(createElement) {
        console.log(this.item)
        return createElement('div',
            [leftBox(createElement,this.item),
            rightBox(createElement,this.item)]
        )
    },
    props: ['item']
})

var special = new Vue({
    el: "#special",
    data: {
        special: [
            {
                "title": "HTML&CSS",
                "degree": 80,
                "description": "熟悉W3C标准，能写出兼容各大主流浏览器的友好页面"
            }
        ]
    }
})

想了想。。。我还是再用template写一次，就当复习吧。
这个是左边的div。

//html
<my-special v-bind:item="item" v-for="item in special"></my-special>

//js
Vue.component('my-special',{
    template: '\
    <div>\
        <h6>{{item.title}}</h6>\
        <div class="progress">\
            <div class="progress">\
                <div class="progress-bar" role="progressbar" aria-valuenow="{{item.degree}}" aria-valuemin="0" aria-valuemax="100" style="width:{{item.degree}}%">\
                    {{item.degree}}%\
                </div>\
            </div>\
        </div>\
    </div>\
    ',
    props; ['item']
});

最后防止没看到链接，再上一遍，点击查看效果哦~~而且完整代码在链接中
查看效果

用Vue.js的Render函数实现技术栈的介绍原创