vue render

发布时间:2021-04-29 发布网站:https://www.cnblogs.com/guojikun
前端之家收集整理的这篇文章主要介绍了vue render前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

内容来自于vue官方文档

/**
 * @returns {VNode}
 */
createElement(
	// {String | Object | Function}
	// 一个 HTML 标签名、组件选项对象,或者
	// resolve 了上述任何一种的一个 async 函数。必填项。
	'div',// {Object}
	// 一个与模板中属性对应的数据对象。可选。
	{
		// 与 `v-bind:class` 的 API 相同,
		// 接受一个字符串、对象或字符串和对象组成的数组
		'class': {
			foo: true,bar: false
		},// 与 `v-bind:style` 的 API 相同,
		// 接受一个字符串、对象,或对象组成的数组
		style: {
			color: 'red',fontSize: '14px'
		},// 普通的 HTML 特性
		attrs: {
			id: 'foo'
		},// 组件 prop
		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
			}
		}],// 作用域插槽的格式为
		// { name: props => VNode | Array<VNode> }
		scopedSlots: {
			default: props => createElement('span',props.text)
		},// 如果组件是其它组件的子组件,需为插槽指定名称
		slot: 'name-of-slot',// 其它特殊顶层属性
		key: 'myKey',ref: 'myRef',// 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
		// 那么 `$refs.myRef` 会变成一个数组。
		refInFor: true
	},// {String | Array}
	// 子级虚拟节点 (VNodes),由 `createElement()` 构建而成,
	// 也可以使用字符串来生成“文本虚拟节点”。可选。
	[
		'先写一些文字',createElement('h1','一则头条'),createElement(MyComponent,{
			props: {
				someProp: 'foobar'
			}
		})
	]
)

总结


以上是前端之家为你收集整理的vue render全部内容,希望文章能够帮你解决vue render所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。