脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue中render: h =＞ h(App)

详解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)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue2.x中的Render函数详解

    Vue2.x中的Render函数详解

    通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。Vue 的模板实际是编译成了 render 函数。
    2017-05-05
  • vue动态路由:路由参数改变,视图不更新问题的解决

    vue动态路由:路由参数改变,视图不更新问题的解决

    今天小编就为大家分享一篇vue动态路由:路由参数改变,视图不更新问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue实现重置表单信息为空的方法

    vue实现重置表单信息为空的方法

    今天小编就为大家分享一篇vue实现重置表单信息为空的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue 路由切换过渡动效滑入滑出效果的实例代码

    vue 路由切换过渡动效滑入滑出效果的实例代码

    在支付宝账单页面有这样一个特效切换过渡动效滑入滑出效果，非常方便实用，那么这个功能如何实现的呢？下面小编通过vue实现路由切换过渡动效滑入滑出效果，感兴趣的朋友一起看看吧
    2022-03-03
  • vue 路由嵌套高亮问题的解决方法

    vue 路由嵌套高亮问题的解决方法

    这篇文章主要介绍了vue 路由嵌套高亮问题的解决方法，主路由通过v-for循环出来，次路由通过url拼接的方式导航到子路由页面，具体实现代码大家参考下本文
    2018-05-05
  • vue-cli 项目打包完成后运行文件路径报错问题

    vue-cli 项目打包完成后运行文件路径报错问题

    这篇文章主要介绍了vue-cli 项目打包完成后运行文件路径报错问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue 防止多次点击的实践

    vue 防止多次点击的实践

    本文主要介绍了vue 防止多次点击，可以有效防止恶意点击，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue.js实战之组件之间的数据传递

    Vue.js实战之组件之间的数据传递

    这篇文章主要介绍了Vue.js实战之组件之间的数据传递的相关资料，文中通过示例代码和图文介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-04-04
  • Vue如何解决跨域问题详解

    Vue如何解决跨域问题详解

    VUE访问接口的时候,很可能出现跨域请求,从而被提供接口的服务器拒绝,下面这篇文章主要给大家介绍了关于Vue如何解决跨域问题的相关资料,需要的朋友可以参考下
    2022-02-02
  • Vue Router 中meta 对象示例详解

    Vue Router 中meta 对象示例详解

    本文主要介绍了在VueRouter中,meta对象的使用和配置方式,meta对象可以包含任何你希望附加到路由的自定义信息,这些配置信息可以灵活的满足你的应用需求,使得路由配置更具灵活性和可扩展性
    2024-10-10

最新评论