function sayHello() {
return 'Hello! World.';
}
echo sayHello();
<item :name="D32钢" @data=`{ "list" : [ {}, {} ] }`/>
wikitext语法实在是有太多大括号了,读起来太累了。
markdown写起来不错,但是没有数据插值和运算的能力,而且表达能力有限(除非内联html)。
jsx过于灵活了,而且由于js的部分,很难性能跑过node。
所以借鉴vue的语法设计这个模板语法。
文本插值是最基本的能力,模板从上层获取msg的值并插入文本。跟wikitext一样 除了没有默认值以外。
<span>Message: {{ msg }}</span>
':'被引入以区分是变量 还是字符串
<span :id="msg">Message</span>
渲染成
<span id="msg实际的值">Message</span>
<span id="msg">Message</span>
渲染成
<span id="msg">Message</span>
也支持 '单引号 和 `反引号
'@'被引入以标记后面的数据是一段内连的json
<item @data=`{ "name" : "D32钢" }`/>
<div
class="static"
:class="{ active: isActive, text-danger: hasError }"
>123</div>
在如果传入
{
isActive: true,
hasError: false
}
输出
<div class="static active">123</div>
v-if v-else v-else-if
<p v-if="seen">现在你看到我了</p>
如果seen是true
输出
<p>现在你看到我了</p>
如果是false 什么都不输出。
v-else 和 v-else-if 必须紧跟在v-if之后
v-for
<ul id="array-rendering">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
如果items传入 [{ message: 'Foo' }, { message: 'Bar' }]
输出
<ul id="array-rendering">
<li>
Foo
</li>
<li>
Bar
</li>
</ul>
需要像wikitext一样从外部获得数据,进行简单的运算然后在模板中插入的能力。这部分在文本编辑器之外,在ui上选择,并生成dsl。
和vue一样,需要在接受到参数之后,将其转化成数据之后才能在模板中插值。
数据可以进行模板插值,支持json的所有类型,数字类型的字段默认按照十进制转换到字符串,布尔类型不支持查值。
参数作为模板的输入,支持json的所有类型。
<item :name="D32钢" @data=`{ "list" : [ {}, {} ] }`/>
需要显示指出当前模板中要用的模板(也许可以在文本编辑器用到的时候自动在外面添加),被使用的模板在这个阶段可以被重命名。
大概参照ue4可视化脚本编辑器的感觉。