最近公司要重写运营管理系统,不想再维护之前的backbone了,赶紧要求前端整个重写。重开新坑,用了两周多撸出了第一版,收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来,也算简单梳理一下思路。
相关博客:
- Vue全家桶实践(一)—vue-cli
- Vue全家桶实践(二)—iView
- Vue全家桶实践(三)—axios
- Vue全家桶实践(四)—vue-router
- Vue全家桶实践(五)—渲染函数&JSX
- Vue全家桶实践(六)—自定义指令(directive)
渲染函数&JSX
参考资料:文档
使用vue进行开发的时候,绝大部分情况下直接使用template来创建html,但在某些情况下,使用js会更有效。官方文档中就举了生成h标签的例子。
html的DOM树种,每个元素都是一个节点,比如html标签,文本,注释等。
Vue通过建立虚拟DOM,对真实DOM的变化进行追踪,通过createElement函数,返回一个虚拟节点(VNode),它包含的信息会告诉Vue页面上需要渲染出什么元素。而虚拟DOM就是由这些VNode组成的树。
实际上,我们在vue单文件组件中写的template,也会先被解析为VNode进行操作,然后再变成html在浏览器中渲染。
createElement参数
官网上有详细的createElement用例。使用js替代template时,v-if使用if/else代替,v-for使用map代替即可。而v-model就要自己实现。
但是可以看到,实际上要使用createElement函数来生成一个VNode是很麻烦的,比如:
//template
<div id="container" @click="clickHandler">
<p>Hello</p>
<div>
// createElement
// @returns {VNode}
createElement(
'div',
{
attrs: {
id: 'container'
},
on: {
click: this.clickHandler
},
},
[
createElement('p', 'Hello')
]
)
简单的一段模板,用createElement代码量就大了很多,所以我们更多的使用jsx语法,让我们更加接近模板。如:
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中 h 失去作用,在应用中会触发报错。
我们在使用iview的时候,就经常会需要用到render函数,例如:
// 简单模板:
render (h, params) {
return (
<div>
<p>{params.row.contactName}</p>
<p>{params.row.phone}</p>
<p>{params.row.email}</p>
</div>
)
}
// 循环
render (h, params) {
return (
<div>
{params.row.data.map((item) => {
return (<tag class='cursorDefault' type='border' color='blue'>{item}</tag>)
})}
</div>
)
}
// 判断&组件嵌套
render (h, params) {
if (params.row.data=== null) {
return
}
return (
<poptip title='网店' trigger='hover' placement='left'>
<tag color='blue'>{params.row.data}</tag>
<div slot='content'>
{params.row.eshops.map((shop) => {
return (<p>{shop.title}</p>)
})}
</div>
</poptip>
)
}
// 事件绑定,使用箭头函数确定作用域。
render: (h, params) => {
return (
<p class="xxx" onClick={ () => { this.changeTime(params.row) } }>
<icon size="16" color="#19be6b" type="edit" />
{moment(params.row.time).format('YYYY-MM-DD HH:mm:ss')}
</p>
)
}