createElement 参数
接下来你需要熟悉的是如何在 createElement 函数中生成模板。这里是 createElement 接受的参数:
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串,组件选项对象,或者
// 解析上述任何一种的一个 async 异步函数。必需参数。
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 你可以在 template 中使用这些特性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子虚拟节点 (VNodes),由 `createElement()` 构建而成,
// 也可以使用字符串来生成“文本虚拟节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
例如实现生成锚点标题的组件
<div id="demo3">
<anchored v-bind:level = "2">hello</anchored>
</div>
<script>
var getChildrenText = function(children){
return children.map(function(node){
return node.children ? getChildrenText(node.children) : node.text
}).join('')
}
Vue.component('anchored',{
render:function(createElement){
var headingId = getChildrenText(this.$slots.default)
.toLowerCase()
.replace(/\W+/g, '-')
.replace(/(^\-|\-$)/g, '')
return createElement('h'+ this.level,
[createElement('a',{
attrs:{
name:headingId,
href:'#' + headingId
}
}, this.$slots.default)
]
)
},
props:{
level:{
required:true,
type:Number
}
}
})
new Vue({
el:"#demo3"
})
</script>
重复很多次渲染元素/组件
<div id="demo">
<anchored-heading>
</anchored-heading>
</div>
<script>
Vue.component('anchored-heading',{
render:function(createElement){
return createElement('div',
Array.apply(null,{length:5}).map(function(){
return createElement('p','hi')
})
)
}
})
new Vue({
el:'#demo'
})
</script>
render 函数和 v-if 和 v-for 结合
<div id="demo2">
<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
</div>
<script>
Vue.component('menulist',{
props:['items'],
render:function(createElement){
if(this.items.length){
return createElement('ul', this.items,map(function(item){
return createElement('li',item.name)
}))
}else{
return createElement('p', 'No items found.')
}
}
})
new Vue({
el:'#demo2',
data:{
items : [
{ name: 'Foo' },
{ name: 'Bar' }
]
}
})
</script>
写法二
<div id = "demo3">
<menulist v-bind:item="items"></menulist>
</div>
<script>
Vue.component('menulist',{
render:function(createElement){
if(this.item.length){
return createElement('ul',this.item.map(function(item){
return createElement('li',item.name)
}))
}else{
return createElement('p','No items found.')
}
},
props:{
item:{
type:Array,
default:function(){
return {name:'lilei'}
}
},
length:{
type:Number,
default:0
}
}
})
new Vue({
el:'#demo3',
data:{
length:1,
items:[
{name:'nin'},
{name:'hello'},
{name:'world'}
]
}
})
</script>
rader函数与v-model
<div id = "my-input">
<my-input :value="name" v-model="name"></my-input>
<p>{{name}}</p>
</div>
<script>
Vue.component('myInput',{
props:['value'],
render:function(createElement){
var self = this;
return createElement('input', {
domProps:{
value:self.value
},
on:{
input:function(event){
self.$emit('input',event.target.value)
}
}
})
}
})
new Vue({
el:"#my-input",
data:{
name:'zx'
}
})
</script>