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里 ...
随机推荐
- Yahoo数据仓库架构简介
1. Yahoo数据仓库的整体架构 Yahoo数据仓库在基础架构上由hadoop集群和Oracle集群组成,hadoop集群是一个计算平台,完成所有ETL数据处理过程:Oracle集群只是一个查询环境 ...
- chrome谷歌浏览器用这种方式清除缓存比较方便了,必须是调试模式才行
chrome谷歌浏览器用这种方式清除缓存比较方便了 PS:必须是调试模式才行,可以不是手机模式 ,有些低版本浏览器可能没有这个功能. ----------------------------- ...
- JavaScript位运算符 2
按位运算符是把操作数看作一系列单独的位,而不是一个数字值.所以在这之前,不得不提到什么是“位”: 数值或字符在内存内都是被存储为0和 1的序列,每个0和1被称之为1个位,比如说10进制数据2在计算机内 ...
- redis 主从同步搭建
redis 一主二从 1.redis 安装 安装教程:https://www.cnblogs.com/zwcry/p/9505949.html 2.redis主从 1)创建主从目录 mkdir /us ...
- Qt之美(一):D指针/私有实现
The English version is available at: http://xizhizhu.blogspot.com/2010/11/beauty-of-qt-1-d-pointer-p ...
- 又一国产855旗舰突然现身:支持5G
12月28日消息,中国联通官方微博放出了vivo NEX 5G版样机.如图所示,该机搭载骁龙855移动平台及X50 5G调制解调器. 早在8月30日,vivo就宣布完成了面向商用5G智能手机的软硬件开 ...
- c++第十六天
p99~p101: 1.迭代器的指向:容器内的元素或者尾元素的下一位. 2.迭代器与整数相加减返回值为移动了若干位置的迭代器. 3.迭代器间相加减返回值则是类型为 difference_type 的带 ...
- Mysql 更改编码方式
Mysql 更改编码方式 --查看编码方式 show variables like 'char%'; --设置编码方式 set character_set_server=utf8;
- 如何用tomcat发布自己的Java项目
如何用tomcat发布自己的Java项目 tomcat是什么?它是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器.我们用Java开发出来的web项目,通过tomcat发布出来,别人就可 ...
- Linux-进程间的通信-信号集函数【转】
我们已经知道,我们可以通过信号来终止进程,也可以通过信号来在进程间进行通信,程序也可以通过指定信号的关联处理函数来改变信号的默认处理方式,也可以屏蔽某些信号,使其不能传递给进程.那么我们应该如何设定我 ...