EJS在html中的基本使用方法

EJS的基本概念


注:
ejs的下载命令:npm install ejs –save 在当前目录下进行下载
ejs:类似一个html文件,但是不能在当前页面直接通过浏览器打开页面,必须通过服务器来打开


1、输出:

在页面中输出变量值,你可以这么用: <div><%= var01 %></div>
如果不希望变量值的内容被转义,那就这么用:<div><%- var02 %></div>

2、模块的逻辑支持

所有使用 <% %> 括起来的内容都会被编译成 Javascript,你可以在模版文件中像写  js 一样 Coding,也允许你声明变量,作用域就是当前模版,因为一个模版会被编译  成一个 Javascript 函数。
<% var name = "littledu" %>
    <div>
    Hello, My Name is <%-name %>
  </div>

3、循环

就像写 Javascript 一样
<ul>
    <% for(var i = 0; i < 10; i++) {%>
      <li>我是列表 <%-i %></li>
    <% } %>
<ul>

4、Includes的用法

Include 可以引用相对路径的模版文件,例如有 html/index.html 和     html/_block/head.html这两个文件,
你就可以在 index.html 这么用 <% include _block/head.html %>。
<ul>
    <% users.forEach(function(user){ %>
    <% include user/show %>
    <% }) %>
</ul>

5、TmT EJS Helper

在 EJS 之外,提供了一些额外的模版函数来简化我们的一些工作。
GIT:https://github.com/willerce/tmt-ejs-helper

css()方法:快速的引用 CSS 文件,并附上注释线上 CSS 绝对路径,便于下游前端使用。
<head>
    <title>页面标题</title>
    <%- css("style-workflow.css") %>
</head>
//编译后:----------------------------
<head>
    <title>页面标题</title>
        <link rel="stylesheet" href="../../dev/css/style-workflow.css"/>
        <!--<link rel="stylesheet" href="http://wximg.gtimg.com/tmt/workflow/dist/css/style-workflow.css"/>-->
</head>

6 、js()

功能与 css() 一致
img() 占位图    :占位图,可以指定高、宽,以及 className
<%- img(200, 400, 'block__img') %>
//编译后:---------------------------
    <img src="http://temp.im/200x400" class="block__img"/>

7、text() 占位文本

生成指定长度的占位图,第二个参数为偏移字数

实例:----------------------------------下面这个函数,生成的文本长度可能为 7 ~ 13 位。
<span><%- text(10, 3) %></span>
//编译后:------------------------
<span>一二三四五六七八九</span>

以上是本人在学习实践过程中的留下的痕迹

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值