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 ...
随机推荐
- Python老王视频习题答案
基础篇2:一切变量都是数据对象的引用sys.getrefcount('test') 查看引用计数变量命名不能以数字开头编码:ascii.unicode.utf-81.阅读str对象的help文档,并解 ...
- R的替换sub和gsub
sub(pattern, replacement, x, ignore.case = FALSE, perl = FALSE, fixed = FALSE, useBytes = FALSE) gsu ...
- Oracle下where子句
课外题 要求:删除某一个用户,同时保留该用户的数据?如何解决 alter user scott account lock :改天需要使用则解锁unlock 锁定用户使用sysdba登录还是可以查看数据 ...
- Python爬虫基础(三)urllib2库的高级使用
Handler处理器 和 自定义Opener opener是 urllib2.OpenerDirector 的实例,其中urlopen是模块默认构建的opener. 但是基本的urlopen()方法不 ...
- CVP沙龙
关于职场: 35岁之后,还去招聘网站投简历? 35岁可能是个分水岭 95后比一些80后还强, 有些80后玻璃心 35岁有的可能已经是VP了 应该深入积累而不是蜻蜓点水 只有第一年成长了,之后是重复劳动 ...
- vue - nodejs
一.知识 打开Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基于 Chr ...
- Python开发【模块】:torndb
Torndb模块 概要:torndb是一个轻量级的基于MySQLdb封装的一个模块,其是tornado框架的一部分.其项目主页为:https://github.com/bdarnell/torndb ...
- conda 管理 python 版本
conda常用命令 查看当前系统下的环境 conda info -e 创建新的环境 # 指定python版本为2.7 conda create -n env_name python=2.7 # 同时安 ...
- cocos2d动作
1.动作的基类是CCAction,通过继承它可以实现很多不同的动作,主要分为三大类: (1)CCFiniteTimeAction(有限次动作执行类) (2)CCSpeed(节点执行速度类) (3)CC ...
- Mybatis三剑客之mybatis-generator配置
mybatis插件在这里: 然后把generatorConfig.xml文件放在resources下: <?xml version="1.0" encoding=" ...