vue中的render函数介绍

render函数是什么

简单的说，在 vue 中我们使用模板HTML语法组建页面的，使用 render 函数我们可以用js语言来构建DOM。

因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement，还有约定的简写叫h，vm中有一个方法_c,也是这个函数的别名。

先看官网对 createElement 的介绍：

// @returns {VNode}
createElement(// {String | Object | Function}// 一个 HTML 标签字符串，组件选项对象，或者// 解析上述任何一种的一个 async 异步函数，必要参数。'div',// {Object}// 一个包含模板相关属性的数据对象// 这样，您可以在 template 中使用这些属性。可选参数。{// (详情见下一节)},// {String | Array}// 子节点 (VNodes)，由 `createElement()` 构建而成，// 或使用字符串来生成“文本节点”。可选参数。['先写一些文字',createElement('h1', '一则头条'),createElement(MyComponent, {props: {someProp: 'foobar'}})]
)

就是说createElement(params1, params2, params3)接受三个参数，每个参数的类型官方介绍已经说明。

render函数怎么用

render: (h) => {return h('div', {//给div绑定value属性props: {value: ''},//给div绑定样式style: {width: '30px'},//给div绑定点击事件　　on: {click: () => {console.log('点击事件')}},})
}

深入 data 对象

有一件事要注意：正如在模板语法中，v-bind:class 和 v-bind:style ，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如 innerHTML (这会取代 v-html 指令)。

{// 和`v-bind:class`一样的 API'class': {foo: true,bar: false},// 和`v-bind:style`一样的 APIstyle: {color: 'red',fontSize: '14px'},// 正常的 HTML 特性attrs: {id: 'foo'},// 组件 propsprops: {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'
}

vue中的render函数介绍相关推荐

vue中的render函数
vue中的render函数的使用我们先看一个例子: render: function (createElement) {return createElement('h1', this.blogTit ...
vue中的render函数、h（）函数、函数式组件
一.什么是render 官网:用于编程式地创建组件虚拟 DOM 树的函数. 在我们使用webpack脚手架创建项目时,都能在main.js中看到一个render函数 import Vue from ' ...
Vue中的 h 函数
Vue中的 h 函数在了解 h 函数之前,我们需要先了解虚拟DOM, 什么是虚拟DOM? 虚拟DOM 是使用JS 对象模拟真实的DOM结构,用JavaScript 对象描述DOM 的层次结构.D ...
Numpy中np.mashgri() 函数介绍及2种应用场景
@[toc](Numpy中np.mashgri() 函数介绍及2种应用场景文章目录:) 近期在好几个地方都看到meshgrid的使用,虽然之前也注意到meshgrid的用法. 但总觉得印象不深刻,不 ...
java中正则表达式函数_java正则表达式PHP中的正则表达式函数介绍
java正则表达式PHP中的正则表达式函数介绍正则表达式(Regular Expression) 正则表达式系统: 1.POSIX 2.Perl PHP中使用的regex是PCRE: NOTE:PC ...
vue 执行函数this_在vue中使用回调函数,this调用无效的解决
let self = this //使用新变量替换this,以免this无效 //updatestudentinfotoserver是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据, ...
vue中class绑定函数
vue中class绑定函数 vue+class类应用函数,增加class类名相关博客: v-for循环.v-if 动态判断+动态赋值+操作class类:(计算属性)强制绑定函数以上就是关于&quo ...
php spl函数,PHP SPL标准库中的常用函数介绍
这篇文章主要介绍了PHP SPL标准库中的常用函数介绍,本文着重讲解了spl_autoload_extensions().spl_autoload_register().spl_autoload()三 ...
mounted钩子函数_怎样实现Vue中mounted钩子函数获取节点高度
这次给大家带来怎样实现Vue中mounted钩子函数获取节点高度,实现Vue中mounted钩子函数获取节点高度的注意事项有哪些,下面就是实战案例,一起来看一下. 遇到的问题最近在开发一个Vue的项 ...

vue中的render函数介绍

render函数是什么

render函数怎么用

深入 data 对象

vue中的render函数介绍相关推荐

最新文章

热门文章