2020-04-01

JS中模板引擎的用法

1.art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。

2.右键下载至本地


3.在本地引入<script src="./art.js/template-web.js">(注意自己的路径不要引错)

4.引入<script type="text/html" id="aaa">(注意这里的id要写的)

5. <script type="text/javascript">

告诉模板引擎将数据与哪个模板引擎拼接

let html= template('aaa',{username:"张三",age:"18"})

        // console.log(html)

       document.getElementById('container').innerHTML=html



5 <div id="container">

        </div>

        <script src="./art.js/template-web.js">

        </script>

        <script type="text/html" id="aaa">

            <h1>{{username}}+{{age}}</h1>

        </script>

        <script type="text/javascript">

       let html= template('aaa',{username:"张三",age:"18"})

        // console.log(html)

       document.getElementById('container').innerHTML=html

        </script>(这是一个具体的小例子)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、 语法 .innerHTML =? :写入到页面; document.getElementById(“...
    执着_7fb1阅读 656评论 0 0
  • Vue组件之父子通信(1) 子组件获取父组件数据 子组件获取父组件数据是通过props进行获取的。props分为静...
    program_white阅读 767评论 0 0
  • XML:可扩展标记语言 主要用于保存和传输数据第一行:XML声明,包括版本号与字符集有且仅有一个根节点标签书写规则...
    ssss2阅读 906评论 0 0
  • 2.1、方法的重载:overload 概念:一个类中的,一个功能方法的多种体现形式(有不同的方法体)。 举例: ...
    机会留给有准备的人阅读 1,527评论 0 0
  • 1,知识点汇总 1,1 xml文件定义1,2 xml文件和properties有什么区别1,3 xml文件如何读取...
    RX_AI阅读 715评论 0 0