vue template explorer

Playground for exploring how the Vue template compiler compiles your template.

Try it out.

vue-template-explorer's People

Stargazers

Watchers

vue-template-explorer's Issues

请问还有Vue2版本的吗，现在该网站默认Vue3版本

准确来说是Vue2.6对应的版本

https://template-explorer.vuejs.org/网址蹦了，打不开

Uncaught TypeError: Cannot convert undefined or null to object
at window.init (template-explorer.global.js:37884)
at Function.t._invokeFactory (loader.js:1036)
at t.complete (loader.js:1046)
at s._onModuleComplete (loader.js:1663)
at s._onModuleComplete (loader.js:1675)
at s._onModuleComplete (loader.js:1675)
at s._onModuleComplete (loader.js:1675)
at s._onModuleComplete (loader.js:1675)
at s._onModuleComplete (loader.js:1675)
at s._onModuleComplete (loader.js:1675)

Doesn't work

Sorry for the title but it simply doesn't work, errors as of now:

部分元素预览编译结果与实际编译结果不一致

<div>
	<textarea><br /></textarea>
	<Textarea><br /></Textarea>
	<Style><br /></Style>
	<Script><br /></Script>
	<component is="textarea"><br /></component>
	<component is="Textarea"><br /></component>
	<component is="style"><br /></component>
	<component is="Style"><br /></component>
	<component is="script"><br /></component>
	<component is="Script"><br /></component>
</div>

预览编译结果：

function render () {
	with ( this ) {
		return _c('div', [
			_c('textarea', [_v('<br />')]),
			_c('Textarea', [_v('<br />')]),
			_c('Style', [_v('<br />')]),
			_c('Script', [_v('<br />')]),
			_c('textarea', { tag: 'component' }, [_c('br')]),
			_c('Textarea', { tag: 'component' }, [_c('br')]),
			_c('style', { tag: 'component' }, [_c('br')]),
			_c('Style', { tag: 'component' }, [_c('br')]),
			_c('script', { tag: 'component' }, [_c('br')]),
			_c('Script', { tag: 'component' }, [_c('br')])
		], 1);
	}
}

实际编译结果：

function anonymous () {
	with ( this ) {
		return _c('div', [
			_c('textarea'),
			_v(' '),
			_c('Textarea'),
			_v(' '),
			_c('Style'),
			_v(' '),
			_c('Script'),
			_v(' '),
			_c('textarea', { tag: 'component' }, [_c('br')]),
			_v(' '),
			_c('Textarea', { tag: 'component' }, [_c('br')]),
			_v(' '),
			_c('style', { tag: 'component' }, [_c('br')]),
			_v(' '),
			_c('Style', { tag: 'component' }, [_c('br')]),
			_v(' '),
			_c('script', { tag: 'component' }, [_c('br')]),
			_v(' '),
			_c('Script', { tag: 'component' }, [_c('br')])
		], 1);
	}
}

这里列举了三个会被特殊对待的标签（先忽略空白处理问题），主要谈论的是 <textarea> <style> <script> 标签及其大小写变种组件中 HTML 标记处理问题：

为什么两种编译结果不一致？
为什么实际上会对 <textarea> 等标签内的标签进行剔除，这似乎不是在模拟原生行为？
这种行为是否是有意为止、并能保持稳定的，还是只是一种暂时照顾不周、顺便简化处理的边缘情况？官方文档中没有谈及过这一点。
<title> 标签和 <textarea> 标签都属于 escapable raw text elements，而 <style> <script> 标签属于 raw text elements，但在引擎编译结果中，似乎 <title> 被完全当作普通元素对待，而实际上它是不能包含子节点的，如何理解这种行为？

非常感谢！

Recommend Projects