这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount(’#app’)方法。

$mount(’#app’) :手动挂载到id为app的dom中的意思

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

需要注意的是:该方法是直接挂载到入口文件index.html 的 id=app 的dom 元素上的

render函数是vue通过js渲染dom结构的函数createElement,约定可以简写为h

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

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

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

继续缩写:

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

继续缩写:

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

箭头函数:

h => h(App);

实际渲染:

import App from './App'
new Vue({
el: '#root',
template: '<App></App>',
components: {
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 的缩写(超文本标记语言)

Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,这个函数的作用就是生成一个 VNode节点,render 函数得到这个 VNode 节点之后,调用了 mount 方法,渲染成真实 DOM 节点,并挂载到(通常是div app)节点上。

createElement函数是用来生成HTML DOM元素的,也就是generate HTML structures,也就是Hyperscript,这样作者才把createElement简写成h。h是vue.js里面的createElement函数,这个函数的作用就是生成一个VNode节点,render函数得到这个VNode节点之后,返回给vue.js的mount函数,渲染成真实DOM节点,并挂载到根节点上。

new Vue({ render: h => h(App), }).$mount('#app')的更多相关文章

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

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

  2. 关于Vue中的 render: h => h(App) 具体是什么含义?

    render: h => h(App) 是下面内容的缩写: render: function (createElement) { return createElement(App); } 进一步 ...

  3. Vue中render: h => h(App)的含义

    // ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...

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

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

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

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

  6. render: h => h(App) $mount 什么意思

    初始一个vue.js项目时,常常发现main.js里有如下代码: new Vue({ render: h => h(App) }).$mount('#app') 这什么意思?那我自己做项目怎么改 ...

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

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

  8. 如何理解render: h => h(App)

    学习vuejs的时候对这句代码不理解 new Vue({ el: '#app', router, store, i18n, render: h => h(App) }) 查找了有关资料,以下为结 ...

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

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

随机推荐

  1. 轮播图 -- view, swiper

    效果图 制作步骤: 一.创建一个page 二.编写demo.wxml写界面元素 <!--miniprogram/pages/demo/demo.wxml--> <view class ...

  2. Beautiful Soup4.4.0中文官方文档!最权威的参考---中文官方文档

    最好用的解析库Beautiful Soup 解析库-----中文官方文档 https://beautifulsoup.readthedocs.io/zh_CN/v4.4.0/

  3. SpringCloud升级之路2020.0.x版-4.maven依赖回顾以及项目框架结构

    本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford 我们先来回顾下 m ...

  4. LeetCode通关:数组十七连,真是不简单

    分门别类刷算法,坚持,进步! 刷题路线参考:https://github.com/chefyuan/algorithm-base       https://github.com/youngyangy ...

  5. FreeRTOS-04-内核控制函数+时间管理函数

    说明 本文仅作为学习FreeRTOS的记录文档,作为初学者肯定很多理解不对甚至错误的地方,望网友指正. FreeRTOS是一个RTOS(实时操作系统)系统,支持抢占式.合作式和时间片调度.适用于微处理 ...

  6. MSF+Nmap TCP空闲扫描

    MSF+Nmap TCP空闲扫描 前言 TCP空闲扫描是一种高级的扫描技术,可以冒充内网中另一台IP地址来对内网中的目标进行隐秘的扫描. 正文 在进行扫描之前,我们需要了解一个概念,即递增IP帧标识, ...

  7. Android开发如何准备技术面试(含Android面试押题)

    今年毋庸置疑是找工作的寒冬,每一个出来找工作的同学都是值得尊敬的.现在找工作,虽然略难,但是反过来看也会逼迫我们成为更加优秀的自己. 但是不管是旺季还是寒冬,有一些优秀的同学找工作还是挺顺利的.所以说 ...

  8. 基于 Clusternet 与 OCM 打造新一代开放的多集群管理平台

    背景 随着 5G.物联网设备的爆炸性增长以及智能终端不断增强的计算能力,带来了前所未有的数据量,传统的中心集中式计算捉襟见肘."新基建"战略的实施,工业互联网.车联网/自动驾驶.智 ...

  9. 1~n数字中1出现的个数

    1~n数字中1出现的个数 LeetCode 给定一个整数 n,计算所有小于等于 n 的非负整数中数字 1 出现的个数. 感觉挺有意思 对于一个数,我们先局部分析一下,比如123456,我们考虑百位这个 ...

  10. 用notepad2代替notepad

    Windows自带的notepad.exe功能比较弱,notepad2是一个比较好的替代方案,但在任何系统调用notepad的时候都能用notepad2代替并不是一件容易的事,下面是一个解决方法: h ...