一、一句话介绍

artTemplate是新一代的高性能JavaScript模板引擎二、插件官网三、插件下载四、简单使用(浏览器版)

1. 引入template-web.js

2. 定义数据结果渲染区

3. 定义数据模板

使用一个type="text/html"的script标签定义数据存放模板

索引 {{i + 1}} ：{{value}}

4. 渲染数据

var data = {

title: '标签',

list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html = template('data-tpl', data);

document.getElementById('content').innerHTML = html;五、artTemplate基础语法(浏览器版)

1. 变量输出

{{value}} -- 输出单个变量

{{data.key}} -- 输出对象中的某个属性

{{data['key']}} -- 输出数组中的某个属性

{{a ? b : c}} -- 三目运算

{{a || b}} -- 为某个变量设置默认值b

{{a + b}} -- 表达式运算

{{@ value }} -- 原样输出(变量前加@符号)

2. 条件判断

{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

3. 循环遍历

形式一(默认key和value)

形式二(自定义key和value)

{{each target val key}}...{{/each}}

4. 引入子模板

-- 子模板的默认变量为data

-- 向子模板传递自定义变量

注意：默认情况下，子模板中的数据变量名为data。标准语法不支持对象和数组的声明，只支持引用变量。但是，原始语法没有此限制。

5. 自定义过滤器

第一步：注册过滤器

template.defaults.imports.dateFormat = function(value, format) {...};

template.defaults.imports.timestamp = function(value) {...};

注意：过滤器至少需要一个参数，且第一个参数表示原始变量值，过滤器最后必须要return一个返回值。

第二步：使用过滤器

{{value | 过滤器名称}} -- 只有一个参数的过滤器调用方式

{{value | 过滤器名称参数}} -- 有一个以上参数的过滤器调用方式

text html artemplete,artTemplate前端模板引擎使用说明相关推荐

art-template前端模板引擎
目录内容介绍一.使用方法二.主要API 1.原文输出 2.逻辑判断 3.循环语句三.代码四.页面显示五.其他 1.pre标签 2.code标签内容介绍今天我们要了解的是一款高性能的 ...
前端模板引擎 artTemplate的使用与进阶
前端模板引擎 artTemplate的使用与进阶查看全文 http://www.taodudu.cc/news/show-3760040.html 相关文章: springboot 整合 free ...
java 前端模板_前端模板引擎入门
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
前端模板引擎——handlebars
目录一.代码二.页面显示一.代码 <!DOCTYPE html> <html lang="en"><head><meta chars ...
swig模板 PHP,nodejs前端模板引擎swig入门
相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是他没有一个html该有的样子... 所以我还是决定使用swig,页面结构,样子都是熟悉的样子, ...
swig模板 PHP,如何使用nodejs前端模板引擎swig
这次给大家带来如何使用nodejs前端模板引擎swig,使用nodejs前端模板引擎swig的注意事项有哪些,下面就是实战案例,一起来看一下. 相对于jade,我还是更喜欢swig前端模板引擎,jad ...
必须掌握的前端模板引擎之art-template
常用的模板引擎有tpl.js.baiduTemplate.doT.js.art-template等等: 我所理解的模板引擎就是把js数据传到html中展示出来: art-template 是一个简约. ...
前端模板引擎 artTemplate
artTemplate是新一代 javascript 模板引擎特性:性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试) 支持运行时调试,可精确定位异常模板所在语句( ...

text html artemplete,artTemplate前端模板引擎使用说明

{{title}}

text html artemplete,artTemplate前端模板引擎使用说明相关推荐

最新文章

热门文章