08.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task-07</title>
  <script src="vue/vue.js"></script>	
  <style>
   
  </style>
</head>
<body>
<div id="app-01">
  <anchored-heading :level="1">
  hello world
  </anchored-heading>
  <component-vif :items="items"></component-vif>
  <component-vmodel :orivalue="value"></component-vmodel>
</div>
<script>
function getChildrenTextContent(children){
  return children.map(function(node){
    return node.children?getChildrenTextContent(node.children):node.text
  }).join('')
}
Vue.component('component-vif',{
  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.')
    }
  }
})
Vue.component('component-vmodel',{
  render:function(createElement){
    var self=this
    return createElement('p',[
      createElement('input',{
        domProps:{
          value:self.value,
         
        },
      on:{
        input:function(event){
          self.value=event.target.value
        }
      }
      }),
      createElement('span',self.value)
    ])    
  },
  props:['orivalue'],
  data:function(){
    var value=this.orivalue
    return {value}
  }
})
Vue.component('anchored-heading',{
  render:function(createElement){
    var headingId=getChildrenTextContent(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:{
      type:Number,
      required:true
    }
  }
})
var app01=new Vue({
  el:'#app-01',
  data:{
    level:'1',
    items:[
      {name:'aaa'},
      {name:'bbb'}
    ],
    value:''
  }
})

</script>
</body>
</html>