指定组件显示的内容：new Vue({选项})
el 选项，通过一个选择器找到容器，容器内容就是组件内容
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用 vm.$el 访问。
如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
项目中会有index.html 文件,里面会存在一个div
<div id="app"></div>
于main.js 中挂载，下面两种写法一样的。
new Vue().$mount('#app')
// 或者
new Vue({ el: '#app' })
template 选项
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素，挂载元素的内容都将被忽略。
const vm = new Vue({el: '#app',template: `<div id="app-test">xxx</div>`,
})
render选项
字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
import App from './App.vue'
new Vue({render:h=>h(App)
}).mount('#app')// h() =====> createElement()
// h(App) =====> 根据APP组件创建html结构
// render的返回值就是html结构，渲染到#app容器
// h() 函数参数，1.节点名称 2. 属性|数据 是对象 3. 子节点 vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来
h 第一个参数 标签名字 第二个参数 标签属性对象 第三个参数 子节点
<script>
// vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来
// render: h => {
// // 返回值就是组件内容
// return h()
// }
import { h } from 'vue'
export default {name: 'AppBread',render () {// 返回值就是组件内容// h 第一个参数 标签名字 第二个参数 标签属性对象 第三个参数 子节点return h('div', { class: 'app-bread' }, '我是内容')}
}
</script>可以通过this.$slots来获取插槽内容
// 获取默认插槽的内容
const soltList = this.$slots.default()可以动态的去创建节点 例如：
render () {// 返回值就是组件内容// h 第一个参数 标签名字 第二个参数 标签属性对象 第三个参数 子节点// 获取默认插槽的内容const soltList = this.$slots.default()// 动态创建节点 最后一个item不加i标签const dymanicItems = []soltList.forEach((item, i) => {if (i === soltList.length - 1) return dymanicItems.push(item)// 在每个item元素 后面加一个i标签（箭头） 最后一个不加dymanicItems.push(item, h('i', { class: 'iconfont icon-angle-right' }))})return h('div', { class: 'app-bread' }, dymanicItems)}