复习巩固1-art-template.js

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

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

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

 

html部分:

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

语法格式为:

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

遍历:            {{each 一个变量数组 as value i}}
            渣渣辉{{value}}号
            {{/each}}

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

判断:

{{if 变量名}}

{{/if}}

 

js部分:载入声明一个变量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); 变量的两个参数一个是