<!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. HuLu机器学习问题与解答系列(1-8)

    声明:本系列文章转载自微信公众号HULU,本人只是搬运工,仅供学习,如有不妥,后续告知删除. 嗨,欢迎回来,希望你能保持定期回顾的好习惯噢!下面是Hulu机器学习问题与解答系列的前8篇内容,点击主题名 ...

  2. 线程中的读写锁ReadWriteLock

    Lock锁还有两个非常强大的类 ReadWriteLock接口实现类ReentrantReadWriteLock(非常重要的锁) 想实现 读取的时候允许多线程并发访问,写入的时候不允许. 这种效果.. ...

  3. mpvue使用scroll-view实现图片横向滑动

    html代码 <div class="swiper-home"> <scroll-view scroll-x="true" style=&qu ...

  4. 纯CSS3手风琴图片滑动特效

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 制作CSS3制作手风琴图片滑动效果,我们仅 ...

  5. 到网上收集了一个“高大上”的CSS3登入表单和大家分享一下

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...

  6. docker 非root用户修改mount到容器的文件出现“Operation not permitted

    使用环境centos7 x86-64 内核版本4.19.9 docker使用非root用户启动,daemon.json配置文件内容如下: # cat daemon.json { "usern ...

  7. Vue + Element UI 实现权限管理系统 前端篇（八）：管理应用状态

    使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...

  8. WPF中的TextBlock隐藏边框

    TextBlock默认是有边框的,显示效果如下:有一个淡蓝色的边框围绕着 如果需要隐藏这个边框,则只需要在代码中加上以下代码即可: BorderBrush="{x:Null}" B ...

  9. IDEA SQL dialect detection和Duplicated Code检测关闭

    IDEA似乎做的太多,对于Mybatis文件中的SQL语法检查可能就没有太大的必要性,Duplicated Code检测其实非常好,但是我测试使用JDBC代码的时候一堆波浪线让我很不舒服 因此将这两个 ...

  10. 分布式理论(七)—— 一致性协议之 ZAB

    前言 在前面的文章中,我们说了很多一致性协议,比如 Paxos,Raft,2PC,3PC等等,今天我们再讲一种协议,ZAB 协议,该协议应该是所有一致性协议中生产环境中应用最多的了.为什么呢?因为他是 ...