模板语法

tyre会根据配置的模板路径，去找到 template.tpl模板文件，读取并解析。

结构补全

因为工具最终生成的是vue组件，所以如果定义的模板文件中缺少对应的结构，工具会自动补上。

完整结构示例：

<template>
    ... 
</template>
<script>
import xx from 'xxx'
export default {
    components: {
        ...
    },
    data () {
        return {
            ...
            formData: { ... },
            rules: { ... }
        }
    }
}
</script>

语法解析

tyre使用“<% %>”作为占位符，可在其中嵌入任何的JS语句

示例:

# 模板内容

<template>
    <% for (var i = 1; i <= 3; i++) { %>
        <div> 示例1 </div>
    <% } %>
</template>

-----------------------------分隔线------------------------------

# 解析结果:

<template>
        <div> 示例1 </div>
        <div> 示例1 </div>
        <div> 示例1 </div>
</template>

变量插值

tyre使用“<%= %>”作为变量的插值语句

示例:

# 模板内容

<template>
    <% for (var i = 1; i <= 3; i++) { %>
        <div> 示例<%= i %> </div>
    <% } %>
</template>

-----------------------------分隔线------------------------------

# 解析结果:

<template>
        <div> 示例1 </div>
        <div> 示例2 </div>
        <div> 示例3 </div>
</template>

组件引入

tyre使用“<%# %>”作为组件的引入方式

组件的引入，需要在模板数据文件中，配置好引入组件的相关信息

定义模板数据

后续的示例都是依据这个模板数据来进行展示

# data.json

{
    comp: {
        "name": "input",
        "value: "val",
        "placeholder": "请输入..."
    }
}

显示引入

显示引入是显示的调用配置中组件的属性，通过“|”分隔来区分多个属性。第一个属性作为组件的名字，后面属性根据属性名相应的绑定到组件上

# 显示引入示例模板内容

<template>
        <!-- 普通显示引入 --> 
        <%# comp.name|comp.value %>

        <!-- 带结束标签的方式1 -->   
        <%# comp.name|comp.value /%>

        <!-- 带结束标签的方式2 -->   
        <%# comp.name|comp.value %>
                组件间内容
        <%# /comp.name %> 
</template>

-----------------------------分隔线------------------------------

# 解析结果:

<template>
        <!-- 普通引显示引入 --> 
        <input v-model="val">

        <!-- 带结束标签的方式1 -->  
        <input v-model="val"></input>

        <!-- 带结束标签的方式2 -->   
        <input v-model="val">
                组件间内容
        </input>
</template>

直接引入

直接引入是直接调用配置中组件对象，如果组件的属性比较多就不用费劲的一个个调用了

# 直接引入示例模板内容

<template>
        <!-- 普通直接引入 --> 
        <%# comp %>

        <!-- 带结束标签的方式1 -->   
        <%# comp /%>

        <!-- 带结束标签的方式2 -->   
        <%# comp %>
                组件间内容
        <%# /comp %> 
</template>

-----------------------------分隔线------------------------------

# 解析结果:

<template>
        <!-- 普通引显示引入 --> 
        <input v-model="val" placeholder="请输入...">

        <!-- 带结束标签的方式1 -->  
        <input v-model="val" placeholder="请输入..."></input>

        <!-- 带结束标签的方式2 -->   
        <input v-model="val" placeholder="请输入...">
                组件间内容
        </input>
</template>

模板数据中“name” 和 “value” 其实是tyre的关键字段名，更多的字段解释请阅读：模板数据