Vue.js 渲染函数, JSX(未掌握,未学完)
渲染函数 , JSX(没完成学习)
基础:
实例属性:vm.$slots
default 属性包括了所有没有被包含在具名插槽中的节点.
渲染函数:
render: function(createElement) {
return createElement('h1', xxxxxx)
}
案例:
<anchored-heading>中的Hello world!是文本节点,它被储存在组件实例中的$slots.default:
在render中加上console.log(this.$slots.default)会得到:

在render中加上console.log(this.$slots)会得到:

完全的代码:

节点、树以及虚拟 DOM
HTML DOM节点树中:每个元素,每个text,每个注释,都是节点。
Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。
createElement返回的是一个虚拟的DOM元素。一个createNodeDescription, 即为创建真实DOM所需的信息。因此,创建的节点叫Virturl Node. VNode。
createElement参数
具体参数需要看https://cn.vuejs.org/v2/guide/render-function.html
三部分:
- {String | Object | Function} 产生一个HTML标签
- {Object} 一个包含模版相关属性的数据对象,用于在template中使用。
- {String | Array} 子节点VNodes, 由 `createElement()` 构建而成,或者是String产生的'文本节点'
Vue.js 渲染函数, JSX(未掌握,未学完)的更多相关文章
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- vue.js 渲染完成回调
vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...
- vue 渲染函数&jsx
前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多, 所把要js和html混写. vue 的动态js操作 html 方法:reader函数: vue ...
- vue从入门到进阶:渲染函数 & JSX(八)
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- vue渲染函数&JSX
Vue推荐在绝大多数情况下使用template来创建你的HTML.然而在一些场景中,你真的需要JavaScript的完全编程能力,这时你可以使用render函数,它比template跟接近编译器. 虚 ...
- Vue基础-渲染函数-插槽
Vue 测试版本:Vue.js v2.5.13 先看个插槽的例子: <div id="app"> <child > <span slot-scope= ...
- Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
- vue.js created函数注意事项
因为created钩子函数是页面一加载完就会调用的函数,所以如果你想在这个组件拿值或者是赋值,很可能this里面能拿到数据,但是如果你用this.赋值的话,控制台或者debugger都会发现this里 ...
随机推荐
- 全文搜索引擎ElasticSearch学习记录:mac下安装
最近开发组培训了ElasticSearch,准备开展新项目,我也去凑了下热闹,下面把学习过程记录一下. 一.安装 1.环境需要jdk1.8; 2.下载:http://www.elastic.co/do ...
- SQL查询日历
这东西给自己留着用. 经常会用到一些查询需要做全月统计,但有些时候的统计需要将未发生日期也显示出来,因此会需要一个固定的日期表,(T6的自定义查询估计也是需要的,至少以前是这样) 下面写两种方法来获取 ...
- Java设计模式应用——适配器模式
性能监控系统中,存在告警模块和报表模块,告警结果和报表结果都需要导出. 由于告警开发进度较快,已经实现了excel导出.csv导出.zip导出功能,现在报表需要excel导出.csv导出.pdf导出功 ...
- 20165207 Exp0 Kali安装
Exp0 Kali安装 选哪个 在打开www.kali.org的网页之后,我进入其下载页面,可供下载的kali版本有很多 对于选择哪个版本,在实验楼我用过xfce桌面.下面还有直接下下来就可以在vm里 ...
- QAQ的LIS树 QAQ的LIS树2 题解报告
这两道题实际上考试的时候是一道题OwO 太可怕了,忙了我三个多小时,写了整整7K 这个题两个询问关联性不强,所以分开来考虑 QAQ的LIS树 考虑如何用dp求解答案 设dp(v)表示v到根的修改后的序 ...
- JavaScript 方法扩展
一.String全部替换方法 String.prototype.replaceAll = function(s1, s2){ return this.replace(new RegExp(s1, &q ...
- SNMP学习笔记之SNMP4J介绍(Java)
0x00 SNMP4J介绍 SNMP4J是一个用Java来实现SNMP(简单网络管理协议)协议的开源项目.它支持以命令行的形式进行管理与响应.SNMP4J是纯面向对象设计与SNMP++(用C++实现S ...
- Java 执行jar文件出现版本错误信息
Java 执行jar文件出现版本错误信息 一.问题 执行jar文件出现如下错误信息: 二.解决方案 是因为在创建工程的时候选择的jdk编译版本,和执行jar环境的jdk版本不一致: 更改工程的jdk版 ...
- 05: MySQL高级查询
MySQL其他篇 目录: 参考网站 1.1 GROUP BY分组使用 1.2 mysql中NOW(),CURDATE(),CURTIME()的使用 1.3 DATEDIFF() 函数 1.4 DATE ...
- 20145104张家明 《Java程序设计》第10周学习总结
20145104张家明 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程就是两个或多个设备(程序)之间的数据交换. 识别网络上的每个设备:①IP地址②域名(Dom ...