模板引擎ejs入门学习
1:利用 NPM 安装 EJS 很简单
npm install ejs
2:安装完成肯定就是使用了
var template = ejs.compile(str, options);
template(data);
// => 输出绘制后的 HTML 字符串 ejs.render(str, data, options);
// => 输出绘制后的 HTML 字符串 ejs.renderFile(filename, data, options, function(err, str){
// str => 输出绘制后的 HTML 字符串
});
3:当然如何引用参数进行数据绑定呢?
参数:
<% '脚本' 标签,用于流程控制,无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板(输出是转义 HTML 标签)
<%- 输出非转义的数据到模板
<%# 注释标签,不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除 参数解释:
cache 缓存编译后的函数,需要提供 filename
filename 被 cache 参数用做键值,同时也用于 include 语句
context 函数执行时的上下文环境
compileDebug 当为 false 时不编译调试语句
client 返回独立的编译后的函数
delimiter 放在角括号中的字符,用于标记标签的开与闭
debug 将生成的函数体输出
_with 是否使用 with() {} 结构。如果为 false,所有局部数据将存储在 locals 对象上。
localsName 如果不使用 with ,localsName 将作为存储局部变量的对象的名称。默认名称是 locals
rmWhitespace 删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
escape 为 <%= 结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)
4:循环
//模板定义.ejs
<ul>
<% for(var i in users){ %>
<li><%= users[i].username %>--<%= users[i].age %></li>
<% } %>
</ul> //运行后生产html代码.html
<ul> <li> Jack </li> <li> Rose </li> <li> Alice </li> <li> Ave </li> </ul>
5:变量定义标签的样式属性
<h1 style="<%= style %>"></h1>
6:if判断语句
//模板定义将所有条件判断代码放<% %>里面即可
<% if(isLogin){ %>
<p><a href="#">Jerry</a> | <a href="#">退出</a></p>
<% }else{ %>
<p><a href="#">登录</a> | <a href="#">注册</a></p>
<% } %>
7:利用<%- include filename %>加载其他页面模版;
学习ejs的入门基础就到这里,后面我们还会有使用ejs+nodejs进行代码模板生成,谢谢大家阅读,希望能够帮助到大家。
模板引擎ejs入门学习的更多相关文章
- 后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...
- 模板引擎之jade 学习
jade 模板引擎在node express 开发中有较多的使用,首先我们看一个简单的使用jade 生成的html 页面的标签代码: doctype html html(lang="en&q ...
- Java模板引擎之Freemarker 学习笔记 一
什么是Freemarker Freemarker是模板引擎,不是Web框架,只是视图层的组件,官网是 https://freemarker.apache.org/ Freemarker原理 数据模型+ ...
- nodeJs学习-10 模板引擎 ejs语法案例
ejs语法案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- EJS 入门学习
EJS(Embedded JavaScript templates)是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本.可以说EJS是一个JavaScript库,EJS可以同时运行在客 ...
- javascript模板引擎之artTemplate 学习笔记
<div id="content"></div><div id="content1"></div><h1& ...
- 模板引擎ejs详解
singsingasong.js: const ejs=require('ejs'); ejs.renderFile('./views/singsingasong.ejs', {'name':'sin ...
- nodejs 模板引擎ejs的使用
1.test.ejs文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 模板引擎ejs
1.网站 https://ejs.co/ https://ejs.bootcss.com/ 2.app.js var http=require("http"); var ejs = ...
随机推荐
- 20175211 2018-2019-2 《Java程序设计》第六周学习总结
目录 教材学习内容总结 第七章 内部类与异常类 第十章 输入.输出流 教材学习中的问题和解决过程 代码托管 学习进度条 参考资料 教材学习内容总结 第七章 内部类与异常类 第十章 输入.输出流 教材学 ...
- stm32定时器输出移相PWM(非主从模式)
背景:由于项目需要,需要stm32输出任意相角度的PWM 前提知识: 1.stm32定时器的Tim,一般有多个OC.具体差别根据型号来定. 2.定时器的使能,理论上是多个通道同时使能 3.TIM_OC ...
- 使用Apache JMeter对SQL Server、Mysql、Oracle压力测试(二)
接着第一篇的写: 第三步,测试SQL Server数据库的性能: a.加载JDBC SQL Server驱动.添加线程组和设置线程属性和第二步一样,就不再赘述了: b.设置JDBC Connectio ...
- 小程序开发-Now you can provide attr "wx:key" for a "wx:for" to improve performance
Now you can provide attr "wx:key" for a "wx:for" to improve performance 是一个关于性能优 ...
- Vue学习2:模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- springmvc整合swagger
前言 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集 ...
- vmware-tools安装——实用
1.vmware中点击安装或重新安装vmware-tools 2.在root终端解压并移动安装文件:tar -xvf VMwareTools-9.9.0-2304977.tar.gz -C /tmp ...
- OLTP和OLAP的区别
OLTP和OLAP的区别 联机事务处理OLTP(on-line transaction processing) 主要是执行基本日常的事务处理,比如数据库记录的增删查改.比如在银行的一笔交易记录,就是一 ...
- js 实现json数组集合去重,差集,并集,交集。
let list = [ { id: "1", content: "A" }, { id: "2", content: "B&qu ...
- git+webpack项目初始化<一>
目录结构 src + page view image service util git初始化 linux常用命令 rm -rf mmall-fe/ 删除 mkdir mmall-fe 创建文件夹 ls ...