vue-cli: render:h => h(App)是什么意思
import Vue from 'vue'
import App from './App.vue' Vue.config.productionTip = false new Vue({
render: h => h(App), //生成template（APP）
}).$mount('#app') //作用域是'#app'
1、render方法的实质就是生成template模板(在#app的作用域里)
2、render是vue2.x新增的一个函数, 这个函数的形参是h
3、vue调用render方法时, 会传入一个createElement函数作为参数(也就是h的实参是createElement函数)
4、createElement用于在页面中创建元素
5、createElement以App为参数进行调用, 即把App的内容创建到页面中的'#app'作用域里
{
render: h => h(App);
}
等价于
{
render: function(h) {
return h(App);
}
}
即
{
render: function(createElement) {
return createElement(App);
}
}
示例
<!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>
结果
vue-cli: render:h => h(App)是什么意思的更多相关文章
- 关于Vue中的 render: h => h(App) 具体是什么含义？
render: h => h(App) 是下面内容的缩写: render: function (createElement) { return createElement(App); } 进一步 ...
- Vue中render: h => h(App)的含义
// ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...
- Vue render: h => h(App) $mount
$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: ...
- vue中render: h => h(App)的详细解释
2018年06月20日 10:54:32 H-L 阅读数 5369 render: h => h(App) 是下面内容的缩写: render: function (createEleme ...
- new Vue({ render: h => h(App), }).$mount('#app')
这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount('#app')方法. $mount('#app') :手动挂载到id为app的dom中的意思 当Vue实例没有el属性时,则该实 ...
- 如何理解render: h => h(App)
学习vuejs的时候对这句代码不理解 new Vue({ el: '#app', router, store, i18n, render: h => h(App) }) 查找了有关资料,以下为结 ...
- 解析vue2.0中render：h=>h(App)的具体意思
render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}. 注意点:1.箭头函数中的this是 指向 包裹this所在 ...
- render:h => h(App) 是什么意思？
在学习vue.js时,使用vue-cli创建了一个vue项目,main.js文件中有一行代码不知道什么意思.在网上搜索得到如下解答: 参考一:https://www.cnblogs.com/longy ...
- Vue2.0 render:h => h(App)
new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...
随机推荐
- （二 -3-3） 天猫精灵接入Home Assistant-自动发现Mqtt设备-自动生成配置信息
http://www.hassmart.com/products/switches/#tab=config switch: - platform: mqtt name: keting state_to ...
- mybatis之一对多
今天主要话题围绕这么几个方面? mybatis一对多示例 sql优化策略 一.mybatis之一对多 在说一对多之前,顺便说一下一对一. 一对一,常见的例子,比如以常见的班级例子来说,一个班主任只属于 ...
- maven的下载，环境变量配置，和eclipse配置，和IntelliJIDEA配置
一.maven简介 Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖 ...
- markdown的使用语法的补充
markdown的使用语法的补充 markdown的语法在网络上有很多,例如简书的教程这个是参考简书上的教程 但是有几个语法需要记住. 添加图片,如果要添加图片,他的语法格式是首先一个感叹号!然后[] ...
- I2C地址问题
#define MAX_17040_BATTERY_I2C_ADDR (0x36) 设备地址 #define MAX_17040_BATTERY_WRITE_ADDR ...
- ASP.NET Core 发布之后通过命令控制监听地址和环境变量
添加Command支持 新建一个ASP.NET Core 项目,打开Program.cs 添加下面的代码: public class Program { public static void Main ...
- （1）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- 什么是微服务架构，.netCore微服务选型
开发工具:VS2017 .Net Core 2.1 什么是微服务?单体结构: 缺点: 1)只能采用同一种技术,很难用不同的语言或者语言不同版本开发不同模块: 2)系统耦合性强,一旦其中一个模块有问题, ...
- 教你使用HTML5原生对话框元素，轻松创建模态框组件
HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找 ...
- 几何学观止（Lie群部分）
上承这个页面,这次把Lie群的部分写完了 几何学观止-微分几何部分(20181102).pdf 我觉得其他部分(尤其是代数几何部分)我目前没有把握写得令自己满意,总之希望在毕业前能写完吧. 这次调整了 ...
- 百度统计微信网站绑定（vue项目）
*网站域名:----- *网站首页:----/index.html 下列代码放入index.html vue加百度统计代码(亲测有效)