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. Codeforces 961E - Tufurama

    961E - Tufurama 思路: 线段树或者分块 遍历 1 - n - 1,求 区间[i + 1, min(a[i], n)]大于等于 i 的个数,累加起来 线段树: #include<b ...

  2. mui 配置底部tab切换方式以模板的方式访问

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 实例对比 hibernate, spring data jpa, mybatis 选型参考

    原文: 最近重构以前写的服务,最大的一个变动是将mybatis切换为spring data jpa,切换的原因很简单,有两点:第一.它是spring的子项目能够和spring boot很好的融合,没有 ...

  4. android--------内存泄露分析工具—Android Monitor

    Android Studio 内置了四种性能监测工具Memory Monitor.Network Monitor.CPU Monitor.GPU Monitor,我们可以使用这些工具监测APP的状态, ...

  5. python记录_day018 md5加密

    MD5 用法: import hashlib obj = hashlib.md5(加盐) obj.update(明文的bytes) obj.hexdigest() 获取密文 示例: import ha ...

  6. python记录_day04(补充)

    列表删除 切片删除 del lis[1:3]  # 删除索引是1,2的元素 修改 索引切片修改 # 修改 lst = ["太白", "太", "五&q ...

  7. Django之转发和重定向

    https://blog.csdn.net/gscsd_t/article/details/79389167 转发和重定向: 转发:一次请求和响应,请求的地址没有发生变化,如果此时刷新页面,就会出现重 ...

  8. 函数式编程语言(Fuction Program Language)

    一.什么是函数式编程语言 函数式编程语言(functional progarm language)一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型. ...

  9. git相关知识(github,idea等的配置)

    本地git提交文件到github上: 1.在github上创建项目 2.使用git clone https://github.com/xxxxxxx/xxxxx.git克隆到本地 3.编辑项目 4.g ...

  10. chrome手机模拟器显示尺寸不正确

    存在问题: chrome网页调试器中小屏幕时显示尺寸不正确 原因: 自动调整了dpi,导致不是设计的结果 解决方法: 在<head>中添加如下语句: <meta name=" ...