render()

Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(//VNode,虚拟dom
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
<anchored-heading :level="">Hello world!</anchored-heading>
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串,组件选项对象,或者一个返回值类型为 String/Object 的函数,必要参数
'div', {
// {Object}
// 一个包含模板相关属性的数据对象
// 这样,您可以在 template 中使用这些属性。可选参数。
}, // {String | Array}
// 子节点 (VNodes),由 `createElement()` 构建而成,
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)

组件树中的所有 VNodes 必须是唯一的,如果需要重复

render: function (createElement) {
return createElement('div',
Array.apply(null, { length: }).map(function () {
return createElement('p', 'hi')
})
)
}

render中 不能用模板中可以使用的v-for,v-if,v-model而是用原生JS实现

v-model在render中的实现:
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.value = event.target.value
self.$emit('input', event
.target.value)
}
}
})
}

事件修饰符

Modifier(s)    Prefix
.passive  &
.capture !
.once ~
.capture.once ~!
.once.capture ~!

对于其他的修饰符,前缀不是很重要,因为你可以在事件处理函数中使用事件方法:

Modifier(s) Equivalent in Handler
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if (event.target !== event.currentTarget) return
Keys:
.enter.13
if (event.keyCode !== 13) return (change 13 to another key code for other key modifiers)
Modifiers Keys:
.ctrl.alt.shift.meta
if (!event.ctrlKey) return (change ctrlKey to altKeyshiftKey, or metaKey, respectively)

插槽

render: function (createElement) {
// `<div><slot></slot></div>`
return createElement('div', this.$slots.default)//静态内容
}
render: function (createElement) {
// `<div><slot :text="msg"></slot></div>`
return createElement('div', [
this.$scopedSlots.default({//用作函数
text: this.msg
})
])
}
向子组件传递
render (createElement) {
return createElement('div', [
createElement('child', {
// pass `scopedSlots` in the data object
// in the form of { name: props => VNode | Array<VNode> }
scopedSlots: {
default: function (props) {
return createElement('span', props.text)
}
}
})
])
}

jsx:

import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render (h) {//将 h 作为 createElement 的别名
return (
<AnchoredHeading level={}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})

函数式组件:标记组件为 functional,这意味它是无状态 (没有 data),无实例

Vue.component('my-component', {
functional: true,
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (createElement, context) {
// ...
},
// Props 可选
props: {
// ...
}
})
函数式组件需要的一切都是通过上下文传递,包括:
props:提供 props 的对象
children: VNode 子节点的数组
slots: slots 对象
data:传递给组件的 data 对象
parent:对父组件的引用
listeners: (2.3.+) 一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。
injections: (2.3.+) 如果使用了 inject 选项,则该对象包含了应当被注入的属性
this.$slots.default 更新为 context.children,之后this.level 更新为 context.props.level


vue-12-渲染函数 & JSX的更多相关文章

  1. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  2. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  3. vue从入门到进阶:渲染函数 & JSX(八)

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  4. vue 渲染函数&jsx

    前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多,  所把要js和html混写. vue 的动态js操作 html  方法:reader函数: vue  ...

  5. Vue.js 渲染函数, JSX(未掌握,未学完)

    渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...

  6. vue渲染函数&JSX

    Vue推荐在绝大多数情况下使用template来创建你的HTML.然而在一些场景中,你真的需要JavaScript的完全编程能力,这时你可以使用render函数,它比template跟接近编译器. 虚 ...

  7. Vue基础-渲染函数-插槽

    Vue 测试版本:Vue.js v2.5.13 先看个插槽的例子: <div id="app"> <child > <span slot-scope= ...

  8. Vue基础-渲染函数-父子组件-传递数据

    Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...

  9. Render渲染函数和JSX

    1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...

  10. Vue躬行记(7)——渲染函数和JSX

    除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分 ...

随机推荐

  1. Python + Selenium WebDriver Api 知识回顾

    一直再用 Selenium WebDriver 但是用的都比较零散,也没有做过总结,今天借此机会,整理一下,方便大家使用时查阅 webDriver  的属性 ['CONTEXT_CHROME', 'C ...

  2. lua --- __newindex 的使用规则

    1.如果 __newindex 是一个函数,在给 table 不存在的字段赋值的时候,会调用这个函数2.如果 __newindex 是一个table,在给 table 不存在的字段赋值的时候,会直接给 ...

  3. 20180518VSTO多簿单表汇总外接程序按钮

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsof ...

  4. 04 flask 项目整体构建

    本文主要的目标是创建flask基本的项目架构,总体架构: 详细的项目目录结构: Flask 项目创建的过程 一.项目(students)创建初始化工作 1. 创建项目的虚拟环境 mkvirtualen ...

  5. linux基础知识(1)

    1.date man date :查看帮助 1. date [OPTION]... [+FORMAT]:显示时间 ,format表示格式符号 例如: date :Sun Dec 23 21:45:34 ...

  6. Vue.js总结 [2017.6.5]

    <head> <script src="https://unpkg.com/vue/dist/vue.js"></script> </he ...

  7. RFBnet论文笔记

    论文:Receptive Field Block Net for Accurate and Fast Object Detection 论文链接:https://arxiv.org/abs/1711. ...

  8. linux网络配置命令(一)——ifconfig

    linux网络配置命令(一)——ifconfig ifconfig 查看.配置网卡信息.已过时,推荐使用ip命令 格式:  ifconfig [interface]                   ...

  9. python面向对象之 类

    内容梗概: 1. 类的成员 2. 类的成员-变量 3. 类的成员-方法 4. 类的成员-属性 5. 私有 1.类的成员class 类名: 方法 def __init__(self, 参数1, 参数2. ...

  10. Android(二)——frida安装教程

    pc端下载:pip install frida 之后就是在手机端或者模拟器下载对应版本的server 在手机或者模拟器上查看cpu版本型号,就根据这个来下载server system/build.pr ...