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. 各屏可单独操作(移动.缩放),操作指该 ...
随机推荐
- xcode几个常用的快捷键
command + ctrl + e 修改变量的名称:选中某个变量,按下该快捷键,可以批量修改对应的变量名称 command + shift + j 定位到文档导航界面,然后通过上下方向键,可以快 ...
- sessionStorage / localStorage
var referurl = document.referrer; //上级网址 if(referurl.indexOf('address_order')>0){ //判断是否是从上一级地址跳转 ...
- Android+git+hudson+gradle持续集成
linux 主机 android sdk安装忽略 jdk安装忽略 hudson安装忽略 gradle安装 1:下载相应的gradle(这里是gradle-2.10-all.zip) 2 : 解 ...
- karma + phantom + mocha + sion + chai + nightwatch + selenium2(webdriver) 测试框架学习
第三方的教程传送门 https://segmentfault.com/a/1190000004558796 karma # github https://github.com/karma-runner ...
- python 中的"switch"用法
转载:http://python.jobbole.com/82008/ 为什么Python中没有Switch/Case语句? 不同于我用过的其它编程语言,Python 没有 switch / case ...
- C# virtual,override,new 整理
今天仔细学习了一下C#中virtual, override, new关键字,参考了网上的很多资料,现整理一下. Virtual: virtual 关键字用于修饰方法.属性.索引器或事件声明,并使它们可 ...
- 2017湘潭赛 A题 Determinant (高斯消元取模)
链接 http://202.197.224.59/OnlineJudge2/index.php/Problem/read/id/1260 今年湘潭的A题 题意不难 大意是把n*(n+1)矩阵去掉某一列 ...
- 如何搭建maven项目和搭建ssm框架
1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One ...
- java并发阻塞队列
Java 并发编程利用 Condition 来实现阻塞队列 You are here: 开发&语言 - Java 文章 发布于 2017年06月26日 阅读 944 并发编程 什么是阻 ...
- Java多线程中的竞争条件、锁以及同步的概念
竞争条件 1.竞争条件: 在java多线程中,当两个或以上的线程对同一个数据进行操作的时候,可能会产生“竞争条件”的现象.这种现象产生的根本原因是因为多个线程在对同一个数据进行操作,此时对该数据的操作 ...