详解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)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了el-dialog关闭再打开后窗口内容不刷新问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了vue 双向绑定问题$emit无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在本篇文章中，我们给大家详细讲述了vue中如何配置less的详细代码和步骤，有需要的朋友跟着学习下。2018-09-09
下面小编就为大家分享一篇axios发送post请求,提交图片类型表单数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文分步骤给大家介绍vue给不同环境配置不同打包命令的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目，通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值，需要的朋友可以参考下2019-01-01
这篇文章主要介绍了vue3中的hook简单封装，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了ElementUI Tag组件实现多标签生成的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要给大家介绍了关于浅入深出Vue之组件使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了vue中eslintrc.js配置最详细介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论