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总结的更多相关文章

  1. React.render和reactDom.render的区别

    刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...

  2. XF custom render 各平台实现类

    目前的XF还是非常简陋的,所以存在大量的自定义工作.一般情况下我们只是要需要派生原生的XF控件,然后在各平台下修改其呈现方法. 所以了解每个XF控件在不同平台上呈现使用的控件类是有所必须要的.以下别人 ...

  3. 塞翁失马,焉知非福:由 Styles.Render 所引发 runAllManagedModulesForAllRequests="true" 的思考

    最近在使用 MVC 开发的时候,遇到一个对我来说"奇怪的问题",就是使用 BundleTable 进行 CSS.JS 文件绑定,然后使用 Styles.Render.Scripts ...

  4. ReactJS分析之入口函数render

    前言 在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,进而进行layout和paint等步骤,这个函数就是React.render() ...

  5. Cesium原理篇:6 Render模块(3: Shader)

    在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程渲染管线.之所以单独强调这一点,算是为本篇埋下一个伏笔.通过前两篇,我们介绍了VBO和Textur ...

  6. Cesium原理篇:6 Render模块(4: FBO)

    Cesium不仅仅提供了FBO,也就是Framebuffer类,而且整个渲染过程都是在FBO中进行的.FBO,中文就是帧缓冲区,通常都属于高级用法,但其实,如果你了解了它的基本原理后,用起来还是很简单 ...

  7. Cesium原理篇:6 Render模块(5: VAO&RenderState&Command)

    VAO VAO(Vertext Array Object),中文是顶点数组对象.之前在<Buffer>一文中,我们介绍了Cesium如何创建VBO的过程,而VAO可以简单的认为是基于VBO ...

  8. render :template 和 render :parital

    1 .这两个都可以在controller和view中使用,而且好像可以替换,只是用:template,rails不会自动加下划线,用:partial,rails会自动添加下划线.而且规范的做法,:te ...

  9. AngularJs中,如何在render完成之后,执行Js脚本

    AngularJs是Google开源的前端JS框架.使用AngularJs, 我们能够容易地.健壮的开发出类似于Gmail一样的单页Web应用.AngularJs这个新兴的MVC前端框架,具有以下特点 ...

  10. 利用Render Texture实现游戏的小雷达效果(摄影机分屏)

    最近游戏蛮牛在举办一个活动,就是要做出这样的效果: 题目:实现游戏分屏效果 要求:1.        分屏,且分割线不规则(即非水平或垂直):2.        各屏可单独操作(移动.缩放),操作指该 ...

随机推荐

  1. xcode几个常用的快捷键

    command + ctrl + e   修改变量的名称:选中某个变量,按下该快捷键,可以批量修改对应的变量名称 command + shift + j 定位到文档导航界面,然后通过上下方向键,可以快 ...

  2. sessionStorage / localStorage

    var referurl = document.referrer; //上级网址 if(referurl.indexOf('address_order')>0){ //判断是否是从上一级地址跳转 ...

  3. Android+git+hudson+gradle持续集成

    linux 主机   android sdk安装忽略 jdk安装忽略 hudson安装忽略 gradle安装 1:下载相应的gradle(这里是gradle-2.10-all.zip)  2 :  解 ...

  4. karma + phantom + mocha + sion + chai + nightwatch + selenium2(webdriver) 测试框架学习

    第三方的教程传送门 https://segmentfault.com/a/1190000004558796 karma # github https://github.com/karma-runner ...

  5. python 中的"switch"用法

    转载:http://python.jobbole.com/82008/ 为什么Python中没有Switch/Case语句? 不同于我用过的其它编程语言,Python 没有 switch / case ...

  6. C# virtual,override,new 整理

    今天仔细学习了一下C#中virtual, override, new关键字,参考了网上的很多资料,现整理一下. Virtual: virtual 关键字用于修饰方法.属性.索引器或事件声明,并使它们可 ...

  7. 2017湘潭赛 A题 Determinant (高斯消元取模)

    链接 http://202.197.224.59/OnlineJudge2/index.php/Problem/read/id/1260 今年湘潭的A题 题意不难 大意是把n*(n+1)矩阵去掉某一列 ...

  8. 如何搭建maven项目和搭建ssm框架

    1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One ...

  9. java并发阻塞队列

    Java 并发编程利用 Condition 来实现阻塞队列 You are here:  开发&语言 - Java 文章 发布于 2017年06月26日  阅读 944 并发编程   什么是阻 ...

  10. Java多线程中的竞争条件、锁以及同步的概念

    竞争条件 1.竞争条件: 在java多线程中,当两个或以上的线程对同一个数据进行操作的时候,可能会产生“竞争条件”的现象.这种现象产生的根本原因是因为多个线程在对同一个数据进行操作,此时对该数据的操作 ...