1.0.2 • Published 4 years ago
kgm-template v1.0.2
数据响应式前端模板引擎
kgm-template 是一个数据响应式的前端 (Javascript) 模板引擎,使用 NT 可以使你的代码实现数据和视图模型的分离(MVC)。
码云地址
https://gitee.com/kgm0515/kgm-template
标签的方式引入
<script type="text/javascript" src="kgm-template.min.js></script>
ES6中使用
安装插件: npm i kgm-template
使用方式1: 数据响应式,自动渲染
创建实例,传入模板、数据、方法等,方法可以调用修改data中的数据,页面随着data修改实时刷新
import Template from 'kgm-template' // 自动解析处理和缓存模板,绑定数据和函数 new Template({ regConfig = null, // 正则配置 namespace = 'default', // 命名空间 template = '', // 模板 rootId = '', // 父元素id rootDom = null, // 元素节点 data= {}, // 绑定的数据 methods ={}, // 方法 components = {}, // 内部组件实例 })
使用方式2: 仅编译,需要手动渲染
仅编译模版暂不渲染,它会返回一个html节点字符串.
import Template from 'kgm-template'
const instance = Template.getInstance({}) let html = instance.compile(tpl, data); // 渲染 document.getElementById('app').innerHTML = HTML
## 自定义模板语法边界符
### 变量正则: ` /{{([\s\S]+?)}}/g `
js表达式正则: /<%([\s\S]+?)%>/g
<!-- 判断 -->
<% if(descript){ %>
<div>{{descript}}</div>
<% }else{ %>
<div> 暂无描述</div>
<% } %>
<!-- 循环 -->
<% for(let i = 0; i<content.length; i++){ %>
<li>
<% if(content[i].edit){ %>
<b>{{content[i].text}}</b>
<% }else{ %>
<b>{{content[i].text}}</b>
<% } %>
</li>
<% } %>
注释正则:/<!--([\s\S]+?)-->/g
<!-- 注释节点 -->
绑定方法:@事件名: @事件名="
<!-- 绑定点击事件 -->
<button @click="deleteItem(event, {{i}})">保存</button>
<!-- 绑定输入事件 -->
<input value="{{content[i].text}}" @input="modifyContent(this, ///'{{item}}///'" />