new Vue({ render: h => h(App), }).$mount('#app')

这里创建的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. selenium 配置ie11 浏览器

   1.IEDriverServer下载与配置 用淘宝的镜像地址:https://npm.taobao.org/mirrors/selenium/. 选3.0版本的  IEDriverServer_x64 ...

2. 手把手教windows上安装linux虚拟机及环境配置

   目录 版本说明 安装虚拟机 典型方式安装(推荐小白,带有图形界面,助于学习,但占用空间大) 自定义方式安装(推荐老司机) 创建快照 克隆虚拟机 windows上安装linux虚拟机不管是对于新人还是老 ...

3. js学习笔记之自调用函数、闭包、原型链

   自调用函数 var name = 'world!'; // console.log(typeof name) (function () { console.log(this.name, name, ...

4. jquery版本更新后无live函数的处理.TypeError: $(...).live is not a function

   jquery live函数语法 jquery版本更新, 发现一个问题: jq自带的live没有了.控制台下会有如下的提示:火狐: TypeError: $(...).live is not a fun ...

5. artDialog 简单几种用法

   $('#btn1').click(function(){        artDialog({title:'图片查看', content:'<img width="817" ...

6. Thinkphp中取消url中的index.php 和 Home 默认模块

   将配置文件中改: <?phpreturn array(    //'配置项'=>'配置值'    'URL_MODEL'=>'2',   //去掉url中index.php    ' ...

7. PASS-单组目标值法的样本量计算

   临床试验的参数估计中,评价指标有确定的估计目标 ,临床试验目的需通过参数估计(含相应的可信区间估计)的方法证明评价指标不低于目标值时,可根据单组目标值法样本量公式计算. 例:欲证明器械A的诊断准确性非 ...

8. Spring Security OAuth2 远程命令执行漏洞（CVE-2016-4977）

   影响版本: 2.0.0-2.0.9 1.0.0-1.0.5 poc地址 https://github.com/vulhub/vulhub/blob/master/spring/CVE-2016-497 ...

9. kms激活windows或者office

   激活windows和office windows激活密钥 Windows 10 Professional(专业版):W269N-WFGWX-YVC9B-4J6C9-T83GX Windows 10 P ...

10. C++ 1//设计立方体类 //创建立方体的类 //设计属性和行为 //获取立方体的面积和体积 //分别利用（全局函数 和 成员函数）判断俩个立方体是否相等

    1 //设计立方体类 2 //创建立方体的类 3 //设计属性和行为 4 //获取立方体的面积和体积 5 //分别利用(全局函数 和 成员函数)判断俩个立方体是否相等 6 #include <i ...