必备技能三、render渲染函数
Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。
export const TablePlugins = {
install (Vue, opts) {
Vue.prototype.getCellRender = (h, cfgs, type = 'Button') => {
const comps = []
cfgs.forEach(cfg => {
cfg.size = cfg.size || 'small'
cfg.color = cfg.color || 'green'
cfg.disabled = cfg.disabled || false
tagProcess(cfg)
comps.push(h(cfg.tag || type, {
props: { ...cfg },
on: cfg.on,
style: { ...cfg.style },
'class': { ...cfg.class }
}, cfg.label, cfg.render))
})
return h('div', {
style: { display: 'inline-block' }
}, comps)
}
}
}
必备技能三、render渲染函数的更多相关文章
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table
基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- Render渲染函数和JSX
1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...
- Vue之render渲染函数和JSX的应用
一.模板缺陷 模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :typ ...
- 【js】vue 2.5.1 源码学习 (十一) 模板编译compileToFunctions渲染函数
大体思路(九) 本节内容: 1. compileToFunctions定位 1. compileToFunctions定位 ==> createCompiler = createCompiler ...
- 渲染函数render和函数式组件
vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...
- 普通组件定义渲染和render渲染组件的区别(三)
普通方式定义组件和效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- BBuBBBlesort!
题目描述 Snuke got an integer sequence of length N from his mother, as a birthday present. The i-th (1≦i ...
- AngularJs 中ngModel绑定HTML5 date数据同步问题
以下代码例子中,直接将date类型的input标签与ng-model对应的变量绑定,会出现内存数据和页面数据不一致的问题.虽然AngularJS是双向数据绑定,但是如果用下面的方法,在页面更新date ...
- 2)echo count(strlen("test")) 的输出为____
结果是 1: 因为count测的是单元的数目,你的一个数组就是一个单元,所以 他的结果就是1 题目出处: https://www.nowcoder.com/test/question/done?ti ...
- MAVEN实现多环境搭建
在实际的开发中,会遇到开发环境的不同(开发环境,测试环境,线上环境),会来回根据环境的不同修改配置文件,一不小心修改错误导致无法正常运行,故障排除导致开发效率低.使用maven可以根据环境的不同,自动 ...
- django自带数据库sqlite
python manage.py makemigrations # 记录关于models.py的所有改动,但是还没有作用的数据库文件中 python manage.py migrate # 把mode ...
- c/c++ main 函数命令行参数的使用
C程序最大的特点就是所有的程序都是用函数来装配的.main()称之为主函数,是所有程 序运行的入口.其余函数分为有参或无参两种,均由main()函数或其它一般函数调用,若调用的是有参函数,则参数在调用 ...
- Visual Studio通过Cordova支持混合跨平台移动开发
Microsoft在Visual Studio 2013 Update 2中添加了对混合跨平台移动应用程序的本地支持. Microsoft早在2011年就已经开始了与PhoneGap的合作,那时候是为 ...
- Android开发之《Module相互引用,NDK不能正常Debug》
解决Android Studio不能进入调试模式问题 Android Studio 2.2.3 native debug 无法调试?:https://www.zhihu.com/question/54 ...
- 转:CentOS7 常用命令集合
这两天一直在对CentOS 7.2进行初体验,各种学习命令肿么用,不过其实大多和DOS是一样的,只是命令的表达上可能有点儿不一样,毕竟这些都不是一家出来的嘛~ 废话不多说,直接上命令和解析! 常用 ...
- 图解教你如何使用ANT打包java程序
1:在eclipse中建立如下的工程 值得注意的就是build.xml文件(这个是重点后面会提到) ,其他HelloWorld中的就是一句简单的输出语句 2: 使用build打包(右键然后选择运行), ...