使用vue-cli创建项目后,再main.js里面有这样一段代码:

new Vue({

    render:h => h(App)

}).$mount('#app')

render函数是渲染一个视图,然后给el挂载,如果没有render那页面什么也不会显示

最原始的:

render:function(createElement){
return createElement(App)
}

缩写: (这里的h就是createElement的缩写)

render (createElement) {
return createElement(App)
}

再缩写:

render (h) {
return h()App)
}

使用ES6箭头函数

render: h => h(APP)

例子:

return h(this.tag, {
class,
style
}, this.$slots.default
)

第一个this.tag表示标签名,比如div

第二个参数是定义创建的组件的一些属性,比如class、style

第三个参数 this.$slots.default  父组件调用子组件时,传递的slot都保持在$slots.default这个数组里面

Vue中的render函数随笔的更多相关文章

  1. vue中的render函数介绍

    简介:对于不了解slot的用法(参考:大白话vue-slot的用法)又刚接触render函数的同学来说,官网的解释无疑一脸懵逼,这里就整理下个人对render函数的理解 问题: 1.render函数是 ...

  2. 在vue中结合render函数渲染指定的组件到容器中

    1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...

  3. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  4. iview table中的render函数使用

    1.表格列数据内容过多可以用以下两个属性解决: ellipsis:"true', tooltip:true 使每个列的内容如果过多的话变为省略号 2.table中的render函数(实现根据 ...

  5. Vue.js之render函数基础

    刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...

  6. 关于Vue中的 render: h => h(App) 具体是什么含义?

    render: h => h(App) 是下面内容的缩写: render: function (createElement) { return createElement(App); } 进一步 ...

  7. vue中的钩子函数

    什么是vue的钩子函数? Vue 实例在被创建时,会经过一系列的初始化过程,初始化过程中会运行一些函数,叫做生命周期钩子函数,通过运用钩子函数,用户在可以在Vue实例初始化的不同阶段添加自己的代码,以 ...

  8. Vue2.x中的Render函数

    Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...

  9. 【转】vue中的钩子函数。。

    前言 在vue开发SPA应用的过程中,多数情况下我们需要解决一个问题 就是在路由跳转的过程中需要更新你SPA应用的 title , 这一节不说其他,就展示如何使用 vue-router 的 导航钩子  ...

随机推荐

  1. .Net Core/Framework之Nginx反向代理后获取客户端IP等数据探索

    公司项目最近出现获取访问域名.端口.IP错误现象,通过排查发现, 之前项目一直通过Nginx自定义Headers信息来获取,但最近运维人员失误操作造成自定义Header信息丢失,造成项目拿不到对应的数 ...

  2. lua 设置文件运行的环境

    背景 在一个lua文件中书写的代码, 使用的变量, 需要设置其运行环境. 目的: 1. 不破坏全局环境. 2. 限定文件所使用的环境, 作为沙箱功能. 解法 限定运行空间环境的文件: local m ...

  3. hashMap源码分析1--翻译

    * Hash table based implementation of the <tt>Map</tt> interface. This* implementation pr ...

  4. ASP.NET MVC4在部署IIS后,运行时显示的是整个Web的目录列表

    页面出现如下图: 第一种解决方案: 刚安装好IIS,这时需要注册IIS. 在Dos中进入Framework的安装文件夹 你将要发布的系统是什么.Net Framework版本,就注册什么版本 4.0版 ...

  5. Redis + keepalived 高可用行配置检测脚本

    Redis 在生产配置中:除redis集群.哨兵模式之外:主从模式还是比较普遍的. 配置 redis 多主从:由 keepalived 做 VIP 地址漂移.可以实现redis的高可用性. keepa ...

  6. luogu P4770 [NOI2018]你的名字

    传送门 upd 19.4.24: WC这个做法真的有问题,不往回跳会WA是因为一开始跳到了S[1...l-1]所对应的点,然后往后接字符的时候可能会因为不在正确的endpos中,然后往回跳过头,其实一 ...

  7. 第20月第28天 tensorflow

    1. 505  sudo pip install -i https://pypi.tuna.tsinghua.edu.cn/simple --upgrade virtualenv 506   virt ...

  8. ES6走一波 变量结构赋值

    Destructuring  变量的解构赋值 是一种模式匹配 ES6我关注点之一是用途  能否举些好例子是检验学习到位的方法之一 交换变量值 函数返回多个值 函数入参为对象.数组,内部使用更简洁 意义 ...

  9. 剑指Offer-第一个只出现一次的字符位置

    题目描述 在一个字符串(1<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置 思路 思路一: 使用整型数组对出现次数进行统计. 思路二: 使用Bit ...

  10. animation属性

    文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~ CSS3(三)Animation 入门详解 css3中变形与动画(三) CSS3 Animation 是由三部分组成. 关键帧(keyfra ...