vue中的页面渲染方案

<div id="J_render_app">
  <ul v-if="items.length">
    <li v-for="item in items">{{ item.name }}</li>
  </ul>
  <p v-else>No items found.</p>
</div>
var vrrapp = new Vue({
  el:"#J_render_app",
  data:{
    items:[
      { name: "vuejs" },
      { name: "angularjs" },
      { name: "reactjs" }
    ]
  }
})

<div id="J_render_app">
  <ul v-if="items.length">
    <my-li v-for="item in items" :tolearn="item"></my-li>
  </ul>
  <p v-else>No items found.</p>
</div>
Vue.component(‘my-li‘,{
  props:["tolearn"],
  template:‘<li>{{ tolearn.name }}</li>‘
})
var vrrapp = new Vue({
  el:"#J_render_app",
  data:{
    items:[
      { name: "vuejs" },
      { name: "angularjs" },
      { name: "reactjs" }
    ]
  }
})

<div id="J_render_app">
  <my-condition></my-condition>
</div>
Vue.component(‘my-condition‘,{
  data:function(){
    return {
      items:[
        {name:"vuejs"},
        {name:"angularjs"},
        {name:"reactjs"}
      ]
    }
  },
  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.‘)
    }
  }
})
var vrrapp = new Vue({
  el:"#J_render_app"
})

<div id="J_render_app">
  <anchored-heading :level="2">Hello world!</anchored-heading>
</div>

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children ? getChildrenTextContent(node.children) : node.text
  }).join(‘‘)
}
Vue.component(‘anchored-heading‘, {
  render: function (createElement) {
    // create kebabCase id
    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 vrrapp = new Vue({
  el:"#J_render_app"
})