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. 20155227 2016-2017-2 《Java程序设计》第三周学习总结

    20155227 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 类与对象 使用Java撰写程序几乎都在使用对象,要产生对象必须先定义类,类是对象的设计图,对 ...

  2. 20155234 实验三 敏捷开发与XP实践

    20155234 实验三 敏捷开发与XP实践 实验内容 1.XP基础 2.XP核心实践 3.相关工具 实验步骤 (一)敏捷开发与XP 敏捷开发(Agile Development)是一种以人为核心.迭 ...

  3. Hibernate框架用法

    一,Hibernate框架介绍 没有Hibernate之前,使用jdbc来连接数据库时,需要反射加载驱动,再获取连接 在连接上获取sql承载块,传入sql语句执行,获取结果集,解析结果 Hiberna ...

  4. day5 二值化

    1.otsu二值化 # coding=utf-8 import cv2 import numpy as np from matplotlib import pyplot as plt #1.读入图像 ...

  5. python 内置模块(os)

    1.OS os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname")  改变当前脚本工作目录:相当于shell下cdos. ...

  6. L018-课前练习以及知识巩固笔记

    L018-课前练习以及知识巩固笔记 OK,今天课前做了几道题,算是对以往知识的巩固. 1.请描述下列路径的内容是做什么的?/etc/sysctl.conf/etc/rc.local/etc/hosts ...

  7. 【xshell属性设置】如何修改xshell字体大小

    1.周末在家,想搞一下学习,于是远程公司的电脑(我的移动硬盘在公司,里面有虚拟机及测试环境) 发现xshell界面字体太小,不方便看,于是研究了一下如何来设置xshell 的字体大小 2.点击左上角的 ...

  8. mysql 错误代码 1248

    1248 - Every derived table must have its own alias (MYSQL错误) 这句话的意思是说每个派生出来的表都必须有一个自己的别名,给派生表加上一个别名就 ...

  9. TensorFlow深度学习实战---MNIST数字识别问题

    1.滑动平均模型: 用途:用于控制变量的更新幅度,使得模型在训练初期参数更新较快,在接近最优值处参数更新较慢,幅度较小 方式:主要通过不断更新衰减率来控制变量的更新幅度. 衰减率计算公式 : deca ...

  10. Windows下Mongo分片及集群

    这里简单介绍一下windows下mongodb的分片设置和集群搭建,希望能够为迷茫的新手起到一点点作用.其实windows下与linux下思路是一致的,只是绑定时的ip,与端口号不同,linux下可以 ...