关于Vue的Render的讲解
首先我们传统的对于DOM的操作基本上都是通过js直接的获取一个节点,然后对DOM进行增加或者是删除。而Vue的Render这个函数是通过js虚拟的添加dom节点,然后虚拟的添加到html节点上去。
算了感念的东西不知道是怎么回事,大概意思就是 用Render函数的话比正常我们通过传统方式要节省时间和消耗就可以了。下面介绍用法。本人也不明白怎么回事,反正性能方面要比传统的方式要好,如果想要详细的查看的话,自己去百度vue的官方的文档。
Render最经典的就是createElement方法。下面介绍。
createElement 构成了Vue Virtual Dom的魔板,它有三个参数:
createElement (
// {String | Object | Function}
// 一个 HTMl标签,转件选项,或者一个函数
// 必须return 上述中最少一个
'div',
// {Object}
// 一个对应属性的数据对象,可选
// 您可以在template中使用
{
// 稍后详细的介绍
},
// {String | Array}
// 子节点(vnodes),可选
[
createElement('h1','hello world'),
createElement(MyComponent,{
props:{
someProp : 'foo'
}
}),
'bar'
]
)
下面粘贴一个我的事例
props:{
level:{
type:Number,
required:true
},
title:{
type:String,
default:'url传参'
}
},
render:function(createElement) {
return createElement(
'h' + this.level,
[
createElement(
'a',
{
domProps:{
href: '#' + this.title
}
},
this.$slots.default
)
]
)
}
效果为:
这里用到了一个组件,url-render这个组件,这是自定义的组件,不要想多了。
关于Vue的Render的讲解的更多相关文章
- html select options & vue h render
html select options & vue h render https://developer.mozilla.org/en-US/docs/Web/HTML/Element/opt ...
- vue h render function & render select with options bug
vue h render function & render select with options bug https://github.com/xgqfrms/vue/issues/41 ...
- vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下
vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...
- 终于搞懂了vue 的 render 函数(一) -_-|||
终于搞懂了vue 的 render 函数(一) -_-|||:https://blog.csdn.net/sansan_7957/article/details/83014838 render: h ...
- vue之render基本书写方法
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- vue使用render渲染&jsx
vue&jsx文档 vue实例属性 // App.ts import hBtn from './components/hBtn' import hUl from './components/h ...
- 012——VUE中todos示例讲解class中应用表达式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue中render: h => h(App)的含义
// ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...
- vue之Render函数
(1)什么是Render函数 先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如‘特性’是一个& ...
随机推荐
- 18_Condition条件
[简述] wait()和notify()方法是和synchronized关键字合作使用的. Condition是和重入锁相关联的,通过ReentrantLock.newCondition()生成一个与 ...
- 【Linux】Linux远程登陆
登录任务 Windows主机--远程登录--Linux主机 一.登陆前提准备 1.1 确保网络通畅 确保从Windows 能够Ping通Linux 1.2 关闭Linux防火墙 //前提:以root管 ...
- String_Helper
#region 扩展验证方法 #region <<IsNullOrEmpty()字符串是否为空>> /// <summary> /// <para>代码 ...
- 操作Active Directory C#
.Net平台操作活动目录Active Directory,使用System.DirectoryServices.ActiveDirectory,主要是User OU 和Group的操作. 代码运行了一 ...
- 1.Zabbix 3.0 基础
请查看我的有道云笔记: http://note.youdao.com/noteshare?id=85046af7675851675679a47beadc7aa3&sub=000AB0B2409 ...
- Java程序员面试题集2
51.类ExampleA 继承Exception,类ExampleB 继承ExampleA. 有如下代码片断: try{ throw new ExampleB("b") }catc ...
- SAP成都研究院许聚龙:Hello, Coresystems!
Jerry的前一篇文章<SAP成都研究院数字创新空间沟通S/4HANA和C/4HANA的智能服务演示视频和Coresystems分享预告>已经提到,接下来会由SAP成都研究院数字创新空间的 ...
- Eclipse Java常用快捷键(Eclipse Shortcut Keys for Java Top10)(转)
Eclipse Java常用快捷键(Eclipse Shortcut Keys for Java Top10) 0.背景Eclipse作为Java的OpenSource开发IDE,已经是开发人员进行J ...
- IOS VLC (第三方音频)的使用
使用注意 ● 注意点 ● 存放VLC的文件夹名不要有空格 ● 一旦执行过编译脚本sh,就别再修改存放VLC的文件夹名 编译 ● 打开最外层的工作空间 选择真机运行 编译 ● 一些简单的示例程序 集 ...
- 课堂笔记-------字符串类型string------练习
字符串类型 一.string //打出s.时就会出现一堆的方框,要找不带箭头的(不带箭头的是我们现在可以用的到的),不要找带箭头的(带箭头的是扩展,现在还用不到) //不带箭头的都是对s的操作(动作和 ...