render:h => h(App) 是什么意思？
在学习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方法的参数有几个？各个参数的含义、类型是什么？
例：
<!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) 是什么意思？的更多相关文章
- 如何理解render: h => h(App)
学习vuejs的时候对这句代码不理解 new Vue({ el: '#app', router, store, i18n, render: h => h(App) }) 查找了有关资料,以下为结 ...
- vue-cli: render:h => h(App)是什么意思
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: ...
- 关于Vue中的 render: h => h(App) 具体是什么含义？
render: h => h(App) 是下面内容的缩写: render: function (createElement) { return createElement(App); } 进一步 ...
- 解析vue2.0中render：h=>h(App)的具体意思
render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}. 注意点:1.箭头函数中的this是 指向 包裹this所在 ...
- Vue2.0 render:h => h(App)
new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...
- Vue中render: h => h(App)的含义
// ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...
- render: h => h(App) $mount 什么意思
初始一个vue.js项目时,常常发现main.js里有如下代码: new Vue({ render: h => h(App) }).$mount('#app') 这什么意思?那我自己做项目怎么改 ...
- Vue render: h => h(App) $mount
$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: ...
- Vue2.0 render: h => h(App)的解释
render: h => h(App)是ES6的写法,其实就是如下内容的简写: render: function (createElement) { return createElement(A ...
随机推荐
- 优雅的go语言--入门篇
1.特点 1.静态类型,编译型的开源语言 2.脚本华的语法,支持多种编程范式(函数式&面向对象) 3.原生,给力的并发编程的支持 2.优势 1.脚本化的语法 2.静态类型+编译型,程序运行速度 ...
- Spring容器装配Bean的三种方式
欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...
- vscode 中使用 csscomb
我看中 csscomb 主要是用来给 css 属性排序用的,当然他也有格式化的作用: 1.安装不必说,但是装了之后,默认似乎没用: 2.点开 文件-首选项,搜下 csscomb 就知道了: 3.第一个 ...
- linux中增加swap分区文件的步骤方法
一.swap交换分区 Swap分区在系统的物理内存不够用的时候,把硬盘空间中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被释放的空间被临 ...
- 朴素贝叶斯算法的python实现 -- 机器学习实战
import numpy as np import re #词表到向量的转换函数 def loadDataSet(): postingList = [['my', 'dog', 'has', 'fle ...
- linux加载硬盘过程
查看系统可用磁盘大小: [root@i-mbyar7df ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/sda1 ...
- Andrew Ng机器学习公开课笔记 -- 朴素贝叶斯算法
网易公开课,第5,6课 notes,http://cs229.stanford.edu/notes/cs229-notes2.pdf 前面讨论了高斯判别分析,是一种生成学习算法,其中x是连续值 这里要 ...
- scrapy爬虫系列之六--模拟登录
功能点:如何发送携带cookie访问登录后的页面,如何发送post请求登录 爬取网站:bilibili.github 完整代码:https://files.cnblogs.com/files/book ...
- 双态运维：如何让CMDB配置维护更贴近人性
近来很多行业内的大佬关于CMDB连连发声,CMDB的关注度持续高涨,CMDB的前生就是长满雀斑的丑媳妇,扭扭捏捏不受待见这么多年,终于熬出头要见公婆了.哎,她的贤惠谁能懂? 言归正传,在拜读了多篇大牛 ...
- neovim 使用
neovim配置与vim兼容,配置文件在~/.config/nvim 终端 :terminal 进入shell模式 <C-\><C-n> 退出终端 <M-i> 重新 ...