import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

new Vue({

  render: h => h(App),    //生成template（APP）

}).$mount('#app')    //作用域是'#app'

1、render方法的实质就是生成template模板(在#app的作用域里)

2、render是vue2.x新增的一个函数, 这个函数的形参是h

3、vue调用render方法时, 会传入一个createElement函数作为参数(也就是h的实参是createElement函数)

4、createElement用于在页面中创建元素

5、createElement以App为参数进行调用, 即把App的内容创建到页面中的'#app'作用域里

{

    render: h => h(App);

}

等价于

{

    render: function(h) {

        return h(App);

    }

}

即

{

    render: function(createElement) {

        return createElement(App);

    }

}

示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

    <script type="text/javascript" src="https://unpkg.com/vue"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app', // 提供一个在页面上已经存在的 DOM 元素作为 Vue 实例挂载目标

            render: function (createElement) {

                return createElement('h2', 'Hello Vue!');

            }

        });

    </script>

</body>

</html>

结果

vue-cli: render:h => h(App)是什么意思的更多相关文章

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

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

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

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

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

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

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

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

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

    这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount('#app')方法. $mount('#app') :手动挂载到id为app的dom中的意思 当Vue实例没有el属性时,则该实 ...

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

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

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

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

  8. render:h => h(App) 是什么意思？

    在学习vue.js时,使用vue-cli创建了一个vue项目,main.js文件中有一行代码不知道什么意思.在网上搜索得到如下解答: 参考一:https://www.cnblogs.com/longy ...

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

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

随机推荐

  1. 使用 ctypes 进行 Python 和 C 的混合编程

    Python 和 C 的混合编程工具有很多,这里介绍 Python 标准库自带的 ctypes 模块的使用方法. 初识 Python 的 ctypes 要使用 C 函数,需要先将 C 编译成动态链接库 ...

  2. Python+Pycharm—学习—pip

    1.pip是干什么的? 2.pip怎么安装? 3.pip怎么用?

  3. day95

    Linux基本部署配置及常见扩展应用 Linux软件包安装方法 1. 安装: 整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2)解压缩文件:一般tar包,都会再做 ...

  4. oracle 删除表空间TABLESPACE步骤及注意项

    告诉大家,我喜欢通过toad for oralce来实现对oracle数据库的操作. 1.首先通过数据库管理员用户以SYSDBA身份登录.比如使用sys用户去登录 2.查看和记录待删除表空间所在的物理 ...

  5. 完成了Coursera的一个机器学习课程

    终于完成了这个课程,从开始学习,到现在差不多过了一年的时间,中间由于一些原因耽搁了,最终还是完成了,记录一下!

  6. SQL Server-索引故事的遥远由来，原来是这样的？（二十八）

    前言 前段时间工作比较忙,每天回来也时不时去写有关ASP.NET Core的文章,无论是项目当中遇到的也好还是自学的也好都比较严谨的去叙述,喜欢分享,乐于分享这是我一直以来的态度,当然从中也会有些许错 ...

  7. 这20个Docker Command，有几个是你会的？

    在这之前呢,也写过两篇关于Docker基础入门类的文章 Docker容器技术入门(一) Docker容器技术入门(二) 很多人都感觉这文章这么简单.这么基础,可是别忘记了"万丈高楼平地起&q ...

  8. .Net Core 在 Linux-Centos上的部署实战教程（二）

    上篇我们说了 如何在Linux上部署.net core  但是有心的同学会发现你关闭掉终端网站就不能访问了,这个原因是因为直接 dotnet GetConfigFile.dll --server.ur ...

  9. 搜狐畅游一面（c++）

    上来是个小姐姐,有点懵.. 1.  介绍 2.  项目 3.  实习 4.  用的协议 tcp和udp的协议 5.  select 和epoll(忘了) 6. 数据库的隔离级别, 死锁, 怎么避免死锁 ...

  10. 福州大学软件工程1816 | W班 第6次作业WordCount成绩排名

    作业链接 WordCount进阶需求 评分细则 本次个人项目分数由两部分组成(博客分满分40分+程序得分满分60分) 博客评分细则(满分60,最终折算为40分) 在文章开头给出结对同学的博客链接.本作 ...