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 ...
随机推荐
- java中的socket编程
Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一.如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实现的.本文会介绍一下基于TCP/IP的S ...
- R测试向量是否相等
> x<-1:3 > typeof(x) [1] "integer" > y<-c(1,3,4) > typeof(y) [1] "d ...
- CEIL与FLOOR
SQL> SELECT 666.88,CEIL(666.88),FLOOR(666.88) FROM dual; 666.88 CEIL(666.88) FLOOR(666.88)---- ...
- 了解MIP(Mobile Instant Pages)
mip官网:https://www.mipengine.org/ 什么是mip? mip是百度在2016年提出的移动网页加速器项目.可以简单理解为是一个规范. mip能做什么? mip能帮助站 ...
- kitkat-s5p4418drone 记录
查看帮助: ./device/nexell/tools/build.sh -h 编译u-boot: ./device/nexell/tools/build.sh -b drone2 -t u ...
- Python量化教程 常用函数
# -*- coding: utf-8 -*- # @Author: fangbei # @Date: 2017-08-26 # @Original: price_str = '30.14, 29.5 ...
- mysql 数据操作 单表查询 concat()函数 定义显示格式
#定义显示格式 concat() 函数用于连接字符串 类似于python 格式化操作print("姓名:%s" % name)或者 用,拼接一个一个的变量print("a ...
- Android仿今日头条手界面
public class MyIndicator extends HorizontalScrollView implements ViewPager.OnPageChangeListener { pr ...
- 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放~ ...
- java基础类型中的char和byte的辨析及Unicode编码和UTF-8的区别
在平常工作中使用到char和byte的场景不多,但是如果项目中使用到IO流操作时,则必定会涉及到这两个类型,下面让我们一起来回顾一下这两个类型吧. char和byte的对比 byte byte 字节, ...