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'
}

render函数的更多相关文章

  1. QTableView另类打印解决方案(复用render函数去解决print问题)

    Qt QTableView另类打印解决方案     上回书说道Qt的model/view,我就做了个demo用于显示数据库中的内容.没想到tableview的打印竟然成了问题.我困惑了,难道Qt不应该 ...

  2. Vue2.x中的Render函数

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

  3. Vue.js之render函数基础

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

  4. 大白话Vue源码系列(03):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  5. 大白话Vue源码系列(04):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  6. vue2.0之render函数

    虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪.请近距离看一下这行代码 ...

  7. Vue中的render函数随笔

    使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...

  8. Vuejs2.0学习(Render函数,createElement,vm.$slots)

    直接来到进阶部分, Render函数 直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲 ...

  9. 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...

随机推荐

  1. HTTP协议与WEB框架简介

    HTTP协议与WEB框架简介 一.HTTP协议 HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wid ...

  2. Kinect2.0相机标定

    尝试进行Kinect2.0相机进行标定 1. Color镜头标定 $(u_{rgb},v_{rgb},1)=W_{rgb}*(x,y,z)$ Calibration results after opt ...

  3. centos mysql安装 完全版

    在linux中安装数据库首选MySQL,Mysql数据库的第一个版本就是发行在Linux系统上,其他选择还可以有postgreSQL,oracle等 在Linux上安装mysql数据库,我们可以去其官 ...

  4. python进制转换及变量

    .编译型语言和解释型语言的区别? 答: () 编译型语言:是将所有源码编译完成二进制后才进行输出,运行快,执行效率高,时间周期长. ()解释型语言:逐行编译输出,执行效率相对慢,开发效率高, .Pyt ...

  5. 进程池线程池 协程 gvent 单线程实现并发套接字

    1.基于多线程实现套接字服务端支持并发 服务端 from socket import * from threading import Thread def comunicate(conn): whil ...

  6. sap 调试工具,修改变量值

    1: 点击修改,输入变量值,按enter键.

  7. 请求&注解

    @RequestMapping("/{page}") //获取路径中的page参数值 public String showPage(@PathVariable String pag ...

  8. SQL 的约束

    说明:文章所有内容均截选自用户"实验楼包工头"发布在实验楼上的教程[MySQL 基础课程],想要详细的学习SQL,点击教程即可免费学习了:未经允许,禁止转载: 约束是一种限制,它通 ...

  9. iOS 开发笔记-控制器翻页

    找了一天,终于找到了两个能用的. 1.https://github.com/wangmchn/WMPageController 2.https://github.com/everettjf/EVTTa ...

  10. iOS UI基础-7.0 UIScrollView

    概述 移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限.当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容,普通的UIView不具备滚动功能,不能显示过多的 ...