第17集丨Vue中的render函数

目录

一、脚手架中不能使用template配置

javascript 复制代码
// 引入vue
import Vue from 'vue'
import App from './App'

new Vue({
    el:'#app',
    template:'<h1>hhh</h1>',
    comments:{
        App
    },
    
})

上面案例中,配置了template属性,就会报错,如下图所示:

从上图的错误中,我们知道,处理方式有两种

  • 一种,使用带有模板编译器的vue
  • 第二种,使用render

因为Vue默认引用的是:dist/vue.runtime.esm.js

二、基本使用

render函数里没有用到this,所以可以简写为箭头函数,只有一个参数可以省略小括号,函数体中只有一个返回值语句,可以省略花括号{}。因此

javascript 复制代码
render(createElement){
      return createElement('h1','hhh')
  }

可以简写为:

javascript 复制代码
render: createElement => createElement('h1','hhh')

案例如下:

javascript 复制代码
// 引入vue
import Vue from 'vue'
import App from './App'

new Vue({
    el:'#app',
    // template:'<h1>hhh</h1>',
    comments:{
        App
    },
    // 将App组件放入容器中
   render: h => h(App),
})

三、关于不同版本的Vue

  • vue.jsvue.runtime.xxx.js的区别:
    (1). vue.is是完整版的Vue,包含:核心功能+模板解析
    (2). vue.runtime.xxx.js是运行版的Vue,只包含:核心功能,没有模板解析器。
  • 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。
相关推荐
有梦想的刺儿8 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具29 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro