1.render函数的介绍

  1. vue中我们经常使用HTML模板语法来组建页面。
  2. 除此之外,使用还可以使用render函数来创建页面。
  3. 因为vue是虚拟DOM,拿到template模板时也要转译成VNode的函数。
  4. 而直接使用render函数构建DOMvue就免去了转译的过程。
  5. 通过上面这两句话,我们可以发现有这样一个结论:
  6. HTML模板语法来组建页面的渲染过程:
  7. 包含模板编译器:1.html字符串[就是template中的html]==》2.render函数==》3.VNode==》4.真实的节点
  8. 不包含模板编译器:1.render函数==》2.VNode==》3.真实的节点
  9. 也就是说:使用render函数编译的页面,由于少了一层【模板编译】。
  10. 渲染的速度要快一些。
  11. render函数的参数是 createElement 函数。
  12. createElement函数还有约定的简写叫h函数。
  13. vm中有一个方法_c,也是这个函数的别名。
  14. createElement 函数的返回值是一个虚拟节点。就是VNode
  15. 也就是我们要渲染的节点。
  16. render(h){
  17. return h('div',{
  18. //第二个参数
  19. class:{
  20. 'is-red': this.isRed
  21. }
  22. },
  23. //第三个参数
  24. [h('p','这是一个render')]
  25. );

2.h函数的三个参数

  1. 第一个参数是必须的。
  2. 类型:{String | Object | Function}
  3. 一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
  4. 是要渲染的html标签。
  5. 第一个参数div 是表示创建一个div的元素
  6. 第二个参数是可选的。
  7. 类型:{Object} 主要是当前html中的各种属性。
  8. attrsclassstyle
  9. 在开发时。建议传,实在没有传的时候,传入 null
  10. 第三个参数可选的。
  11. 类型:{String | Array | Object} children
  12. 虚拟子节点(vnodes),当前html标签的元素。
  13. 参考地址:https://www.cnblogs.com/weichen913/p/9676210.html

如何使用render函数实现以下html

  1. <div :class="{'is-red':isRed }">
  2. <p>这是一个render</p>
  3. </div>

render函数这样使用

创建一个XXX.js文件 代码如下

  1. // 这是render函数的使用方法
  2. export default{
  3. data(){
  4. return{
  5. isRed:true,
  6. arr:[1,2,3,4],
  7. inputValue:""
  8. }
  9. },
  10. // h 最终创建的是一个元素
  11. // 第一个参数div 是表示创建一个div区域的元素
  12. // 第二个参数class表示的是这个div上有一个属性
  13. // 第三个参数可以是数组,表示div元素下的子元素
  14. render(h){
  15. return h('div',{//第二个参数
  16. class:{
  17. 'is-red': this.isRed
  18. }
  19. },
  20. //第三个参数
  21. [h('p','这是一个render')]
  22. );
  23. }
  24. }
  1. 在使用的页面上引入注册(跟组件一样)
  2. import aa from "./myrender"
  3. components:{
  4. aa
  5. }
  6. <aa></aa>



vue render函数的简单使用(1)的更多相关文章

  1. vue render函数 函数组件化

    之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...

  2. vue render函数

    基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...

  3. vue render函数解析

    一.render 函数的作用: 写一些vue.js的template太繁琐,利用render,可以使用js来生成模板,更加灵活和简便. 二.使用render前提: 官网也说了.在深入渲染函数之前推荐阅 ...

  4. [转]iview render函数常用总结(vue render函数)

    原文地址:https://blog.csdn.net/weixin_43206949/article/details/89385550 iview 的render函数就是vue的render函数ivi ...

  5. vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化

    render函数使用jsx语法: 安装插件  transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...

  6. render函数的简单使用

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue render函数 函数时组件 jsx

    常规组件使用 定义组件 components/list/list.vue <template> <ul> <li v-for="(item, index) in ...

  8. 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶

    https://blog.csdn.net/wngzhem/article/details/54291024

  9. Vue渲染函数

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...

  10. iview中table的render()函数

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

随机推荐

  1. 只需2步,教你在Vue中设置登录验证拦截

    摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...

  2. 云小课 | 网站接入WAF失败怎么办?看这里就够了

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 网站接入WAF失 ...

  3. 火山引擎在行为分析场景下的ClickHouse JOIN优化

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 背景 火山引擎增长分析DataFinder基于ClickHouse来进行行为日志的分析,ClickHouse的主要 ...

  4. 多线程 ThreadPoolTaskExecutor 应用

    1.如何判断线程池所有任务是否执行完毕 package com.vipsoft.web; import org.junit.jupiter.api.Test; import org.slf4j.Log ...

  5. C++ Idioms Pimpl

    References C++ Coding Standard 這本書的中文版不知道是不是翻譯問題,還是原作就有這種傾向,有些咬文嚼字的很不好懂. Exceptional C++ 這本比上面那本容易理解 ...

  6. Vue | vuex安装失败解决的方法实例

    Vuex是一个专为Vue.js应用程序开发的状态管理模式 下面这篇文章主要给大家介绍了关于vuex安装失败解决的方法,文中通过图文介绍的非常详细,需要的朋友可以参考下 1.报错信息: npm ERR! ...

  7. POJ - 2259 Team Queue (队列)

    题目链接 https://vjudge.net/problem/POJ-2259 题解 在任何时刻,同一个小组的人只要来到了队伍,就会站在一起,所以我们建立一个队列q0存储队伍中所有小组的编号,再为每 ...

  8. L3-020 至多删三个字符 (30分) (DP)

    问题描述: 给定一个全部由小写英文字母组成的字符串,允许你至多删掉其中 3 个字符,结果可能有多少种不同的字符串? 输入格式: 输入在一行中给出全部由小写英文字母组成的.长度在区间 [4, 1e6] ...

  9. 活动回顾|阿里云 Serverless 技术实战与创新上海站回放&PPT下载

    5月27日"阿里云 Serverless 技术实战与创新"上海站圆满落幕.活动现场邀请了来自阿里云 一线技术专家,分享当前 Serverless 趋势和落地实践过程中的挑战和机遇: ...

  10. <vue初体验> 基础知识 1、vue的引入和使用体验

    系列导航 <vue初体验> 一. vue的引入和使用体验 <vue初体验> 二. vue的列表展示 <vue初体验> 三. vue的计数器 <vue初体验&g ...