vue render函数的简单使用(1)
1.render函数的介绍
在vue中我们经常使用HTML模板语法来组建页面。
除此之外,使用还可以使用render函数来创建页面。
因为vue是虚拟DOM,拿到template模板时也要转译成VNode的函数。
而直接使用render函数构建DOM。vue就免去了转译的过程。
通过上面这两句话,我们可以发现有这样一个结论:
HTML模板语法来组建页面的渲染过程:
包含模板编译器:1.html字符串[就是template中的html]==》2.render函数==》3.VNode==》4.真实的节点
不包含模板编译器:1.render函数==》2.VNode==》3.真实的节点
也就是说:使用render函数编译的页面,由于少了一层【模板编译】。
渲染的速度要快一些。
render函数的参数是 createElement 函数。
createElement函数还有约定的简写叫h函数。
vm中有一个方法_c,也是这个函数的别名。
createElement 函数的返回值是一个虚拟节点。就是VNode。
也就是我们要渲染的节点。
render(h){
return h('div',{
//第二个参数
class:{
'is-red': this.isRed
}
},
//第三个参数
[h('p','这是一个render')]
);
2.h函数的三个参数
第一个参数是必须的。
类型:{String | Object | Function}
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div 是表示创建一个div的元素
第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs,class,style等
在开发时。建议传,实在没有传的时候,传入 null
第三个参数可选的。
类型:{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。
参考地址:https://www.cnblogs.com/weichen913/p/9676210.html
如何使用render函数实现以下html
<div :class="{'is-red':isRed }">
<p>这是一个render</p>
</div>
render函数这样使用
创建一个XXX.js文件 代码如下
// 这是render函数的使用方法
export default{
data(){
return{
isRed:true,
arr:[1,2,3,4],
inputValue:""
}
},
// h 最终创建的是一个元素
// 第一个参数div 是表示创建一个div区域的元素
// 第二个参数class表示的是这个div上有一个属性
// 第三个参数可以是数组,表示div元素下的子元素
render(h){
return h('div',{//第二个参数
class:{
'is-red': this.isRed
}
},
//第三个参数
[h('p','这是一个render')]
);
}
}
在使用的页面上引入注册(跟组件一样)
import aa from "./myrender"
components:{
aa
}
<aa></aa>
vue render函数的简单使用(1)的更多相关文章
- vue render函数 函数组件化
之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- vue render函数解析
一.render 函数的作用: 写一些vue.js的template太繁琐,利用render,可以使用js来生成模板,更加灵活和简便. 二.使用render前提: 官网也说了.在深入渲染函数之前推荐阅 ...
- [转]iview render函数常用总结(vue render函数)
原文地址:https://blog.csdn.net/weixin_43206949/article/details/89385550 iview 的render函数就是vue的render函数ivi ...
- vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化
render函数使用jsx语法: 安装插件 transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...
- render函数的简单使用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue render函数 函数时组件 jsx
常规组件使用 定义组件 components/list/list.vue <template> <ul> <li v-for="(item, index) in ...
- 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶
https://blog.csdn.net/wngzhem/article/details/54291024
- Vue渲染函数
前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...
- iview中table的render()函数
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
随机推荐
- 只需2步,教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...
- 云小课 | 网站接入WAF失败怎么办?看这里就够了
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 网站接入WAF失 ...
- 火山引擎在行为分析场景下的ClickHouse JOIN优化
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 背景 火山引擎增长分析DataFinder基于ClickHouse来进行行为日志的分析,ClickHouse的主要 ...
- 多线程 ThreadPoolTaskExecutor 应用
1.如何判断线程池所有任务是否执行完毕 package com.vipsoft.web; import org.junit.jupiter.api.Test; import org.slf4j.Log ...
- C++ Idioms Pimpl
References C++ Coding Standard 這本書的中文版不知道是不是翻譯問題,還是原作就有這種傾向,有些咬文嚼字的很不好懂. Exceptional C++ 這本比上面那本容易理解 ...
- Vue | vuex安装失败解决的方法实例
Vuex是一个专为Vue.js应用程序开发的状态管理模式 下面这篇文章主要给大家介绍了关于vuex安装失败解决的方法,文中通过图文介绍的非常详细,需要的朋友可以参考下 1.报错信息: npm ERR! ...
- POJ - 2259 Team Queue (队列)
题目链接 https://vjudge.net/problem/POJ-2259 题解 在任何时刻,同一个小组的人只要来到了队伍,就会站在一起,所以我们建立一个队列q0存储队伍中所有小组的编号,再为每 ...
- L3-020 至多删三个字符 (30分) (DP)
问题描述: 给定一个全部由小写英文字母组成的字符串,允许你至多删掉其中 3 个字符,结果可能有多少种不同的字符串? 输入格式: 输入在一行中给出全部由小写英文字母组成的.长度在区间 [4, 1e6] ...
- 活动回顾|阿里云 Serverless 技术实战与创新上海站回放&PPT下载
5月27日"阿里云 Serverless 技术实战与创新"上海站圆满落幕.活动现场邀请了来自阿里云 一线技术专家,分享当前 Serverless 趋势和落地实践过程中的挑战和机遇: ...
- <vue初体验> 基础知识 1、vue的引入和使用体验
系列导航 <vue初体验> 一. vue的引入和使用体验 <vue初体验> 二. vue的列表展示 <vue初体验> 三. vue的计数器 <vue初体验&g ...