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

参考一:https://www.cnblogs.com/longying2008/p/6408753.html

参考二:https://www.cnblogs.com/whkl-m/p/6970859.html

main.js文件内容

import Vue from 'vue'
import App from './App' Vue.config.productionTip = false // 设置false,已阻止vue在启动时生成生产提示 /* eslint-disable no-new */
new Vue({
el:'#app',
render: h => h(App)
})

 注:/* eslint-disable no-new */这不是一句注释,在js里面,new一个对象,需要赋值给某个值(变量),用Vue实例化时,不需要赋值给某值(变量),所以需要单独给配一条规则,给new Vue这行代码上面加这个注释,把这行代码规则的校验跳过,通过eslint-disable。是eslint的常用技巧之一。

言归正传:

render: h => h(App)   这是是一个箭头函数是肯定的,那对应的es5形式是怎样的呢???

  如下:

{
render: h => h(App)
}

  等价于:

{
render: h =>{
return h(App)
}
}

  等价于:

{
render: function(h) {
return h(App);
}
}

  即:

{
render: function(createElement) {
return createElement(App);
}
}

  createElement 参数

其实看了createElement的官方文档,我还是不明白createElement的用法。createElement方法的参数有几个?各个参数的含义、类型是什么?

例:

<!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>

  

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

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

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

  2. vue-cli: render:h => h(App)是什么意思

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

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

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

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

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

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

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

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

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

  7. render: h => h(App) $mount 什么意思

    初始一个vue.js项目时,常常发现main.js里有如下代码: new Vue({ render: h => h(App) }).$mount('#app') 这什么意思?那我自己做项目怎么改 ...

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

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

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

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

随机推荐

  1. java中的socket编程

    Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一.如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实现的.本文会介绍一下基于TCP/IP的S ...

  2. R测试向量是否相等

    > x<-1:3 > typeof(x) [1] "integer" > y<-c(1,3,4) > typeof(y) [1] "d ...

  3. CEIL与FLOOR

    SQL> SELECT 666.88,CEIL(666.88),FLOOR(666.88) FROM dual;    666.88 CEIL(666.88) FLOOR(666.88)---- ...

  4. 了解MIP(Mobile Instant Pages)

    mip官网:https://www.mipengine.org/   什么是mip? mip是百度在2016年提出的移动网页加速器项目.可以简单理解为是一个规范.   mip能做什么? mip能帮助站 ...

  5. kitkat-s5p4418drone 记录

      查看帮助: ./device/nexell/tools/build.sh  -h   编译u-boot: ./device/nexell/tools/build.sh -b drone2 -t u ...

  6. Python量化教程 常用函数

    # -*- coding: utf-8 -*- # @Author: fangbei # @Date: 2017-08-26 # @Original: price_str = '30.14, 29.5 ...

  7. mysql 数据操作 单表查询 concat()函数 定义显示格式

    #定义显示格式 concat() 函数用于连接字符串 类似于python 格式化操作print("姓名:%s" % name)或者 用,拼接一个一个的变量print("a ...

  8. Android仿今日头条手界面

    public class MyIndicator extends HorizontalScrollView implements ViewPager.OnPageChangeListener { pr ...

  9. centos 正则,grep,egrep,流式编辑器 sed,awk -F 多个分隔符 通配符 特殊符号. * + ? 总结 问加星 cat -n nl 输出文件内容并加上行号 alias放~/.bash_profile 2015-4-10 第十三节课

    centos 正则,grep,egrep,流式编辑器 sed,awk -F 多个分隔符  通配符 特殊符号. * + ? 总结  问加星 cat -n  nl  输出文件内容并加上行号 alias放~ ...

  10. java基础类型中的char和byte的辨析及Unicode编码和UTF-8的区别

    在平常工作中使用到char和byte的场景不多,但是如果项目中使用到IO流操作时,则必定会涉及到这两个类型,下面让我们一起来回顾一下这两个类型吧. char和byte的对比 byte byte 字节, ...