Vue指定组件内容的三种方式（el， template ，render）

指定组件显示的内容：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)
  }