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 ...
随机推荐
- centos7.2启动级别
systemctl set-default multi-user.target 设定默认为字符界面,也就是3 systemctl set-default graphical.target ...
- Linux常用命令大全（转载）
最近都在和Linux打交道,这方面基础比较薄弱的我只好买了本鸟哥的书看看,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因, ...
- ZOJ 3469Food Delivery(区间DP)
Food Delivery Time Limit: 2 Seconds Memory Limit: 65536 KB When we are focusing on solving prob ...
- codeforces #516---ABC
A---golden plate http://codeforces.com/contest/1072/problem/A 题意:给一个n*m的格子,从最外层往里涂色,每次尽量涂最外面的那一圈,两圈涂 ...
- angular $http服务详解
它是对原生XMLHttpRequest对象的简单封装, 这个方法会返回一个promise对象,具有sccess和error两个方法. 当然,我们也可以在响应返回时用then 方法来处理,会得到一个特殊 ...
- Oracle Schema Objects——Sequences（伪列：nextval，currval）
Oracle Schema Objects 序列的作用 许多的数据库之中都会为用户提供一种自动增长列的操作,例如:在微软的Access数据库之中就提供了一种自动编号的增长列(ID列).在oracle数 ...
- 一道题浅析 i++,++i,i+1及(引用)&i的区别
我们可能很清楚i++,++i和i+1级&i的概念,但在实际运用中我们就有可能很容易搞混淆.特别是在递归中区别它们就显得尤为重要了.那首先我们先看一段利用递归逆序字符串的代码,你能回答出这段代码 ...
- Python第一弹--------初步了解Python
Python是一种跨平台的语言,这意味着它能够运行在所有主要的操作系统中. 语法规范几乎同C语言. 字符串: 当像Python输入一个字符串时,首先要输入一个引号.单引号.双引号.三引号三者等价.通常 ...
- js动态移动滚动条至底部示例
使用js动态移动滚动条至底部. var currentPosition,timer; function GoBottom(){ timer=setInterval("runToBotto ...
- lvs原理及各种调度算法详解
LVS原理详解 LVS原理详解 LVS简介 LVS结构与工作原理 一.LVS的结构 二.LVS内核模型 三.LVS的包转发模型 1.NAT模型: 2.DR模型: 3.TUN模型: 四.LVS的调度算法 ...