Vue 之render函数的学习与使用
render渲染函数
我们可以生成DOM元素在template中,但是我们也可以使用render渲染函数
<h1>{ { blogTitle }}</h1>
在渲染函数中:
render: function (createElement) {
return createElement('h1', this.blogTitle)
}
在这两种情况下,Vue 都会自动保持页面的更新,即便 blogTitle 发生了改变。
虚拟 DOM
createElement 到底会返回什么呢?其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
createElement参数
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串,组件选项对象,或者
// 解析上述任何一种的一个 async 异步函数,必要参数。
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样,您可以在 template 中使用这些属性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子节点 (VNodes),由 `createElement()` 构建而成,
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
生成数据表的每列的tablesearch功能,是动态生成input 输入框,用iview的组件实现的会比较好,因为组件给我们绑定了一些事件,我们呢直接调用就可以。
addSearch (h, {column}) {
let inputValue = {}
return h('Input', {
props: {
placeholder: 'Search' + ' ' + column.label,
icon: 'ios-search-strong'
},
style: {
paddingRight: '5px'
},
on: {
input: val => {
inputValue = val
if (!inputValue) {
this.vaildInputValue(column.label, inputValue)
}
},
class: 'ivu-input-icon',
'on-click': () => {
this.vaildInputValue(column.label, inputValue)
},
'on-enter': () => {
console.log('enter')
this.vaildInputValue(column.label, inputValue)
}
}
})
},
如果是element UI
addSearch (h, {column}) {
let inputValue = {}
return h('el-input', {
attrs: {
placeholder: 'Search',
'suffix-icon': 'el-icon-search'
},
style: {
paddingRight: '5px'
},
on: {
input: val => {
inputValue = val
if (!inputValue) {
this.vaildInputValue(column.label, inputValue)
}
},
'change': () => {
console.log('click')
this.vaildInputValue(column.label, inputValue)
},
'enter': () => {
console.log(enter)
this.vaildInputValue(column.label, inputValue)
}
}
})
他们本身自带的定义事件可以让我们大大提高了工作效率
还没有评论,来说两句吧...