模板引擎art-template的使用

原创

冷月心_bytedance 2021-07-17 14:07:14 ©著作权

文章标签 Node.js从入门到放弃模板引擎 art-template 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者冷月心_bytedance的原创作品，请联系作者获取转载授权，否则将追究法律责任

模板引擎art-template的使用

- 效果图
- 代码
- 补充

模板引擎art-template的使用_art-template

效果图

模板引擎art-template的使用_模板引擎_02

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>art-template的使用</title>
</head>

<body>
<script  src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="./template-web.js"></script>
  <script>
  //这个script就是拿来写注释的，没什么卵用 
  //引入模板引擎，其实直接cnd找也可以，装了node的话，npm或者cnpm镜像也行
  //模板字符串，关于type，这里可以自定义，只要不是JavaScript就不会被浏览器解析
  //{{}}是模板语法，没有为什么，用就是了
   //注意id属性，这个是重点，下边要用的
  </script>
  <script type="text/html" id="template">
 
  
    <div>
        <ul>
          <li>{{name}}</li>
          <li>{{age}}</li>
          <li>{{hobby}}</li>
          <li>{{sex}}</li>
        </ul>
      </div>
    </script>

    <script>
    //数据字典，填充上边的数据，保证属性名相同，对象形式
        var data={
          name:"Tom",
          age:"18",
          hobby:"软件开发",
          sex:"男"
        }

        var result=template('template',data);//模板语法，没有为什么

        $('body').append(result);//将数据填充到界面
    
    </script>

    
</body>

</html>