render总结
vue渲染组件的顺序是:
执行render函数-->没有render参数解析template参数内容-->没有template参数将el内html当做template解析
其中解析template实质上是转换为render函数。
语法:
render: (createElement)=>{
return createElement(...)
}
备注: 此createElement非原生js方法中的createElement
难点和精髓在于传入的createElement函数
createElement语义上应该创建真实的dom元素,但实际上其真实的名称应该是createNodeDescription(创建节点说明),包含此节点的子节点及如何渲染等信息,
这里注意两点:
1.创建出的并非真实node,而多称之为虚拟节点(visual node),或简称为VNode,而虚拟dom(visual dom)是对由vNode组成的树的简称。
2.节点有许多种,元素节点、文本节点、注释节点(是的,注释也是节点~)。。
createElement的三个参数
1. 当前创建对象{string|Object|function} 必选
html标签字符串
Object组件选项对象
function函数返回前两者
2.数据对象{object} 可选
此VNode的属性对象
3.子节点 {string|Array} 可选
如果是string,则类似于innerHTML,作为文本节点嵌入
如果是array,数组元素可以是字符串(文本节点)或由createElement创建的VNode
例如:
var vm= new Vue({
render: h=> {
return h('p', ['11', h('span', '333')])
}
}).$mount('#a')
render总结的更多相关文章
- React.render和reactDom.render的区别
刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...
- XF custom render 各平台实现类
目前的XF还是非常简陋的,所以存在大量的自定义工作.一般情况下我们只是要需要派生原生的XF控件,然后在各平台下修改其呈现方法. 所以了解每个XF控件在不同平台上呈现使用的控件类是有所必须要的.以下别人 ...
- 塞翁失马,焉知非福:由 Styles.Render 所引发 runAllManagedModulesForAllRequests="true" 的思考
最近在使用 MVC 开发的时候,遇到一个对我来说"奇怪的问题",就是使用 BundleTable 进行 CSS.JS 文件绑定,然后使用 Styles.Render.Scripts ...
- ReactJS分析之入口函数render
前言 在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,进而进行layout和paint等步骤,这个函数就是React.render() ...
- Cesium原理篇:6 Render模块(3: Shader)
在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程渲染管线.之所以单独强调这一点,算是为本篇埋下一个伏笔.通过前两篇,我们介绍了VBO和Textur ...
- Cesium原理篇:6 Render模块(4: FBO)
Cesium不仅仅提供了FBO,也就是Framebuffer类,而且整个渲染过程都是在FBO中进行的.FBO,中文就是帧缓冲区,通常都属于高级用法,但其实,如果你了解了它的基本原理后,用起来还是很简单 ...
- Cesium原理篇:6 Render模块(5: VAO&RenderState&Command)
VAO VAO(Vertext Array Object),中文是顶点数组对象.之前在<Buffer>一文中,我们介绍了Cesium如何创建VBO的过程,而VAO可以简单的认为是基于VBO ...
- render :template 和 render :parital
1 .这两个都可以在controller和view中使用,而且好像可以替换,只是用:template,rails不会自动加下划线,用:partial,rails会自动添加下划线.而且规范的做法,:te ...
- AngularJs中,如何在render完成之后,执行Js脚本
AngularJs是Google开源的前端JS框架.使用AngularJs, 我们能够容易地.健壮的开发出类似于Gmail一样的单页Web应用.AngularJs这个新兴的MVC前端框架,具有以下特点 ...
- 利用Render Texture实现游戏的小雷达效果(摄影机分屏)
最近游戏蛮牛在举办一个活动,就是要做出这样的效果: 题目:实现游戏分屏效果 要求:1. 分屏,且分割线不规则(即非水平或垂直):2. 各屏可单独操作(移动.缩放),操作指该 ...
随机推荐
- Python--多进程--01
multiprocess import multiprocessing import time def worker_1(interval): print(' i am worker1') n=5 w ...
- windows和linux下目录分隔符兼容问题(换行回车兼容)
windows和linux下目录分隔符兼容 DIRECTORY_SEPARATOR 换行回车兼容 PHP_EOF
- 搭建SSH框架整合Struts2和Spring时,使用@Autowired注解无法自动注入
© 版权声明:本文为博主原创文章,转载请注明出处 1.问题描述: 搭建SSH框架,在进行Struts2和Spring整合时,使用Spring的@Autowired自动注入失败,运行报错java.lan ...
- setpgid()
#include<unistd.h> int setpgid(pid_t pid,pid_t pgid); 函数作用:将pid进程的进程组ID设置成pgid,创建一个新进程组或加入一个已存 ...
- Sphinx初探之安装
在Centos or redhat 安装Sphinx .首先安装依赖包 $ yum install postgresql-libs unixODBC .安装软件 $ rpm -Uhv sphinx-- ...
- Java中HashTable和HashMap的区别
在Java中,HashTable和HashMap都是哈希表,那么它们有什么区别呢? 1.它们所继承的类不一样. HashTable和HashMap都实现了Map接口,但是它们所继承的类时不同的.H ...
- 使用GnuPG(PGP)加密信息及数字签名教程_转
所谓加解密就是一方以密钥加密,另一外收到文件后以相对应的密钥解密,从而获取原始文件.数字签名的过程:信息是通过普通未加密方式发送信息给对方的,只是在每条信息后面都会附加一坨字符(名曰:签名)(或信息与 ...
- NGINX不允许向静态文件提交POST方式的请求,否则报405错误(apache中没有出现)
telnet *.*.*.* 80POST /map/navigation/2011winter/jsn/jsn_20120723_pack/pvf.jsnHTTP/1.1Host:*.*.*.* ( ...
- 为什么Goroutine能有上百万个,Java线程却只能有上千个?
作者|Russell Cohen 译者|张卫滨 本文通过 Java 和 Golang 在底层原理上的差异,分析了 Java 为什么只能创建数千个线程,而 Golang 可以有数百万的 Go ...
- java后端技术
技术概论:Springmvc+mybatis+shiro+Dubbo+ZooKeeper+Redis+KafKa j2ee分布式架构 我在恒生工作,主要开发金融互联网第三方平台的对接项目.目前已经对接 ...