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. [译] 通过 contentEditable 属性创建一个所见即所得的编辑器(富文本编辑器)

    译者注 这只是一篇入门教程,介绍了一些基础知识,仅供参考,切不可因此觉得富文本编辑器很简单. 创建富文本编辑器是一个非常复杂的工程,需要考虑到方方面面,也有很多坑(请参考原文第一条评论). 为免误导大 ...

  2. C#实现发送手机短信

  3. 用Scratch2.0源码定制一个自己的编辑器

    用Scratch2.0源码定制一个自己的编辑器,换成自己的软件名称和图标,添加中文字体,修复汉化错误等等1.准备:下载Scratch2.0源码.安装开发工具Adobe Flash Builder4.7 ...

  4. Atitit.Java exe bat  作为windows系统服务程序运行

    Atitit.Java exe bat  作为windows系统服务程序运行 1. 使用SC命令+srvany.exe (不错,推荐)+net start1 1.1. First 创建一个java的运 ...

  5. opencv--python--anaconda----contrib 安装

    https://pypi.python.org/pypi/opencv-python/3.4.0.12 https://pypi.python.org/pypi?%3Aaction=search&am ...

  6. iOS 控制器title和tabbar的title设置问题

    iOS 设置tabbarItem的title的是通过 controller.tabBarItem.title = @"标题" iOS 设置导航栏控制器title通过 contoll ...

  7. Unable to resolve address &#39; &#39; service &#39; &#39;: Name or service not known

    感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免.欢迎指正. 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  8. QT应用程序 安装路径中文异常问题

    [1]QT 安装中文路径启动异常问题 最近在搞一个很简单的QT应用程序,开发环境VS2017 + QT5.9,线上异常报错:安装中文路径下启动崩溃~~~~ 最后,本地调试Debug版本,发现安装中文路 ...

  9. UGUI随记

    <color=#ffef00ff>武器</color>:巨剑 <color=#ffef00ff>种族</color>:人族 <color=#ffe ...

  10. 获取系统时间的DOS命令

    DOS C:\Users\yaozhendong>echo %date:~0,10% %time%2011/12/24 19:45:41.25 前段时间工作中需要对一个地址做定时PING操作,并 ...