渲染函数 , 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. Linux服务器配置---配置telnet

    配置telnet      通过配置文件,我们可以设置telnet的连接时间.连接数.连接ip等,实现更加安全的连接 1.设置连接时间,参数“access_times” [root@localhost ...

  2. Xcode10.x适配的部分问题

    因为我们项目是一个Workspace,由若干个库组成(组件化比较碎),又涉及到海外和国内(存在很多差异性),整个项目的编译是由每个库的脚本(每个库生成会支持32位和64位,每次编译前会清除历史缓存), ...

  3. 程序猿职场心理学,教你三进三出“斩”HR拿offer(跳槽必看)

    摘要: 今天主要涉及到的是 HR 在面试时有哪些套路,这样可以见招拆招,斩获 offer! 今天主要涉及到的是 HR 在面试时有哪些套路,这样可以见招拆招,斩获 offer! 主要包括以下内容: 一. ...

  4. P4180 【模板】严格次小生成树[BJWC2010]

    P4180 [模板]严格次小生成树[BJWC2010] 倍增(LCA)+最小生成树 施工队挖断学校光缆导致断网1天(大雾) 考虑直接枚举不在最小生成树上的边.但是边权可能与最小生成树上的边相等,这样删 ...

  5. C_Learning (4)

    / 预处理命令 / 宏定义 / 一般形式:#define 宏名 字符串 # 表示这是一条预处理命令 宏名是一个标识符,必须符合C语言标识符的规定 字符串可以是常数.表达式.格式化字符串等 / 注意: ...

  6. OpenCV相关网站推荐(Informative websites related to OpenCV)

    原文来自:http://answers.opencv.org/question/69691/informative-websites-related-to-opencv/ i think it wil ...

  7. 20145313张雪纯Exp8 Web基础

    回答问题 (1)什么是表单 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框. ...

  8. Android实践项目汇报总结(下)

    微博客户端的设计与实现(下) 第四章 系统详细功能实现 本应用实现了如下主要模块:程序启动模块.登录授权模块.主界面显示模块撰写发表微博模块.用户发布信息模块.软件设置模块. 4.1程序启动模块实现 ...

  9. Educational Codeforces Round 21 Problem D(Codeforces 808D)

    Vasya has an array a consisting of positive integer numbers. Vasya wants to divide this array into t ...

  10. vijos 1098 合唱队形 - 动态规划

    描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2…,K,他们的身高分别为T1,T2,…, ...