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