模板引擎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 = ...
随机推荐
- unittest报告出现dict() -> new empty dictionary错误解决办法
unittest报告出现dict() -> new empty dictionary错误解决办法 说一下原因,这是由于unittest中采用了ddt驱动. 由于版本问题导致 问题如图: 解决办 ...
- Unity shader之ColorMask
Color Mask解释,见unity文档: ColorMask ColorMask RGB | A | 0 | any combination of R, G, B, A Set color cha ...
- oracle - 查询某些表是空白,需要提升权限后,才可查询出数据
begin fnd_global.apps_initialize(user_id => 1150 ,resp_id => 50738 ,resp_appl_id => 660 ); ...
- 使用 dom4j 处理 xml (1)
解决问题需要,自己简单学习了一下dom4j 的基本用法: (1)读取 xml 文件: (2)修改 xml 文件. 需要的 jar 包: dom4j-xxx.jar (可以在 https://dom4j ...
- Jenkins连接Window服务器,上传jar并启动
https://blog.csdn.net/achenyuan/article/details/81181347
- sql sugar
事务 using (var db = new SqlSugarClient(new ConnectionConfig() { ConnectionString = Config.xxx, DbType ...
- c++常用
常用函数,方便查找,不定时更新. 1. 生成随机数 #include <iostream> #include <stdlib.h> #include <time.h> ...
- Python 官方文档&教程
英文原版(3.6版): https://docs.python.org/3.6/index.html https://docs.python.org/3.6/tutorial/index.html 汉 ...
- 高校表白APP-冲刺第二天
今天进行了第二次会议. 一.任务: 昨日任务完成基本登录注册修改页面布局. 今日任务完成登录界面的基本框架. 明日任务登录修改注册跳转,解决真机运行闪退. 二.遇到的困难: 登录界面按钮布局位置,输入 ...
- (简单)华为M3揽月 BTV-W09的Usb调试模式在哪里开启的经验
每次我们使用pc链上安卓手机的时候,如果手机没有开启Usb调试模式,pc则没办法成功识别我们的手机,有时候,我们使用的一些功能较好的app如以前我们使用的一个app引号精灵,老版本就需要开启Usb调试 ...