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( ...
随机推荐
- Oracle BBED 工具 说明
一. BBED介绍 有关BBED 详细使用说明的pdf文档,也是从网上下载的: http: Thename bbed is an acro ...
- Spring Security（十七）：5.8 Method Security
From version 2.0 onwards Spring Security has improved support substantially for adding security to y ...
- 洛谷题解 P1031 【均分纸牌】
这道题很简单 原理是从左到右一个一个排,把差值m加起来加到后面一堆牌里 具体ac代码如下: #include<cstdio> #include<iostream> #inclu ...
- 随机产生1-12的整数 ， 根据产生整数输出一下该月份的季节信息（Math.random()和if语句的应用）
package com.summer.cn; /** * @author Summer *随机产生1-12的整数 , 根据产生整数输出一下该月份的季节信息 */ public class Test04 ...
- 理解JSON Web Token (一)
一:理解单系统登录的原理及实现? web应用采用的 browser/server 架构的,http是无状态协议的,也就是说用户从A页面跳转到B页面会发起http请求,当服务器返回响应后,当用户A继续访 ...
- 洛谷 P1706 全排列问题
题目链接 https://www.luogu.org/problemnew/show/P1706 题目描述 输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数 ...
- redis底层设计（四）——功能的实现
redis中我们会经常用到事务.订阅与发布.Lua脚本以及慢查询日志,接下来我们就一一对他们进行探讨学习. 4.1事务 redis通过MULTI.DISCARD.EXEC和WATCH四个命令来实现事务 ...
- 关于GitHub的Hello Word
最近GitHub一直是最火的配置库技术之一,各个技术大牛也都纷纷入驻GitHub 我每天都打交道的DITA-OT开源项目也宣布迁入GitHub. 那么GitHub到底有什么过人之处呢?给各位先扫个盲. ...
- 深入理解［Master-Worker模式］原理与技术
Master-Worker模式是常用的并行模式之一.它的核心思想是,系统由两类进程协作工作:Master进程和Worker进程.Master进程负责接收和分配任务,Worker进程负责处理子任务.当各 ...
- 使用protostuff自定义编解码器优化springcloud-feign性能
前言 Spring Cloud feign是伪RPC方式解决微服务间的调用.翻看FeignCloudFeign源码,可以看到Feign默认使用HttpUrlConnection; 代码在Default ...