直接在 html 文件中使用 template

115 阅读 0 评论 76 点赞

我是靠谱客的博主动人仙人掌，最近开发中收集的这篇文章主要介绍直接在 html 文件中使用 template，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Github demo 地址

Github-Demo

安装 template

$ npm install art-template --save

使用

<!DOCTYPE html>
<html lang="zh-cn">
<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>html渲染</title>
</head>
<body>
  	<!-- 渲染容器 -->
    <div id="cont"></div>
</body>
</html>


<!-- 引入 art-template-->
<script type="text/javascript" src="./node_modules/art-template/lib/template-web.js"></script>

<!-- 定义渲染模板 -->
<script type="text/template" id="tpl">
    <p>我的名字叫 {{ name }} </p>
</script>


<!-- 渲染逻辑 -->
<script>
    var htmlStr = template("tpl",{
        name:'名字',
    })
    console.log(htmlStr);

    document.getElementById('cont').innerHTML = htmlStr;

</script>