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里 ...
随机推荐
- 修練營ASP.NET]淺談多層式架構 (Multi Tiers)
從需求談起 我們舉個小例子來理解一般的方式與多層的方式有何不同 假設:我需要顯示最近三個月內,所有營業員的銷售金額成績排名 一般的做法: 在一個畫面中,拉個GridView,一個SqlDataSouc ...
- 原 用Tomcat服务器配置https双向认证过程实战
什么是https? 百度百科足够解释它:http://baike.baidu.com/view/14121.htm 工具:keytool (Windows下路径:%JAVA_HOME%/bin/key ...
- mysql日志文件目录
默认情况下mysql的二进制日志文件保存在默认的数据目录data下,如:/usr/local/mysql/data 修改日志保存目录(/backup/mysqlbinlog/mysql-bin)的话: ...
- python之路----黏包的解决方案
黏包的解决方案 远程执行命令 # server 下发命令 给client import socket sk = socket.socket() sk.bind(('127.0.0.1',8080)) ...
- 浅谈elasticsearch 集群
elasticsearch 集群 摘要: elasticsearch 集群 搭建elasticsearch的集群 现在假设我们有3台es机器,想要把他们搭建成为一个集群 基本配置 每个节点都要进行这样 ...
- python的os模块和sys模块
os模块 os.getcwd() 获取当前的工作目录 os.chdir('绝对路径/相对于当前工作目录的路径') 改变工作目录,相当于shell的cd命令,例如Windows平台下os.chdir ...
- bzoj1649 / P2854 [USACO06DEC]牛的过山车Cow Roller Coaster
P2854 [USACO06DEC]牛的过山车Cow Roller Coaster dp 对铁轨按左端点排个序,蓝后就是普通的二维dp了. 设$d[i][j]$为当前位置$i$,成本为$j$的最小花费 ...
- mysql hang and srv_error_monitor_thread using 100% cpu(已解决)
昨天晚上,运维过来说有台生产服务器的mysql cpu一直100%,新的客户端登录不了,但是已经在运行的应用都正常可用. 登录服务器后,top -H看了下,其中一个线程的cpu 一直100%,其他的几 ...
- 20145216史婧瑶《网络对抗》Web基础
20145216史婧瑶<网络对抗>Web基础 实验问题回答 (1)什么是表单 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签.表单域.表单按钮. (2)浏览器可以 ...
- C++ vector 删除一个指定元素 和 find 一个指定元素以及遍历删除、 map遍历删除元素和删除find到的元素
vector: 1.delete element 转载:http://www.cnblogs.com/xudong-bupt/p/3522457.html #include <vector> ...