vue 渲染函数 & JSX

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>