<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script src="jquery.min.js"></script>

     <script src="art-template.js"></script>

 </head>

 <body>

 <!--页面内容区-->

 <div id="content"></div>

 <!--处理区-->

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

     <h1>{{title}}</h1>

     <ul>

         {{each list as value i}}

         <li>索引 {{i + 1}} ：{{value}}</li>

         {{/each}}

     </ul>

 </script>

 <script>

     var data = {

         title: '基本例子',

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

     };

     var html = template('test', data);//渲染到处理区

     document.getElementById('content').innerHTML = html;//渲染到页面内容区

 </script>

 </body>

 </html>

　　　　结果如下：

　　　　

　　

art-template.js下载地址：https://raw.githubusercontent.com/aui/art-template/master/lib/template-web.js
官网文档：https://aui.github.io/art-template/zh-cn/docs/installation.html

art-template模板应用的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. angularjs指令系统系列课程（2）：优先级priority,模板template,模板页templateUrl

    今天我们先对 priority,template,templateUrl进行学习 1.priority 可取值:int 作用:优先级 一般priority默认为0,数值越大,优先级越高.当一个dom元 ...

  3. ArcGIS API for Silverlight代码中使用Template模板

    原文:ArcGIS API for Silverlight代码中使用Template模板 在项目开发中,会遇到点选中聚焦闪烁效果,但是因为在使用Symbol的时候,会设置一定的OffSetX和OffS ...

  4. Git commit template 模板设定

    多人协作开发一个项目时,版本控制工具是少不了的,git是linux 内核开发时引入的一个优秀代码管理工具,利用它能很好使团队协作完成一个项目.为了规范团队的代码提交,也方便出版本时的release n ...

  5. 一个简单地template模板

    之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地t ...

  6. 小程序开发--template模板

    小程序的template模板可以说是我遇到的最简单的了,看看实例: <template name="article"> <view class='containe ...

  7. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

  8. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  9. 微信小程序新闻列表功能（读取文件、template模板使用）

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  10. spring框架学习（六）AOP事务及spring管理事务方式之Template模板

    概念 1.事务 1)事务特性:ACID 原子性 :强调事务的不可分割. 一致性 :事务的执行的前后数据的完整性保持一致. 隔离性 :一个事务执行的过程中,不应该受到其他事务的干扰. 持久性 :事务一旦 ...

随机推荐

  1. opencv2函数学习之blur，GaussianBlur，medianBlur和bilateralFilter：实现图像平滑处理

    在opencv2中,可能使用blur对图像进行平滑处理,这种方法就是最简单的求平均数. 平滑 也称 模糊, 是一项简单且使用频率很高的图像处理方法. 平滑处理的用途有很多, 但是在很多地方我们仅仅关注 ...

  2. Linux 部署 ASP.NET Core 的一些问题记录

    异常错误: 关闭 IP6 #修改 vi /etc/sysctl.conf # 添加如下三条设置    net.ipv6.conf.all.disable_ipv6 = 1    net.ipv6.co ...

  3. Android get current Locale, not default

    he default Locale is constructed statically at runtime for your application process from the system ...

  4. JavaScript -- TextArea

    -----054-TextArea.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  5. java遍历http请求request的所有参数实现方法

    方法一: 通过程序遍历http请求的所有参数放到hashmap中,用的时候方便了. 如果参数值有中文,那么需要在程序中添加filter转码,或者在下面程序里,对paramValue转码 Map map ...

  6. com.alibaba.fastjson.JSON对类对象的序列化与反序列化

    1. 目标 把类的对象存储到字符串可存储 2. 类定义 public interface JsonInterface { } mport com.alibaba.fastjson.JSON; impo ...

  7. 网络安全事件频发，全站HTTPS势在必行

    报告显示,2015年互联网应急中心发现网络安全事件超过12万起,同比增长125.9%.消息一出震惊国人. 网络安全事件频发,全站HTTPS势在必行 正如习主席所讲:“互联网给人们的生产生活带来巨大变化 ...

  8. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  9. C# 利用反射将枚举绑定到下拉框

    前言:反射(Reflection)是.NET提供给开发者的一个强大工具,尽管作为.NET框架的使用者,很多时候不会用到反射.但在一些情况下,尤其是在开发一些基础框架或公共类库时,使用反射会使系统架构更 ...

  10. c#里面如何激活一个外部程序进程并显示在最前

    using System.Diagnostics; using System.Runtime.InteropServices; [DllImport("user32.dll")] ...