复习巩固1-art-template.js

简言之，是一个非常方便的插件，性能高，内存小，渲染速度快，代码测试友好。

大概的主要作用：为网页添加一些样式（比直接通过js或者jquery添加来的更好），算是一种极简的渲染静态页面的方法（马化腾还是厉害的）

官网：https://aui.github.io/art-template/zh-cn/

 

html部分：<template id="test"></template>

中间写一些用到art-template.js插件编写的html代码，比如设置p标签、span等（只是里面用了art-template插件里的变量），便于后面直接添加多个内容。id必须写，后面会用。

语法格式为：

{{变量名}}，写在标签里面规定内容。

遍历：            {{each 一个变量数组 as value i}}
            <span>渣渣辉{{value}}号</span>
            {{/each}}

后面会在js中设置变量数组，i是索引，value是数组的值。

判断：

{{if 变量名}}

{{/if}}

 

js部分：载入<script src="template-web.js"></script>在<script></script>声明一个变量data，格式按照json写：

            var data = {
                title: "nmsl",
                t:"虚假的插件",
                list: ['a1', 'b1', 'c1', 'd1', 'e1']
            }

假设我们前面有两个标签里用到了{{title}}以及{{t}}，则这两个地方就会显示，遍历的话变量数组名为list，就会把里面内容显示到{{value}}的位置。

最后通过js或者jq获取变量名，将内容渲染到该部分，content是一个div。

            var html = template('test', data); 变量的两个参数一个是<template>的id，一个是data
            document.getElementById('content').innerHTML = html;或者

            $("#content").html(html);