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. C# — 创建Windows服务

    以前从来没有接触过C#,对Windows服务也完全不了解,今天通过使用VS2017创建了一个Windows服务,并进行了安装和卸载,目前也是一知半解的地步,简单的做个笔记记录一下,也算是复习了吧. 第 ...

  2. linux使用.net core 创建简单的MVC

    1 创建MVC 2.修改默认绑定的端口方法 ,在Program.cs 的Build之前加入 .UseUrls("http://*:8888")

  3. day93

    虚拟机安装Liunx以及Xshell链接 首先安装VMware虚拟机软件 安装完成后打开会显示 选择创建新的虚拟机 我们选择自定义 来到一个选择虚拟机兼容性 下一步安装客户端操作系统这里我们先选择稍后 ...

  4. EF CRUD

    EF 使用心得 有点傻逼! 1.通常情况 表实例一个对象 T_User model = new T_User(); 2.关键 非空字段赋值主键必须要写 model.EID = "009&qu ...

  5. 个人博客添加网易云音乐Flash插件

    博客底部添加网易云音乐播放插件 歌单或者歌曲外链可从音乐界面"生成外链播放器"中得到,选择Flash播放插件即可 footer.html文件增加 实现效果: 历史精选文章: Jli ...

  6. ASP.NET Core 和 ASP.NET Framework 共享 Identity 身份验证

    .NET Core 已经热了好一阵子,1.1版本发布后其可用性也越来越高,开源.组件化.跨平台.性能优秀.社区活跃等等标签再加上"微软爸爸"主推和大力支持,尽管现阶段对比.net ...

  7. [书籍]用UWP复习《C#并发编程经典实例》

    1. 简介 C#并发编程经典实例 是一本关于使用C#进行并发编程的入门参考书,使用"问题-解决方案-讨论"的模式讲解了以下这些概念: 面向异步编程的async和await 使用TP ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（91）-EF 连接 MySql

    前言 虽然系统目前只支持MSSQL版本,但是很多朋友公司技术规定必须使用MySql,下面我们就来使用EF连接MySQL吧! (1)安装MYSQL环境 1.下载安装MYSQL数据,这里我们安装phpSt ...

  9. Node+GitLab实现小程序CI系统

    为什么要实现自动部署 小程序开发迭代里,有以下几个个头痛的问题, 如何准确并快速的的把小程序上传去后台,并让测试人员进行测试? 测试同事找开发要二维码,效率较低 本地生成的二维码会出现携带本地代码.未 ...

  10. PHP实用代码片段（一）

    1. 发送 SMS 在开发 Web 或者移动应用的时候,经常会遇到需要发送 SMS 给用户,或者因为登录原因,或者是为了发送信息.下面的 PHP 代码就实现了发送 SMS 的功能. 为了使用任何的语言 ...