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" }
    ]
  }
})

三、render函数渲染

改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多，这就是react和vue在性能方面的一大优势，下面简单介绍虚拟dom。
createElement告诉Vue页面上需要渲染什么样的节点，及其子节点。这些节点是虚拟节点，所有虚拟节点形成虚拟dom。

1、例子

<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"
})

2、例子

<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"
})

四、jsx渲染
vue推荐大部分情况下用模板渲染页面，但有时候也需要用render函数。为了更接近模板语法，可以在vue中使用jsx。