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 - 3.6 学习第一天
开始之前 基础示例 Python语法基础,python语法比较简单,采用缩紧方式. # print absolute value of a integer a = 100 if a >= 0: ...
- 【转】stm32中断嵌套全攻略
断断续续学习STM32一学期了,时间过的好快,现在对STM32F103系列单片机的中断嵌套及外部中断做一个总结,全当学习笔记.废话不多说,ARM公司的Cortex-m3 内核,支持256个中断,其中包 ...
- UnicodeEncodeError: 'gbk' codec can't encode character '\xbb' in position 0: illegal multibyte sequence
使用Python写文件的时候,或者将网络数据流写入到本地文件的时候,大部分情况下会遇到:UnicodeEncodeError: 'gbk' codec can't encode character ' ...
- Introduction to Structured Data json的2种形式 JAVA解析JSON数据 - JsonArray JsonObject
https://developers.google.com/search/docs/guides/intro-structured-data Structured data refers to kin ...
- Python性能鸡汤(转)
英文原文:http://blog.monitis.com/index.php/2012/02/13/python-performance-tips-part-1/ 英文原文:http://blog.m ...
- 使用Rxjava自己创建RxBus
https://piercezaifman.com/how-to-make-an-event-bus-with-rxjava-and-rxandroid/ https://lingyunzhu.git ...
- SQL SERVER 2008 R2序列号
SQL SERVER 2008 R2序列号: 数据中心版:PTTFM-X467G-P7RH2-3Q6CG-4DMYB 开 发者 版:MC46H-JQR3C-2JRHY-XYRKY-QWPVM 企 ...
- mysql主从复制,及扩展
一.MySQL简单复制相关概念: 1. mysql复制的意义:Mysql复制是使得mysql完成高性能应用的前提 2. mysql复制的机制: SLAVE端线程: IO thread: 向主服务请求二 ...
- SpringMVC—概述
mvc容器的实例化: http://blog.csdn.net/lin_shi_cheng/article/details/50686876 Spring的启动过程: 1: 对于一个web应用,其部署 ...
- 商品的spu、sku及其之间的关系
今日来总结一下,电商系统中涉及到商品时必然会遇到的几个概念,SPU.SKU.单品等.彻底搞懂和明白了这几个概念对我们设计商品表是十分必要的前提条件. SPU:标准化产品单元 SPU = Standar ...