模板引擎art-template的使用

模板引擎art-template的使用

    • 效果图
    • 代码
    • 补充


  • 微信扫码关注公众号 :前端前端大前端,追求更精致的阅读体验 ,一起来学习啊
  • 关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程
    在这里插入图片描述

效果图

模板引擎art-template的使用_第1张图片

代码


<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>

补充

  • 我是直接下载到本地了,实际应用需要自己找一下模板引擎资源
  • 模板引擎前后台都可以用,配合ajax爽的一比,玩瀑布流的时候模板引擎特别快
  • 主流的模板引擎很多,在这里介绍两个我常用的,下一篇介绍underscore
  • 玩node.js的朋友,express框架也可以配合art-template使用,确切的说是express-art-template,后者依赖前者

你可能感兴趣的:(模板引擎)