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( ...
随机推荐
- （1）ESP8266微信门铃
http://rayuu.com/2017/11/13/esp8266-wechat-doorbell/(留做参考) 就是当门铃按键按下,微信会收到消息提醒. 若在家就算了,没在家会受到远程提示. 自 ...
- springmvc中messageConverter用法
解决StringHttpMessageConverter乱码问题问题: 当我们将字符串对象通过springmvc传回浏览器时,因为StringHttpMessageConverter消息转换器中默认的 ...
- buildroot使用介绍
buildroot是Linux平台上一个构建嵌入式Linux系统的框架.整个Buildroot是由Makefile脚本和Kconfig配置文件构成的.你可以和编译Linux内核一样,通过buildro ...
- BZOJ1061 NOI2008 志愿者招募 线性规划、费用流
传送门 一道思路很妙的线性规划网络流 设\(X_i\)表示第\(i\)天需要的人数,\(P_i\)表示第\(i\)种人雇佣的个数 那么我们可以列出一系列式子 比如说样例就可以列出三个式子: \(P_1 ...
- CSS 伪类 (Pseudo-classes)实例
CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...
- Flask的蓝图和红图
1.蓝图 对于简单的项目来说,比如项目就只有一个user模块,我们可以都将视图函数定义在一个文件里面,不需要用到蓝图. 但是如果我们的项目有多个模块,如下有v1模块,v2模块.....等,那么如果我们 ...
- H5 25-CSS三大特性之层叠性
25-CSS三大特性之层叠性 我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Day11 Python基础之装饰器(高级函数)（九）
在python中,装饰器.生成器和迭代器是特别重要的高级函数 https://www.cnblogs.com/yuanchenqi/articles/5830025.html 装饰器 1.如果说装 ...
- .net之httphandler小记
本地调试代码遇到的一个问题,没有走URL路由器(UrlReWriter : IHttpHandlerFactory),于是网上科普了一下原理,主要有两点: 1.asp.net在处理http请求时,会由 ...
- 初用Ajax
早就有学习Ajax的想法了,但每次拿起一本Ajax的书,翻了不到百页就学不下去了,里面讲的东西实在太多了,前面讲javaScript的内容看了好 几遍都记不住,也就没心思去看后面的内容:看Ajax案例 ...