master

分支 (1)

管理

管理

master

wangdongwei
/
03-模板引擎使用.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1"></div>
    <!-- 导入模板引擎的库文件 -->
    <script src="./js/template-web.js"></script>
    <!-- 导入jQuery -->
    <script src="./js/jquery-1.12.4.min.js"></script>
    <!-- 定义模板结构 -->
    <!-- <script type="text/html" id="tmpl1">
        <h1>msg 的值是 {{msg}}</h1>
    </script>
    <script>
        $(function () {
            const data = {
                msg:'hahaha'
            }

            // 编译模板结构，渲染HTML页面
            // template('要编译的模板结构的id'，要渲染的数据对象)
            const htmlStr = template('tmpl1',data)
            $('#box1').html(htmlStr)
        })
    </script> -->

    <script type="text/html" id="item1">
        <h1>msg的值是{{msg}}</h1>
    </script>
    <script>
        $(function () {
            // 定义数据
            const data = {
                msg:'玛卡巴卡'
            }

            // template('要编译的模板结构ID'，要渲染的数据对象)
           const  boo1 =  template('item1',data)
           $('#box1').html(boo1)
        })

    </script>
</body>
</html>