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 创建实例以及组件对象中均能使用。
(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
