js 栈 html标签修复,用Vue.js的Render函数实现技术栈的介绍

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

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

先上效果：(把Output放大到全屏，效果更好哦)

点击查看效果

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

我的结构是这样的。因为想有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标签当作是内容。

function leftall(createElement,txt,degree) {

return createElement('div',

[

title(createElement,txt),

progress(createElement,degree)

])

}

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

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

item.map(function(data) {

return leftall(createElement,data.title,data.degree)

})

最后创建组件，把左右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

//js

Vue.component('my-special',{

template: '\

\

{{item.title}}

\

\

\

\

{{item.degree}}%\

\

\

\

\

',

props; ['item']

});

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

查看效果