art-template模板引擎

最新推荐文章于 2024-08-10 07:07:58 发布

I NFINIT Y

最新推荐文章于 2024-08-10 07:07:58 发布

阅读量184

点赞数 1

本文链接：https://blog.csdn.net/weixin_43021174/article/details/112391123

版权

介绍
art-template 是一个简约、超快的模板引擎
特点

拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小

安装

npm install art-template --save

在浏览器中实时编译
template-web.js

使用

在页面中引入art-template

<script src="https://unpkg.com/art-template/lib/template-web.js"></js>

准备art-template模板

script type="text/html" id="tpl">
</script>

通过template()方法告诉模版引擎id为tpl的模板和数据data进行拼接，返回一个字符串

var data = {
        age: 18
    }
 var html = template('tpl', data)

语法

按照原文输出

<script type="text/html" id="tpl">
   {{@age}}
</script>
<script>
var data = {
        age: '<b>18</b>'
    }
var html = template('tpl', data)
 document.querySelector('.contain').innerHTML = html
</script>

条件

<script type="text/html" id="tpl">
{{if age>20}}
    <h1>显示age>20</h1>
    {{else}}
    <h2>显示此age<20</h2>
 {{/if}}
 </script>
 <script>
 var data = {
        age: 18
    }
  var html = template('tpl', data)
   document.querySelector('.contain').innerHTML = html
 </script>

循环

<script type="text/html" id="tpl">
{{each target}}
    <li>{{$value.name}}</li>
{{/each}}
 </script>
  <script>
   var target = [{
        name: '张三'
    }, {
        name: '李四'
    }, {
        name: '王五'
    }]
    var html = template('tpl', {
        target
    })
    document.querySelector('ul').innerHTML = html
  </script>