12.浏览器中的模板引擎_浏览器模板引擎-CSDN博客

本文链接：https://blog.csdn.net/ly_jewel/article/details/100897999

art-template : 不仅可以在浏览器使用，也可以在node中使用。

服务端渲染，就是在服务端使用模板引擎

可以通过npm下载---GitHub上有art-template链接

http://aui.github.io/art-template

Windows+R---cmd---打开code所在目录（好像是，文件存储地址--- 输入 npm install art-template ---该命令在哪执行，就会把包下到哪里。默认会下载到 node_modules 目录中。不可更改。

（01）

node_modules --- art-template --- lib --- template-web.js（给浏览器用的）

在code文件夹下建新文件HTML

<body>
    <script  src = "node_modules/art-template/lib/template-web.js"> </script>  //在浏览器中需要引用文件
    <script type="text/template" id="tp1">
        大家好，我叫： {{ name}}
        我今年 {{ age }} 岁了
        我来自 {{ province }}
        我喜欢：{{ each hobbies }} {{ $value }} {{/each}}
     </script>
    <script>
        var ret = template('tp1' , {
              name : 'jack' ,
              age : 18 ,
              province : '北京市' ,
              hobbies:[
                  '写代码' ,
                  '打游戏' ,
                  '唱歌跳舞' 
               ]
         })
            console.log(ret)
    </script>
</body>

    // 模板引擎不关心字符串内容，只关心自己认识的模板标记语法。例如 {{ }} ---mustache 语法，八字胡。

（02）

 <script  src = "node_modules/art-template/lib/template-web.js"> </script> 
 <script type="text/template" id="tp1">
<html>
<body>
           大家好，我叫： {{ name}}
        我今年 {{ age }} 岁了
        我来自 {{ province }}
        我喜欢：{{ each hobbies }} {{ $value }} {{/each}}
       </body>
</html>
</script>
  <script>
        var ret = template('tp1' , {
              name : 'jack' ,
              age : 18 ,
              province : '北京市' ,
              hobbies:[
                  '写代码' ,
                  '打游戏' ,
                  '唱歌跳舞' 
               ]
         })
            console.log(ret)
    </script>

// 显示结果是 
<html>
<body>
           大家好，我叫：jack
        我今年 18岁了
        我来自 北京市
        我喜欢：写代码  打游戏  唱歌跳舞
     </script>
  </body>
</html>

// 因为模板引擎不关心内容，只关心他认识的语法标记