渲染函数 , 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(未掌握,未学完)的更多相关文章

  1. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  2. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  3. vue.js 渲染完成回调

    vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...

  4. vue 渲染函数&jsx

    前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多,  所把要js和html混写. vue 的动态js操作 html  方法:reader函数: vue  ...

  5. vue从入门到进阶:渲染函数 & JSX(八)

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  6. vue渲染函数&JSX

    Vue推荐在绝大多数情况下使用template来创建你的HTML.然而在一些场景中,你真的需要JavaScript的完全编程能力,这时你可以使用render函数,它比template跟接近编译器. 虚 ...

  7. Vue基础-渲染函数-插槽

    Vue 测试版本:Vue.js v2.5.13 先看个插槽的例子: <div id="app"> <child > <span slot-scope= ...

  8. Vue基础-渲染函数-父子组件-传递数据

    Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...

  9. vue.js created函数注意事项

    因为created钩子函数是页面一加载完就会调用的函数,所以如果你想在这个组件拿值或者是赋值,很可能this里面能拿到数据,但是如果你用this.赋值的话,控制台或者debugger都会发现this里 ...

随机推荐

  1. FastJson(阿里巴巴)基础

    一.所需jar包: fastjson-x.x.xx.jar(本例使用fastjson-1.1.36.jar). 二.解析转化: 1.json字符串  < ------ >  js trin ...

  2. Spring,Struts2,MyBatis,Activiti,Maven,H2,Tomcat集成(四)——Activiti集成

    1.添加Activiti Maven依赖: <!-- ==============================activiti=========================== --&g ...

  3. JProfiler8 远程监控tomcat配置过程

    1. 阅读人群 1.熟悉liunx服务器,起码知道liunx常见的命令 2.熟悉tomcat容器,起码知道怎么tomcat的启动以及停止 3.熟悉java编程语言,JProfiler8是专门监控jav ...

  4. 2016NOI冬令营day1

    感冒了!!!: ( 上午听 picks 讲多项式导论(所有内容均不考)只听懂了那个O(n1.585)的多项式乘法算法 : ( 安装好了弹幕!太厉害了(有电脑的都在刷弹幕) :  ( 中午吃的不错 : ...

  5. 20145335郝昊《网络攻防》Exp5 MS08_067漏洞测试

    20145335郝昊<网络攻防>Exp5 MS08_067漏洞测试 实验内容 了解掌握metasploit平台的一些基本操作,能学会利用已知信息完成简单的渗透操作. 漏洞MS08_067: ...

  6. linux内核分析 第3章读书笔记

    第三章 进程管理 一.进程 1.进程 进程就是处于执行期的程序. 进程就是正在执行的程序代码的实时结果. 进程是处于执行期的程序以及相关的资源的总称. 进程包括代码段和其他资源. 2.线程 执行线程, ...

  7. P3939 数颜色

    目录 题目 思路1(待修莫队) 思路2(vector+二分) 代码1 代码2 题目 P3939 数颜色 思路1(待修莫队) 哇,这不是莫队模板题吗 3e5,TLE45分 不行 我有信仰啊 pow(n, ...

  8. 联合权值dp

    联合权值 洛谷中可找到 题目传送门https://www.luogu.org/problemnew/show/P1351 这题我就得了70分(TLE)  GG了 就是遍历它孩子的孩子(爷爷和孙子),然 ...

  9. Java ArrayDeque源码剖析

    ArrayDeque 本文github地址 前言 Java里有一个叫做Stack的类,却没有叫做Queue的类(它是个接口名字).当需要使用栈时,Java已不推荐使用Stack,而是推荐使用更高效的A ...

  10. 02_HBase集群部署

    HBase集群部署 HBase是分布式数据库,本身也需要借助zookeeper进行集群节点间的协调(Master, RegionServer), 可以使用HBase自带的zookeeper,也可以使用 ...