<!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. 使用GitHub Pages + Jekyll 建立博客

    https://pages.github.com/ http://jekyllbootstrap.com/usage/jekyll-quick-start.html Jekyll是一个静态网站生成器, ...

  2. Hadoop（三）搭建Hadoop全分布式集群

    原文地址:http://www.cnblogs.com/zhangyinhua/p/7652686.html 阅读目录(Content) 一.搭建Hadoop全分布式集群前提 1.1.网络 1.2.安 ...

  3. IdentityServer4 Hybrid 模式

    原文参考:Switching to Hybrid Flow and adding API Access back 接上篇:IdentityServer-Protecting an API using ...

  4. JavaScript创建对象的方法汇总

    JavaScript中的对象 ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特性顺序的值.对象的每一个属性或方法都有一个名字 ...

  5. Java判断一个时间是否在时间区间内

    package com.liying.tiger.test; import java.text.ParseException; import java.text.SimpleDateFormat; i ...

  6. 散列算法－MD5

    信息摘要技术把明文内容按某种规则生成一段哈西值,即使明文消息只改动了一点点,生成的结果也会完全不同. MD5(Message-digest algorithm 5)就是信息摘要的一种实现,它可以从任意 ...

  7. 揭开Future的神秘面纱——任务取消

    系列目录: 揭开Future的神秘面纱——任务取消 揭开Future的神秘面纱——任务执行 揭开Future的神秘面纱——结果获取 使用案例 在之前写过的一篇随笔中已经提到了Future的应用场景和特 ...

  8. Spark2.1.0模型设计与基本架构（下）

    阅读提示:读者如果对Spark的背景知识不是很了解的话,建议首先阅读<SPARK2.1.0模型设计与基本架构(上)>一文. Spark模型设计 1. Spark编程模型 正如Hadoop在 ...

  9. ffplay源码分析7-播放控制

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10316225.html ffplay是FFmpeg工程自带的简单播放器,使用FFmpeg ...

  10. stack堆栈容器、queue队列容器和priority_queue优先队列容器（常用的方法对比与总结）

    stack堆栈是一个后进先出的线性表,插入和删除元素都在表的一端进行. stack堆栈的使用方法: 采用push()方法将元素入栈: 采用pop()方法将元素出栈: 采用top()方法访问栈顶元素: ...