vue2.0之render函数
虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数。
虚拟DOM
Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。请近距离看一下这行代码:
return createElement('h1', this.blogTitle) |
createElement
到底会返回什么呢?其实不是一个实际的 DOM 元素。它更准确的名字可能是createNodeDescription
,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
render方法会传入一个createElement函数,它是一个用于创建DOM元素或者用于实例化其他组件的构造方法。render方法必须返回一个createElement函数的调用结果,也就是模版内的顶层元素(这个方法在vue2的习惯性使用中经常用h来命名)。
eg:
render示例:
export default {
render (createElement){
const menu_items = ["首页","搜索","分类","系统"]
return createElement('ul',{
{
class:{'uk-nav':true}
},
menu_items.map(item=>createElement('li',item)))
}
}
}
上述render方法用template来写的话如下:
<template>
<ul>
<li v-for="item in menu_items">
{{ item }}
</li>
</ul>
</template>
正是因为vue2中render只能返回一个createElement,所以vue2一定要有顶层元素。
render方法内不能再使用任何指令标记。其次,对组件或网页元素之间的属性赋值是通过createElement函数的第二个参数data进行的,domProps会向元素传递标准的DOM属性,而propsDate则用于对其他的Vue组件的自定义属性(props内的定义)进行赋值。
------------------------------------------------------------------------------------
createElement的定义
createElement(tag,data,children)
返回值vNode(虚拟节点)
参数说明:
tag 类型:String/Object/Function 说明:一个HTML标签,组件类型,或一个函数
Data 类型:Object 说明:一个对应属性的数据对象,用于向创建的节点对象设置属性值
Children 类型:String/Array 说明:子节点
向构造的VNode对象设置文本时可以直接传入字符串,例如:
createElement('div','这是行内文本')
输出结果就是:
<div>这是行内文本</div>
data对象属性表
{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器基于 `on`
// 所以不再支持如 `v-on:keyup.enter` 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件,用于监听原生事件,而不是组件内部使用
// `vm.$emit` 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
// 赋值,因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件,需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
vue2.0之render函数的更多相关文章
- 解析vue2.0中render:h=>h(App)的具体意思
render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}. 注意点:1.箭头函数中的this是 指向 包裹this所在 ...
- render函数
vue2.0之render函数 虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的 ...
- Vue2.0 render:h => h(App)
new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...
- Vue2.x中的Render函数
Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...
- vue2.0项目实战(4)生命周期和钩子函数详解
最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿
在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...
- 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
- Vue2.0关于生命周期和钩子函数
Vue生命周期简介: Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的,如下: 代码验证: <!DOCTYPE html> <html> <head& ...
随机推荐
- [国嵌攻略][157][SPI总线介绍]
SPI总线架构 SPI(serial peripheral interface)串行外设接口,是一种高速,全双工,同步的通信总线.采用主从模式(master slave)架构,支持多个slave,一般 ...
- Sass的四种编译方式
我们都知道Sass其实有两种,一种是Sass,一种是SCSS. Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: 文件扩展名不同,Sass 是以“.s ...
- 邓_Jquery测试题
一.Jquery测试题 下面哪种不是jquery的选择器?(单选)A.基本选择器 B.后代选择器 C.类选择器 D.进一步选择器考点:jquery的选择器 (C) 当DOM加载完成后要执行的函数,下面 ...
- 风险案例-28期-项目Leader与团队成员缺乏沟通,问题响应度较慢导致团队士气低落,工作效率低
典型案例: A公司某C类项目目前进入开发高峰期,项目组的三个leader预计在项目的实际task投入占比为70%,剩30%工作时间用于指导组员进行作业实施并担当部分管理工作.从项目实施过程中发现Lea ...
- UML学习网址列表
在线绘图工具ProcessOn:https://www.processon.com/support#mind-format 鲁棒图实例:http://blog.csdn.net/joeyon1985/ ...
- HTML学习(一)
文本输出/超链接 <!--/* * @<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体.h1最大,h6最小 * @< ...
- U盘安装CentOS 7问题解决
1 使用U盘安装最新版Centos时报错(CentOS-7-x86_64-DVD-1503-01): 错误提示:"Warning:could not boot;Warning: /dev/r ...
- 五、Html表单标签
表单,表单控件的主要作用就是收集用户体验,当用户提交表单时,用户输入的内容将作为请求参数提交到远程服务器. 1,form标签 <form>:创建表单,该元素不会生成可视化的界面,但是其他控 ...
- linkin大话数据结构--Map
Map 映射关系,也有人称为字典,Map集合里存在两组值,一组是key,一组是value.Map里的key不允许重复.通过key总能找到唯一的value与之对应.Map里的key集存储方式和对应的Se ...
- 关于oracle视图小结
关于oracle的视图小记:一. 视图:就是对SQL语句的封装,使用起来更方便.不易出错 优点: 1.简化数据操作:视图可以简化用户处理数据的方式 2.着重于特定数据:不必要的数据或敏感的数据可以 不 ...