render函数

一、render的作用

非单文件组件时，创建vm的写法：

new Vue({el: '#root',template: `<App></App>`,components: {App}
})

但是该写法在脚手架中会报错。因为脚手架默认引入的是个残缺版的vue。

如果要避免报错，有2种解决方案：

引入完整版的vue
或者使用rander

在脚手架中，引入的Vue：

import Vue from 'vue'

实际引入的是dist/vue.runtime.esm.js，是一个不含模板解析器的js。

引入的js是配置在vue模块package.json的module配置项中。

如果要引入完整版的vue：

// 引入完整版的vue
import Vue from 'vue/dist/vue.js'

这时就可以正常的在new Vue中使用template配置。

如果使用了残缺版的vue，就需要使用render替换template配置。

例如：

template: `<h1>Hello</h2>`

替换为：

render(createElement) {return createElement('h1', 'Hello')
}

因为render没有用this，就可以简写为：

render:h => h('h1', 'Hello')

如果模板中的内容不是html标签，而是引入的组件，就可以写为：

render: h => h(App)

二、Vue库文件

vue组价的dist下有很多vue库文件：

其中vue.js是最完整最原始的vue，包括了Vue的核心功能和模板解析；

vue.runtime.xxxx.js是运行时库，里面移除了模板解析功能。

xxxx.esm.js是使用ES6进行模块化的库（ES6 Module）

xxxx.common.js使用CommonJS进行模块化的库

因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

对于.vue后缀的组件文件中使用标签配置的模板：

<template>{{msg}}
</template>

vue通过在package.json引入了vue-template-compiler来进行解析

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！

12-render函数相关推荐

十二、虚拟 DOM 和 render() 函数（1）
本章概要虚拟DOM render()函数 Vue.js 之所以执行性能高,一个很重要的原因就是它的虚拟 DOM 机制. 12.1 虚拟 DOM 浏览器在解析 HTML 文档时,会将文档中的元素.注释 ...
render函数和redirect函数的区别+反向解析
render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象) request对象:----->所有的请求 ...
render函数高级组件jsx基本使用
前言在学习了解组件复用的时候查看资料,看到了mixins,extend方法同时也查到了高级函数(Higher-Order Components)和jsx等字眼.听上去hoc和jsx有种高级的感觉,那 ...
vue.js - advance - render 函数小抄
vue.js推荐使用的扩展名为vue的组件模板,可以让标签的属性和内容都变得动态,这是很强大也很已用的能力.但是,如果我需要标签名本身都是可以动态的话,怎么办? 比如我希望提供一个标签,可以根据属性值 ...
vue之Render函数
(1)什么是Render函数先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如'特性'是一个& ...
gym中render()函数在远端server运行的解决方案
近来在跑gym上的环境时,遇到了如下的问题: pyglet.canvas.xlib.NoSuchDisplayException: Cannot connect to "None" ...
「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
vue iframe 中写script_vue: 单文件组件 render函数
使用vue-cli创建的vue项目,如何在这种项目中使用组建? 首先创建项目.启动项目我们再来了解一下目录结构,src文件夹是写逻辑代码的地方,public是最终渲染到浏览器的地方. 在public ...
vue render函数
Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数. 比如如下我想要实现如 ...

12-render函数

render函数

一、render的作用

二、Vue库文件

12-render函数相关推荐

最新文章

热门文章