<!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. 单点登录--CAS认证--web.xml配置详解

    参考网址: https://blog.csdn.net/zhurhyme/article/details/29349543 https://blog.csdn.net/shzy1988/article ...

  2. 关于Python数据分析与机器学习的一些资源

    https://github.com/search?l=Python&o=desc&q=python&s=stars&type=Repositories&utf ...

  3. Sharding-jdbc（一）分库分表理解

    1.什么是分库分表 所谓的分库分表就是数据的分片(Sharding). 2.为什么需要分库分表 因为随着公司的业务越来越大,对于现成单机单个应用瓶颈问题,对数据持久化硬盘如何进行扩容. 可以从4个方面 ...

  4. 使用ffmpeg实现对h264视频解码 -- （实现了一个易于使用的c++封装库）

    H264是当今流行的视频压缩格式:ffmpeg是一个开源库,实现了对h264视频文件的解压缩. 为了降低使用ffmpeg的复杂性,尽量隐藏实现细节,我写了一个封装库.c#也可以很方便的使用此库.解压后 ...

  5. Visual Studio最好用的快捷键（你最喜欢哪个）

    每次在网上搜关于VS有哪些常用快捷键的时候,出来的永远是一串长的不能再长的列表,完全没体现出“常用”二字,每次看完前面几个就看不下去了,相信大家都 有这种感觉.其实我们平时用的真的只有很少的一部分,借 ...

  6. spring boot 自动更新静态文件和后台代码 -- 热部署

    在spring boot使用的过程中, 发现我修改了静态文件, 前台刷新后, 没有任何变化, 必须重新启动, 才能看到, 这简直不能让人接受. 那有什么方法来解决这个问题呢. Baidu之后, 得到了 ...

  7. linux----之tcpdump小用

    1.通过抓包大致确定访问量 #time tcpdump -nn -i eth0 'tcp[tcpflags] = tcp-syn' -c 10000 >/dev/null 根据real时间判断访 ...

  8. React Native从入门到放弃之环境搭建

    官网 https://facebook.github.io/react-native/ 中文网站 http://reactnative.cn/ 相关文档 http://www.lcode.org/史上 ...

  9. .2-浅析express源码之applicaiton模块(1)-咸鱼方法

    上一节讲了express的入口文件,当执行主函数,会调用app.init方法,这个方法就来源于application模块. 这个模块有很多方法,目前仅仅过一下初始化方法: app.init = fun ...

  10. 常用正则表达式:手机、电话、邮箱、身份证、IP地址、网址、日期等

    转载源:http://blog.csdn.net/lun379292733/article/details/8169807 <script type="text/JavaScript& ...