By TommyShao
©️广州筷子信息科技
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串,组件选项对象,
// 或者一个返回值类型为String/Object的函数,必要参数
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样,您可以在 template 中使用这些属性.可选参数.
{
// data object
},
// {String | Array}
// 子节点(VNodes),可以是一个字符串或者一个数组. 可选参数.
[
createElement('h1', 'hello world'),
createElement(MyComponent, {
props: {
someProp: 'foo'
}
}),
'bar'
]
)
{
// 和`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
},
// 自定义指令. 注意事项:不能对绑定的旧值设值
// 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 => h('span', props.text)
},
// 如果组件是其他组件的子组件,需为slot指定名称
slot: 'name-of-slot'
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
render: function (createElement) {
if (this.items.length) {
return createElement('ul', this.items.map(function (item) {
return createElement('li', item.name)
}))
} else {
return createElement('p', 'No items found.')
}
}
// slots
render: function (createElement) {
// <div><slot></slot></div>
return createElement('div', this.$slots.default)
}
// scopedSlots
render: function (createElement) {
// <div><slot :text="msg"></slot></div>
return createElement('div', [
this.$scopedSlots.default({
text: this.msg
})
])
}
Vue.component('my-component', {
// 标记组件为 functional,
// 这意味它是无状态(没有 data),无实例(没有 this 上下文)
functional: true,
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (createElement, context) {
// ...
},
// Props 可选
props: {
// ...
}
})
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
*.vue单组件
*.vue单组件
// Render.js
export default {
data () {
return {
text: 'Render'
}
},
render (createElement) {
const self = this._self
return createElement(
'div',
{
'class': 'class-render'
},
`${self.text}`
)
}
}
*.vue单组件
<template>
<div>
{{ title }}
<p>{{ now }}</p>
<button @click="handleClick">click</button>
<hr />
<child></child>
</div>
</template>
<script>
export default {
data () {
return {
title: 'Parent',
now: ''
}
},
methods: {
handleClick () {
this.title = 'Parent click Title'
}
},
components: {
child: {
data () {
return {
title: 'Child'
}
},
methods: {
handleClick () {
const now = new Date().getTime()
this.title = this.title.replace(/-.*$/, '') + '-' + now
this.$parent.now = now
}
},
created () {
this.$on('change', (val) => {
console.log('parent title change:', val)
})
},
render (createElement, context) {
const self = this._self
const h = self.$createElement
const parent = self.$parent
return h(
'div',
[
h('h2', parent.title),
h('h3', self.title),
h('button', {
on: {
click: self.handleClick
}
},
'child click'),
h('button', {
on: {
click: () => {
parent.title = 'child click title'
this.$emit('change', parent.title)
}
}
},
'click child title')
]
)
}
}
}
}
</script>
*.vue单组件
render (h) {
return (
<div
// 自定义属性
id="foo"
// DOM 属性
domPropsInnerHTML="bar"
// 事件定义
onClick={this.clickHandler}
// 原生事件定义
nativeOnClick={this.nativeClickHandler}
// 特殊的顶级属性
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
vue-jsx 与 React jsx的差异
vue-jsx 特征
vue-jsx 特征
import Todo from './Todo.js'
export default {
render (h) { // createElement函数自动注入
const data = {
class: ['b', 'c']
}
// 定义指令
const directives = [
{ name: 'my-dir', value: 123, modifiers: { abc: true } }
]
// data自动展开,class 合并到一起
// 以首写字母大写开头,不需注册 Todo 组件,自动注册
return <Todo class="a" {...data} {...{ directives }} />
}
}