<!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. oracle RAC srvctl命令关闭节点实例的时候 不能正常执行

    场景描述: [oracle@oracle01 admin]$ srvctl stop database -d oradb1 PRCD- : The resource for database ORAD ...

  2. MATLAB下数组随机打乱顺序的方法

    一:问题 有两个规模相同的数组,两个数组相同位置的元素一一对应,现在要将两数组的元素同时打乱顺序,并且乱序后的两数组对应位置元素要保持乱序前的对应关系. 二:方法  采用randperm()函数,产生 ...

  3. Deep Learning (中文版&英文版)

    Bengio Yoshua,Ian J. Goodfellow 和 Aaron Courville共同撰写的<深度学习>(Deep Learning)是一本为了帮助学生及从业者入门机器学习 ...

  4. JVM中OutOFMemory和StackOverflowError异常代码

    1.Out of Memory 异常 右键Run As --->Run Configuration 设置JVM参数 -Xms20m -Xmx20m 上代码: /** * VM Args:-Xms ...

  5. IIS：IIS 8.5下设置404错误页

    IIS版本:IIS 8.5 问题描述 搭建一个测试网站,总共就2个页面(index.php和404.php),默认首页为:index.php 当访问index.php和404.php的时候,IIS服务 ...

  6. linux解压zip乱码解决方案

    1.向系统添加windows下的字符编码: sudo vim  /var/lib/locales/supported.d/local 添加一下编码: zh_CN.GBK GBK zh_CN.GB231 ...

  7. zmq 自动绑定socket

    def auto_bind(socket): """ auto bind zmq socket :param socket: socket instance :retur ...

  8. docker（二）部署docker容器虚拟化平台

    yum安装方法参考:https://www.cnblogs.com/yufeng218/p/8370670.html https://www.cnblogs.com/straycats/p/84112 ...

  9. 解决使用vue-cli生成项目后项目地址自动添加#号的问题

    vue-router官网https://router.vuejs.org/zh/guide/ vue的路由在默认的hash模式下,url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所 ...

  10. shell命令——if

    if中[ ]实际上调用的是test的一种快捷方法.bash的数值和字符串比较运算符: 注意=两边的空格 字符串 数值 为真,如果 x = y x -eq y   x != y x -ne y   x ...