art-template
art-template
输出
标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始语法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
<h2>{{ name }}</h2>
{{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let data = {
name: '姓名',
};
let html = template('user-tpl', data);
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
原文输出
原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。
标准语法
{{@ value }}
原始语法
<%- value %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
{{if user.is_show}}
<h2>{{@ user.name }}</h2>
{{each user.child}}
<p>孩子{{$index + 1}}:{{$value}}</p>
{{/each}}
{{/if}}
{{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let data = {
user: {
is_show: true,
name: '<span style="color:red;">张三</span>',
child: ['大毛','二毛','三毛']
}
};
let html = template('user-tpl', data);
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
条件判断
标准语法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
原始语法
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
{{if user.is_show}}
<h2>{{ user.name }}</h2>
{{/if}}
{{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let data = {
user: {
name: '姓名',
is_show: false,
}
};
let html = template('user-tpl', data);
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
循环
标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
原始语法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
{{if user.is_show}}
<h2>{{ user.name }}</h2>
{{each user.child}}
<p>孩子{{$index + 1}}:{{$value}}</p>
{{/each}}
{{/if}}
{{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let data = {
user: {
is_show: true,
name: '张三',
child: ['大毛','二毛','三毛']
}
};
let html = template('user-tpl', data);
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
赋值
标准语法
{{set temp = data.sub.content}}
原始语法
<% var temp = data.sub.content; %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
{{set date = '2019-03-18'}}
<p>日期:{{date}}</p>
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let html = template('user-tpl',{});
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
art-template的更多相关文章
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- art.template 循环里面分组。
后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...
- 利用art.template模仿VUE 一次渲染多个模版
TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...
- 利用art.template模仿VUE
首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- 一分钟上手artTemplate
一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...
- Express使用art-template模板引擎
第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方 ...
- vscode开发中绝对让你惊艳的插件！！！(个人在用)
识别模版引擎 1.Apache Velocity :识别Velocity(vm) 2.Art Template Helper:识别artTemplate 点击路径跳转 1.Laravel goto v ...
- ES6/ES2015的一些特性的简单使
1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...
- artTemplate子模板include
art.Template:https://github.com/aui/art-template 下面来实现利用模版来实现递归调用生成tree <script type="text/h ...
随机推荐
- ubuntu重启+sublime快捷键
sudo reboot Sublime常用快捷键: 掌握基本的代码编辑器的快捷键,能让你打码更有效率,刚开始可能不大记得住,多敲几次就能熟悉并使用它 精华键 : Ctrl+Shift+P:打开命令面板 ...
- 10分钟看懂！基于Zookeeper的分布式锁
实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,其中前两种方案网络上有很多资料可以参考,本文不做展开.我们来看下使用Zookeeper如何实现分布式锁. 什么是 ...
- cms STW 的两个阶段
CMS在初始标记和重复标记阶段会停顿
- javaweb笔记—04（预编译和泛型）
预编译:ps对象1.ps可进行预编译,占位符传值,性能高于sta的(数据库驱动层有优化)2.比较灵活,数据库将预编译的SQL缓存了,第二次访问,就不用预编译,直接执行.3.较为安全,不会发生SQL注入 ...
- java提供的线程池的使用
应用场景,比如你有个业务模块,非常耗时,并且还需要重复调用5次. 如果你写个for循环调用5次,调用一次3秒,那么5次就15秒,不是很友好. 这时,如果你用线程池就方便了,多线程跑,都跑完,收集到结果 ...
- await
单个的task await task 多个await asyncio.wait(tasks)
- 【python017--函数对象1】
一.函数 1.定义函数:def 函数名(): 2.调用函数:直接写函数的名称() >>> def MyFirstFunction(): print('this my firs ...
- smbclient和mount -t cifs共享win的共享文件夹? autocad小记
插入U盘没有反应? 首先,打开设备管理器, 发现usb大容量设备为黄色感叹号 其次, 将这个usb大容量设备先卸载, 然后点击"自动扫描硬件变化",就可以重新自动安装usb的驱动. ...
- （转）renren-fast解读（二）
(二期)9.renren-fast项目解读(二) [课程九]jwt.xmind36.4KB [课程九]动态数据源.xmind0.2MB JWT 概要 JWT是一种用于双方之间传递安全信息的简洁的.UR ...
- Centos 安装R
1 下载R源代码 原码下载地址https://cloud.r-project.org/https://cloud.r-project.org/src/base/R-3/R-3.4.2.tar.gz 2 ...