Vue2.0 render: h => h(App)的解释
render: h => h(App)是ES6的写法,其实就是如下内容的简写:
render: function (createElement) {
return createElement(App);
}
官方文档中是这样的,createElement 是 Vue.js 里面的 函数,这个函数的作用就是生成一个 VNode节点,render 函数得到这个 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
}
然后ES6写法,
render: createElement => createElement(App)
然后用h代替createElement,使用箭头函数来写:
render: h => h(App)
好,现在来解释h的涵义,尤雨溪在一个回复中提到:
It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
它来自单词 hyperscript,这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指
生成HTML 结构的 script 脚本,因为 HTML 是 hyper-text markup language 的缩写(超文本标记语言)
也就是说,createElement 函数是用来生成 HTML DOM 元素的,而上文中的 Hyperscript也是用来创建HTML结构的脚本,这样作者才把 createElement 简写成 h。
而 createElement(也就是h)是vuejs里的一个函数。这个函数的作用就是生成一个 VNode节点,render 函数得到这个 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。
其实在vue 1.0 中,这样的写法也就是如下的含义:
new Vue({
el: '#app',
template:'</App>'
componets: {App}
})
然后页面中使用
<div id='app'>
<app></app>
</div>
Vue2.0 render: h => h(App)的解释的更多相关文章
- Vue2.0 render:h => h(App)
new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...
- 基于vue2.0的在线电影APP,
基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...
- vue2.0 练习项目-外卖APP(1)
前言 vue这个框架现在挺流行的,作为一个专注前端100年的代码爱好者,学习下路径流行的框架是必须的!在网上搜索vue的项目是比较少的,在官网进行了入门学后,没有一个项目练习巩固下,学了就等于没学,所 ...
- render:h => h(App) ----render函数
转载其他博客1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的写法 6 render: h => h(App) vu ...
- vue2.0:(四)、首页入门,组件拆分1
为什么需要组件拆分呢?这样才能更符合模块化这样一个理念. 首先是index.html,代码如下: <!DOCTYPE html> <html> <head> < ...
- 解析vue2.0中render:h=>h(App)的具体意思
render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}. 注意点:1.箭头函数中的this是 指向 包裹this所在 ...
- vue中render: h => h(App)的详细解释
2018年06月20日 10:54:32 H-L 阅读数 5369 render: h => h(App) 是下面内容的缩写: render: function (createEleme ...
- 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) $mount
$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: ...
随机推荐
- ResourceDictionary文件排序方法
默认生成的ResourceDictionary文件是根据主键的hashcode排序生成的,如果想按主键排序生成是不可能的. 可以使用Xml的处理方法来生成ResourceDictionary文件. 1 ...
- wokerman随笔
linux环境检查是否满足workerman要求: curl -Ss http://www.workerman.net/check.php | php workerman依赖扩展:pcntl扩展.po ...
- Java 单文件、多文件上传 / 实现上传进度条
博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...
- Oracle SQL函数-NLSSORT
Syntax 用途: NLSSORT返回字符值char的排序规则键和显式或隐式指定的排序规则.排序规则键是一个用于根据指定的排序规则对char进行排序的字节字符串.排序规则键的属性是:按二进制比较由给 ...
- 计算机网络基础之IP地址详解
计算机网络基础之IP地址详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.IP地址概述 1>.什么是IP地址 我们为什么要使用逻辑地址(IP地址)来标识网络设备,而不采 ...
- python笔记38-使用zmail发各种邮件案例代码
前言 本篇介绍使用zmail发各种格式的邮件,并运行成功的代码,小伙伴们只需更换自己的邮箱就可以运行起来了 content_text发送纯文本 先从最简单的发送纯文本的邮件开始,调通发送邮件的代码. ...
- 从url中下载资源(目前测试只有照片,文件类的没有进行测试)
首先:是工具类: public class DownLoadUtils { /** * 从网络Url中下载文件 * * @param urlStr url路径 * @param fileName 文件 ...
- ARTS-week4
Algorithm 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的.示例:输入:1->2->4, 1->3->4输出:1->1 ...
- QT 子文件的建立(pri)
QT 在做项目的时候有时会有许多不同种类的文件,如果这些文件放在一起会显得特别乱,我们可以将文件用文件夹分类,这样会比较有条理. 1. 在项目文件夹下建立新的文件夹,并在文件夹中添加文本文档将后缀改为 ...
- CentOS7.6编译安装redis5.0
yum install gcc wget http://download.redis.io/releases/redis-5.0.0.tar.gz tar xvf redis-5.0.0.tar.gz ...