new Vue({

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

render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来

vue.2.0的渲染过程:

1.首先需要了解这是 es 6 的语法,表示 Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果。

2.其次,Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树。

3.最后,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,然后 createElement 会以 APP 为参数进行调用,关于 createElement 函数的参数说明参见:Element-Arguments

结合一下官方文档的代码便可以很清晰的了解Vue2.0 render:h => h(App)的渲染过程。

[官方文档][1]

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

 

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

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

    render: h => h(App)是ES6的写法,其实就是如下内容的简写: render: function (createElement) { return createElement(A ...

  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-cli: render:h => h(App)是什么意思

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

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

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

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

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

随机推荐

  1. String in Java

  2. MySQL - CentOS 下 MySQL 5.6 安装

    1. 概述 最近没啥东西可写, 随便写点 mysql 5.6 的安装 去年写的 装上去过 三次以上 2. 准备 系统 CentOS 7.4 3. 安装 1. 直接安装 # mysql服务端: mysq ...

  3. Linux - 时间相关命令 - ntpdate, date, hwclock

    1. 概述 最近也不知道写啥了, 把之前的老文档整理一下, 凑个数什么的 配置时间这种工作, 偶尔还是要用一下 主要描述 3 个命令的简单适用 ntpdate hwlock 2. ntpdate 1. ...

  4. 虚拟机安装与Linux命令的学习 ——20155215宣言

    一.虚拟机的安装 虚拟机的安装对我来说真可谓是一波三折.打开老师发布的安装教程,简单地浏览了一下,主要步骤都有图文解说.我本来以为这个安装按部就班即可,可哪知道,问题一个接着一个出现. 问题1 在我下 ...

  5. 20155222 2016-2017-2 《Java程序设计》第10周学习总结

    20155222 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 简单JAVA socket * 1 搭建服务器端 * 1 创建ServerSocket对象 ...

  6. POJ2513_Colored Sticks_KEY

    题目传送门 题目大意:给你若干根木棍,每根木棍有前后两种颜色,连接两根木棍需要前后颜色相同,求能否将所有木棍连接在一起. Solution: 不要将木棍看成点,将颜色看成点. 其实就是求是否存在欧拉路 ...

  7. [BZOJ4002][JLOI2015]有意义的字符串-[快速乘法+矩阵乘法]

    Description 传送门 Solution 由于这里带了小数,直接计算显然会爆掉,我们要想办法去掉小数. 而由于原题给了暗示:b2<=d<=(b+1)2,我们猜测可以利用$(\fra ...

  8. ARKit-1

    1.1-AR技术简介 增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像.视频.3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在 ...

  9. 【LG3230】[HNOI2013]比赛

    题面 洛谷 题解 代码 \(50pts\) #include<iostream> #include<cstdio> #include<cstdlib> #inclu ...

  10. Yii2 使用 faker 生成假数据

    测试过程中有时候需要生成大量的假数据,faker 是一个生成假数据的类库,可以生成姓名,电话,IP地址,密码,ISBN等等你能想到的或者你想不到的各种类型的假数据. Yii2.0已经集成该类库,不用再 ...