el、template、render渲染页面

el、template、render是实例的三个选项，都有各自的作用。相同的是都能作为元素挂载点，本文仅谈论元素挂载点问题。

new Vue({
  el: '#app',
  template: '<div id="temp"> ... </div>',
  render: h => h('div', { attrs: { id: 'rende' } }, '内容')
})

1. el

类型：string | Element
限制：只在用 new 创建实例时生效，组件对象中不能使用。

(1) el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
(2) 如果render函数和template选项都不存在，就会把挂载元素的HTML提取出来用作模板。此时需要使用 runtime-compiler 版Vue库。

<div id="app"></div>

<script>
  new Vue({
    el: '#app'
  })

  //此时相当于：

  new Vue({
    el: '#app',
    template: '<div id="app"></div>'
  })

</script>

2. template

类型：String
限制： new 创建实例以及组件对象中均能使用。

(1) 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
(2) template可以是：

id选择器
普通html元素字符串
注册好的组件

// 注册好的组件： my-text

new Vue({
  el: '#app',
  template: '#temp',

  template: '<div id="t">内容</div>',

  template: '<my-text/>'
})

3. render

类型：(createElement: () => VNode) => VNode
限制： new 创建实例以及组件对象中均能使用。

更多细节，详见：https://cn.vuejs.org/v2/guide/render-function.html

(1) render函数可以渲染：

组件对象
普通html元素名

// 组件对象：App

new Vue({
  el: '#app',
  render: h => h(App),

  render: h => h('div', {}, '内容')
})

(2) render函数完整版写法如下：

render: h => h(App)
//完整版
render: function(createElement){
  return createElement(App)
}

(3) 其中，参数createElement也是一个函数，通常把它叫做 h函数，h函数会返回VDom；h函数有三个参数，参数如下：

/*
  参1：String|Object  可以是一个普通的html元素 | 组件对象
  参2：Object         为参1的元素增加相关属性，如class、id、style等
  参3：String|Array   为参1的元素增加内容或子节点
*/
//由于h函数返回的是VDom，在这我使用vue的render返回真实DOM后进行查看
let App = Vue.extend({
    template: '<div>组件对象</div>'
})

//组件对象形式
//渲染后的元素：<div>组件对象</div>
render: function(h){
  return h(App)
}


//普通html形式
render: function(h){
  return h('div', {
    attrs: {id: 'render'},
    class: 'box',
    style: 'color:red'
  }, ['我是文本内容', h('p',{},'我是子元素内容')] )
}
/* 渲染后的元素：

 <div id="render" class="box" style="color:red">
   我是文本内容
   <p>我是子元素内容</p>
 </div>
*/

4. 显示权重

三个选项都可以当做模板，vue会根据如下权重进行选择：
render > template > el