vue render 渲染html,详解vue渲染函数render的使用
1.什么是render函数?
vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。
比如如下我想要实现如下html:
Hello world!
我们会如下使用:
演示Vue
Hello world!
Vue.component('tb-heading', {
template: '#templateId',
props: {
level: {
type: Number,
required: true
}
}
});
new Vue({
el: '#container'
});
2.例:
遇到的问题:
在工作中,我创建了一个button组件,又创建了一个button-group组件
button组件较为简单,就是一个可以输入type/size/icon等属性的button
此为渲染后结果。
然后,创建button-group组件,目标结果为
此处,不仅要在最外层包裹一层div,还要在每个button组件外层包裹一层p标签。此处,就需要使用render函数了。
既然有了render函数,就不再需要template标签了,vue文件中只需要script标签(该组件style是全局的)
button-group.vue如下
export default {
name: "XButtonGroup",
props: {
compact: { //自定义的button-group属性,影响其classname
type: Boolean,
default: true
}
},
render(createElement) {
//此处创建element
},
computed: {
groupClass() {
const className = ["field"]; //通过计算属性监听compact属性传入className
className.push(this.compact ? "has-addons" : "is-grouped");
return className;
}
}
};
接下来就要看render函数了。
render函数中的createElement方法有三个参数。第一个参数为外层标签名,第二个为外层标签的属性对象,第三个为外层标签中的内容
所以第一步
render(createElement) {
return createElement(
'div', {
class: this.groupClass
}, '内容',
)
}
渲染结果:
那怎样在外层div中渲染button组件呢?
render函数的第三个参数除了字符串,还可以传入VNode的数组。VNode就是vue中的节点。
此处,我们通过this.$slots.default获取所有插入到button-group组件内默认slot的button节点
render(createElement) {
return createElement(
'div', {
class: this.groupClass
}, this.$slots.default,
)
},
渲染结果:
button已经正确渲染到了外层div中。但是怎么在每个button外层包裹一层元素呢。createElement会创建新的VNode,而render函数第三个参数需要VNode数组,所以我们需要传入一个由createElement返回值组成的数组。
render(createElement) {
//遍历每一个VNode,用createElement函数在外层包裹class为control的p标签,组成新的VNode数组
const arry = this.$slots.default.map(VNode => {
return createElement('p', {
class: 'control'
}, [VNode])
})
return createElement(
'div', {
class: this.groupClass
}, arry,
)
},
渲染结果:
并且根据button-group的compact属性可以切换不同的class,生成不同的效果
{{item}}
{{item}}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue render 渲染html,详解vue渲染函数render的使用相关推荐
- 实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
- render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
- vue 调取本地wps_详解VUE调用本地json的使用方法
开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况. 下面我说下我这的情况,大家依情况代 ...
- vue数组刷新_详解VUE 数组更新
1.数据方法分类: (1)原数组改变 push pop unshift shift reverse sort splice (2)原数组未变,生成新数组 slice concat filter 对于使 ...
- php接收vue请求数据axios,详解vue axios用post提交的数据格式
Content-type的几种常见类型 一.是什么? 是Http的实体首部字段,用于说明请求或返回的消息主体是用何种方式编码,在request header和response header里都存在. ...
- vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
最新文章
- JS如何获取RadiobuttonList的选中值
- php代码时间控制,PHP 网页过期时间的控制代码
- unity串口 连接多个串口崩溃_3分钟全面了解串口服务器原理技术
- 解决Android的adb命令行报错Permission denied
- Docker镜像重命名
- Linux ls -l 各字段解释,硬链接软连接
- 百度地图 变黑问题 解决方法
- Proximal Algorithm 入门
- Java通过jacob生成动态word,还有一种方法通过word书签实现
- 推荐8个优质生产力工具,让你效率升级!
- TCP/IP协议数据链路层
- DBCO-PEG-SAS DBCO--聚乙二醇-琥珀酰亚胺琥珀酰亚胺酯
- arduino通过CNC SHIELD(A4988)控制两个步进电机
- Peter Coad的7项修炼
- 团队管理课程培训心得(二)
- 财务分析与决策:同型分析【转】
- vb.net2008下载地址
- java 去小数方法
- 海狮号水下机器人_海狮(SeaLion)小型水下遥控机器人(ROV)
- PHP数组排序函数:sort、asort和ksort的不同
热门文章
- java函数改变参数值_Java函数参数值正在改变
- 利用Python制作一个“电子记事本”
- 研发管理三部曲——贰 · 研发管理应该干什么
- 学习VIM之2014
- [译] PHP 的变量实现(给PHP开发者的PHP源码-第三部分)
- 一、SCVMM2008R2安装部署
- [转]Why Not Paxos
- Java模拟HTTP的Get和Post请求(增强)
- 路由器访问控制列表基础知识
- [转]html控件、html服务器控件和web服务器控件的区别