render: h => h(App)是ES6的写法,其实就是如下内容的简写:

render: function (createElement) {
return createElement(App);
}

官方文档中是这样的,createElement 是 Vue.js 里面的 函数,这个函数的作用就是生成一个 VNode节点,render 函数得到这个 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。

render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
}

然后ES6写法,

render: createElement => createElement(App)

然后用h代替createElement,使用箭头函数来写:

render: h => h(App)

好,现在来解释h的涵义,尤雨溪在一个回复中提到:

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
它来自单词 hyperscript,这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指
生成HTML 结构的 script 脚本,因为 HTML 是 hyper-text markup language 的缩写(超文本标记语言)

也就是说,createElement 函数是用来生成 HTML DOM 元素的,而上文中的 Hyperscript也是用来创建HTML结构的脚本,这样作者才把 createElement 简写成 h。

而 createElement(也就是h)是vuejs里的一个函数。这个函数的作用就是生成一个 VNode节点,render 函数得到这个 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。

其实在vue 1.0 中,这样的写法也就是如下的含义:

new Vue({
el: '#app',
template:'</App>'
componets: {App}
})

然后页面中使用

<div id='app'>
<app></app>
</div>

参考链接:https://segmentfault.com/q/1010000007130348

Vue2.0 render: h => h(App)的解释的更多相关文章

  1. Vue2.0 render:h => h(App)

    new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...

  2. 基于vue2.0的在线电影APP,

    基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...

  3. vue2.0 练习项目-外卖APP(1)

    前言 vue这个框架现在挺流行的,作为一个专注前端100年的代码爱好者,学习下路径流行的框架是必须的!在网上搜索vue的项目是比较少的,在官网进行了入门学后,没有一个项目练习巩固下,学了就等于没学,所 ...

  4. render:h => h(App) ----render函数

    转载其他博客1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的写法 6 render: h => h(App) vu ...

  5. vue2.0:(四)、首页入门,组件拆分1

    为什么需要组件拆分呢?这样才能更符合模块化这样一个理念. 首先是index.html,代码如下: <!DOCTYPE html> <html> <head> < ...

  6. 解析vue2.0中render:h=>h(App)的具体意思

    render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}. 注意点:1.箭头函数中的this是 指向 包裹this所在 ...

  7. vue中render: h => h(App)的详细解释

    2018年06月20日 10:54:32 H-L 阅读数 5369   render: h => h(App) 是下面内容的缩写:   render: function (createEleme ...

  8. vue-cli: render:h => h(App)是什么意思

    import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: ...

  9. Vue render: h => h(App) $mount

    $mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: ...

随机推荐

  1. Java 之 Session 包含验证码登录案例

    需求: 1. 访问带有验证码的登录页面login.jsp 2. 用户输入用户名,密码以及验证码.  如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误  如果验证码输入有误,跳转登录页面, ...

  2. python文字转语音

    使用百度接口 接口地址 https://ai.baidu.com/docs#/TTS-Online-Python-SDK/top 安装接口 pip install baidu-aip from aip ...

  3. day 02 作业 预科

    目录 作业 作业 ==1.什么是编程== 通过使用编程语言做一些事情,表达一些自己的想法. ==2.简述计算机五大组成.== 计算机由cpu ,运算器 ,控制器,存储器(外存,内存) 输入设备 输出设 ...

  4. MySQL Case--Strict mode与NOT NULL

    事故回溯 某业务流程操作为: 1.循环扫描某张待处理请求表,查看是否有请求等待处理. 2.找到待处理请求后,申请相关资源进行处理,并将处理结果插入到处理结果表中. 3.将该请求从待处理请求表中移除. ...

  5. static 关键字在java语言中的特性

    ​ 一,将自己注入到一个静态变量中实现静态类,如下写法 以上方法的目的是要实现一个静态类,方便用类名获取对象实例,一般情况下调用普通方法需要对象实例.这对象要么new出来,要么spring的注入如下是 ...

  6. hash表的理解

    哈希表 先从数组说起 任何一个程序员,基本上对数组都不会陌生,这个最常用的数据结构,说到它的优点,最明显的就是两点: 简单易用,数组的简易操作甚至让大多数程序员依赖上了它,在资源富足的情况下,我们甚至 ...

  7. ES6--不定参数

    <一>,在讨论ES6的不定参数之前,我们先一起回顾一下ECMAScript5的无名参数. 早先,javascript提供arguments对象检查函数的所有参数,从而不必定义每一个要用的参 ...

  8. 【转载】.Net 大型分布式基础服务架构横向演变概述

    原文:https://www.cnblogs.com/chejiangyi/p/5220217.html 一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支 ...

  9. SQLAlchemy多对多

    创建多对多表 from sqlalchemy.ext.declarative import declarative_base Base=declarative_base() from sqlalche ...

  10. 项目Alpha冲刺——测试

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...