07-08-前端模板引擎前端渲染页面渲染真实数据

最新推荐文章于 2023-04-04 18:26:19 发布

ange997

最新推荐文章于 2023-04-04 18:26:19 发布

阅读量252

点赞数

分类专栏： 07-ajax 文章标签： ajax

本文链接：https://blog.csdn.net/ange997/article/details/108041607

版权

07-ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

art-template

艺术美术-模板
art-template 是一个简约、超快的模板引擎。中文官网首页为：
http://aui.github.io/art-template/zh-cn/index.html

art-template的使用步骤

导入 art-template
定义数据
定义模板
调用 template 函数
渲染HTML结构

标准语法：
art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 art-template 中被称为标准语法。

标准语法之输出：

{{value}}
{{obj.key}}
{{obj[‘key’]}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

标准语法之原文输出：

{{@ value }}
如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。

标准语法之条件输出：

如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出。
{{if value}} 按需输出的内容 {{/if}}
{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

标准语法之循环输出：

如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsch arr}} {{$ index}} {{$value}}
{{/each}}

标准语法之过滤器：

在这里插入图片描述
过滤器的本质，就是一个 function 处理函数。
{{value | filterName}}
过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){/return处理的结果/}

注册时间：{{regTime | dateFormat}}

template.defaults.imports.dateFormat = function(date) { var y = date.getFullYear() var m = date.getMonth() + 1 var d = date.getDate() return y + '-' + m + '-' + d // 注意，过滤器最后一定要 return 一个值 }

代码示例

<body>
<h2></h2>
<!--第二步：定义模块-->
<script type="text/html" id="temOne">
    <span>{{name}}</span>
</script>
<!--第一步：导入模板引擎-->
<script src="./public/js/template-web.js" type="text/javascript"></script>
<script>
    // data数据是通过ajax获取到的
    var data = {
        name:"wangcai"
    }
    // 第三步：使用template 把模板和数据绑定
    var htmlStr = template("temOne",data);
    $("h2").html(htmlStr);
</script>
</body>

<body>
    <ul>

    </ul>
    <script type="text/html" id="tmp">
        <li>{{score}}</li>
        <li>{{score*2}}</li>
        <li>{{score>60 ? "good" : "bad"}}</li>
        <li>{{userInfo.name}}</li>
        <li>{{userInfo.age}}</li>
        <li>{{userInfo.hobby[0]}}</li>
    </script>
    <script type="text/javascript">
        var data = { score:90, userInfo:{name:"wc",age:100,hobby:["basketboll","football"]}}
        let htmlstr = template("tmp",data)
        $("ul").html(htmlstr);
    </script>
</body>

<body>
    <ul>

    </ul>
    <script type="text/html" id="tmp">
        <!--  @表示数据中有标签，会解析  -->
        <li>{{@ str }}</li>
    </script>
    <script type="text/javascript">
        var data = {str:"<span>xxx</span>"}
        let htmlstr = template("tmp",data)
        $("ul").html(htmlstr)
    </script>
</body>

<body>
    <ul>

    </ul>
    <script type="text/html" id="tmp">
        {{if flag == 0}}
            flag的值是0
        {{else if flag == 1}}
            flag的值是1
        {{/if}}
    </script>
    <script type="text/javascript">
        var data = { flag:1 }
        let htmlstr = template("tmp",data)
        $("ul").html(htmlstr)
    </script>
</body>

<body>
    <ul>

    </ul>
    <script type="text/html" id="tmp">
        {{each news}}
        <li>
            <h3>{{$value.title}}</h3>
            <p>{{$value.summary}}</p>
        </li>
        {{/each}}
    </script>
    
    <script type="text/javascript">
        var data = { news:[
                {title:"news1",summary:"new1 的 summary"},
                {title:"news2",summary:"new2 的 summary"},
                {title:"news3",summary:"new3 的 summary"},
            ] }
        let htmlstr = template("tmp",data)
        $("ul").html(htmlstr)
    </script>
</body>

ange997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07-08-前端模板引擎前端渲染页面渲染真实数据

art-template艺术美术-模板art-template 是一个简约、超快的模板引擎。中文官网首页为：http://aui.github.io/art-template/zh-cn/index.htmlart-template的使用步骤导入 art-template定义数据定义模板调用 template 函数渲染HTML结构标准语法：art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 ar
复制链接

扫一扫