render: h => h(App) 是下面内容的缩写:

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

进一步缩写为(ES6 语法):

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

再进一步缩写为:

render (h){
return h(App);
}

按照 ES6 箭头函数的写法,就得到了:

render: h => h(App);

其中 根据 Vue.js 作者 Even You 的回复,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 元素的,也就是上文中的 generate HTML structures,也就是 Hyperscript,这样作者才把 createElement 简写成 h。

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

还有另外一种写法效果是一样的:

import App from './App'
new Vue({
el: '#root',
template: '<App></App>',
components: {
App
}
})

关于Vue中的 render: h => h(App) 具体是什么含义?的更多相关文章

  1. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  2. Vue中的render函数随笔

    使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...

  3. vue中的render函数介绍

    简介:对于不了解slot的用法(参考:大白话vue-slot的用法)又刚接触render函数的同学来说,官网的解释无疑一脸懵逼,这里就整理下个人对render函数的理解 问题: 1.render函数是 ...

  4. 在vue中结合render函数渲染指定的组件到容器中

    1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...

  5. Vue 中使用 TypeScript 详细总结

    VUE 项目中使用 Typescript 第一节:项目起步 Vue 中使用 TypeScript 项目中主要使用到的第三方依赖 vue2 vue-class-component vue-propert ...

  6. vue中的单文件组件

    之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...

  7. Vue中Jsx的使用

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  8. 【vue】index.html main.js app.vue index.js怎么结合的? 怎么打包的?搜集的信息

    转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm ...

  9. vue中如何使用event对象

    原文地址 一.event 对象 (一)事件的 event 对象 你说你是搞前端的,那么你肯定就知道事件,知道事件,你就肯定知道 event 对象吧?各种的库.框架多少都有针对 event 对象的处理. ...

随机推荐

  1. css垂直居中怎么设置?文字上下居中和图片垂直居中

    css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...

  2. mysql连接池不能回避的wait timeout问题(转)

    起因 我们的项目组一直在使用albianj作为开发框架在开发应用.使用至今倒也是没有出现很大的问题,但最近加过监控的接口基本上都会在使用一段时间后,突然之间执行数据库操作变得很慢.虽然会变慢,但持续的 ...

  3. Mysql常用的存储引擎

    存储引擎 存储引擎是表级别的概念,不同的存储引擎保存数据和索引的方式是不相同的. MyISAM存储引擎 MyISAM最典型的性能问题就是表锁的问题.  MyISAM只将数据写到内存中,然后等待操作系统 ...

  4. 010-docker-安装-elasticsearch:5.4.3

    1.搜索镜像 docker search elasticsearch 2.拉取合适镜像 选择合适tag:https://hub.docker.com/ docker pull elasticsearc ...

  5. 虚函数后面的const=0

    const 和 =0要分开理解. 成员函数后面用 const 修饰,const表示this是一个指向常量的指针,即对象成为一个常量,即它的成员不能够变化.(默认情况下,this的类型是指向类类型非常量 ...

  6. git revert 撤销merge的动作

    在执行完git merge提交以后,通常会merge过的分支的提交记录都带过来,比如A分支merge到了B分支,那么B分支上肯定有A分支的提交记录,如果此时要回退这个merge动作,是产生一条reve ...

  7. css--clearfix浮动

    解读浮动闭合最佳方案:clearfix: http://www.daqianduan.com/3606.html clearfix清除浮动进化史:http://www.admin10000.com/d ...

  8. jmeter 二次开发---实现自定义函数插件

    1.前提: 有时候,Jmeter自带的函数,可能不能满足于业务的需求,这时候,我们可以自己写一个函数插件: 2.创建maven工程 一直next,输入GroupID,ArtifactId->fi ...

  9. android怎么抓取双向认证https的包

    这里仅提供思路. 第一种方法: dex层面,可以直接用插日志方法,找到app使用的https库,这里以某app为例,使用okhttp, okhttp收发包相关代码: Request request = ...

  10. jenkins构建多个项目执行顺序设置

    通常我们会在jenkins中构建多个项目,那么如果项目有依赖,或者有关联怎么办?  例: 如下图: ,有两个构建项目,posWeb是个web项目,welife是接口项目. 由于接口项目数据会影响pos ...