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( ...
随机推荐
- CentOS自带定时任务crontab
设置定时任务规则,crontab -e,如下示例为每一分钟执行一次脚本 在脚本中写入内容时需注意路径,可以写绝对路径,也可以按照如下形式 exepath=$(cd "$(dirname &q ...
- 面试官问，说一个你在工作非常有价值的bug
如果你去参考面试,做足了准备,面对面试官员从容不迫,吐沫横飞的大谈自己的工作经历.突然,面试官横插一句:说一个你在工作非常有价值的bug.顿时,整个空气都仿佛都凝固了!“What?”... 我想没几个 ...
- 使用Git进行代码管理的心得--github for windows
首先简述一下Git进行代码管理的情况 我使用的是github for windows,官网下载的速度太慢,所以用了离线安装包.安装之后会有GitHub和GitShell两个软件,其中Github采用图 ...
- ab 压力测试
两个 Time per request ab有一个-c n参数,就是第一行的Concurrency Level,可以让ab创建n个并发连接进行测试. 第一个Time per request 代表每个链 ...
- 数据库（mysql）基本使用命令大全
1.查看数据库及表属性: 1)查看所有数据库 SHOW DATABASES; 2)选择使用的数据库 USE <DATABASE_NAME> 3)查看当前数据库下面的表 SHOW TABLE ...
- 循环 while
day 2 ---------------------------------------------------把一件简单的事情做到极致,你就成功了. Day2作业及默写 1.判断下列逻辑语句的Tr ...
- C++常用代码优化策略
C++代码常用的优化策略 1.不存在指向空值的引用,意味着引用比指针的效率更高,因为在使用引用之前不需要测试它的合法性:指针可以被重新赋值以指向另一个不同的对象,但是引用总是指向它初始化时指定的对象. ...
- Sparse Principal Component Analysis via Rotation and Truncation
目录 对以往一些SPCA算法复杂度的总结 Notation 论文概述 原始问题 问题的变种 算法 固定\(X\),计算\(R\) 固定\(R\),求解\(X\) (\(Z =VR^{\mathrm{T ...
- JVM原理分析
1 什么是JVM? JVM是Java Virtual Machine(Java虚拟机)的缩写,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.由一套字节码指令集.一组寄存器.一个栈.一个垃圾回收 ...
- 现代程序设计 homework-06
写代码爽还是读代码爽? 当然是写代码爽好吧... 读代码明显是读+写两倍的工作量好么... 本次作业要求: 1) 把程序编译通过, 跑起来. 读懂程序,在你觉得比较难懂的地方加上一些注释,这样大家就能 ...