详解Vue中的render: h =＞ h(App)示例代码
更新时间：2023年09月04日 14:52:28 作者：Just right
这篇文章主要介绍了Vue中的render: h =＞ h(App),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
声明:只是记录，会有错误，谨慎阅读
我们用脚手架初始化工程的时候，main.js的代码如下
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
// 把app组件放入容器中
render: h => h(App),
}).$mount('#app')但是我之前学的是这样的
new Vue({
template:`<h1>dsaad</h1>`
})一运行，好家伙，报错
翻译过来的意思就是引入的是一个阉割的vue，他没有模版解释器这东西，他给出的解决办法有两个:
- 用render函数
- 引入包含模版解释器的vue即完整版本的vue
先看看第二种办法回到main.js中，我发现我引入了vue，但就是这句话报错的
import Vue from 'vue'
开始顺藤摸瓜,看看他引入的是哪一个(按住ctrl键,点击import Vue from 'vue’中单引号的vue)
把main.js中的import Vue from 'vue’换成import Vue from 'vue/dist/vue’即可
再来看看第一种办法,
render: h => h(App)
比如说我要用render来实现下面代码所显示的效果
<h1> dasdasdsa</h1>
按照如下方式走
render:(createElement){
return createElement('h1','abc')
}
由于没有用到vm，直接缩写为箭头函数
render:(createElement)=>{
return createElement('h1','abc')
}
只有{}中只有一句话，再省
render(createElement)=> createElement('h1','abc')
createElement太长了，缩写成c
到了下面这里就有点像了
render(c)=> c('h1','abc')
'h1'表示是html的内置元素，若是组件的话需要把单引号去掉
c(App)到此这篇关于详解Vue中的render: h =＞ h(App)的文章就介绍到这了,更多相关Vue中render: h =＞ h(App)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VUE使用localstorage和sessionstorage实现登录示例详解
这篇文章主要为大家介绍了VUE使用localstorage和sessionstorage实现登录示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了Vue项目打包部署到apache服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
本文主要介绍了Vue3使用element-plus实现弹窗效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要给大家介绍了关于vue-cli基础配置及webpack配置修改的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-10-10
这篇文章主要介绍了vue中watch的用法汇总，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了element-ui select多选绑定回显值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最近遇到一个需求,在 Vue3 的一个 H5 页面当中点击拖拽图标上下拖动 tab 子项,然后点击保存可以保存最新的 tab 项顺序,同事说可以用 vue-draggable-plus 这个库来实现拖拽,所以本文给大家介绍了如何使用vue-draggable-plus实现拖拽排序,需要的朋友可以参考下2024-01-01
这篇文章主要带大家从源码分析一下Vue3中的组件挂载的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下2023-09-09
这篇文章主要介绍了vue中使用vue-pdf的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
Google 给 Chrome 浏览器加了一个有趣的彩蛋，本文就详细的介绍一下Vue实现Chrome小恐龙游戏的示例代码，具有一定的参考价值，感兴趣的可以了解一下2022-04-04
最新评论