en Kooboo Logo 说明文档

TPL + VUE

 

Kooboo 是在参考 Template Attribute Language 以及VueJS的基础上开发。 Kooboo是后台SSR引擎, 发送到浏览器的是最终生成的HTML代码。 
 
参考:
https://en.wikipedia.org/wiki/Template_Attribute_Language
https://vuejs.org/api/built-in-directives.html
 
TPL的语法基本都实现了, VueJs可以在后台运行的语法也基本实现了, 智能提示基本都有了。
 
一个最简单的示例如下: 
 
<script env="server">
    var data = [];
    data.push({FirstName:"Joe", LastName:"Smith"});
    data.push({FirstName:"Van Golf", LastName:"Vincent"}); 
</script>

<div k-for="item in data" repeat-self="true">
    <span k-content="item.FirstName"> first name</span>
    <span k-content="item.LastName"> LastName name</span>
</div>
 
k- 与 v- env=server
 
前缀 k- 的语法只能在后台运行。 前缀 v- 的语法以及相关{{}}绑定语法, 因为无法判断用户是要在前端还是后端运行, 所以需要用户手工指定 env=server 或 env=client, 默认值是client.
 
上面的语法等同于
 
<script env="server">
    var data = [];
    data.push({FirstName:"Joe", LastName:"Smith"});
    data.push({FirstName:"Van Golf", LastName:"Vincent"}); 
</script>

<div env="server" v-for="item in data" repeat-self="true">
    <span v-text="item.FirstName"> first name</span>
    <span v-text="item.LastName"> LastName name</span>
</div>
 
生成的结果
 
<div>
    <span>Joe</span>
    <span>Smith</span>
</div><div>
    <span>Van Golf</span>
    <span>Vincent</span>
</div>