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. 各屏可单独操作(移动.缩放),操作指该 ...
随机推荐
- [译] 通过 contentEditable 属性创建一个所见即所得的编辑器(富文本编辑器)
译者注 这只是一篇入门教程,介绍了一些基础知识,仅供参考,切不可因此觉得富文本编辑器很简单. 创建富文本编辑器是一个非常复杂的工程,需要考虑到方方面面,也有很多坑(请参考原文第一条评论). 为免误导大 ...
- C#实现发送手机短信
- 用Scratch2.0源码定制一个自己的编辑器
用Scratch2.0源码定制一个自己的编辑器,换成自己的软件名称和图标,添加中文字体,修复汉化错误等等1.准备:下载Scratch2.0源码.安装开发工具Adobe Flash Builder4.7 ...
- Atitit.Java exe bat 作为windows系统服务程序运行
Atitit.Java exe bat 作为windows系统服务程序运行 1. 使用SC命令+srvany.exe (不错,推荐)+net start1 1.1. First 创建一个java的运 ...
- opencv--python--anaconda----contrib 安装
https://pypi.python.org/pypi/opencv-python/3.4.0.12 https://pypi.python.org/pypi?%3Aaction=search&am ...
- iOS 控制器title和tabbar的title设置问题
iOS 设置tabbarItem的title的是通过 controller.tabBarItem.title = @"标题" iOS 设置导航栏控制器title通过 contoll ...
- Unable to resolve address ' ' service ' ': Name or service not known
感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免.欢迎指正. 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...
- QT应用程序 安装路径中文异常问题
[1]QT 安装中文路径启动异常问题 最近在搞一个很简单的QT应用程序,开发环境VS2017 + QT5.9,线上异常报错:安装中文路径下启动崩溃~~~~ 最后,本地调试Debug版本,发现安装中文路 ...
- UGUI随记
<color=#ffef00ff>武器</color>:巨剑 <color=#ffef00ff>种族</color>:人族 <color=#ffe ...
- 获取系统时间的DOS命令
DOS C:\Users\yaozhendong>echo %date:~0,10% %time%2011/12/24 19:45:41.25 前段时间工作中需要对一个地址做定时PING操作,并 ...