基于模板引擎Jade的应用(详解)


Posted in Javascript onDecember 12, 2017

有用的符号:

| 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别。(就是|的升级版,实现批量) include 表示引用外部文件

短杠说明后面跟着的字符只是一段代码(与|的区别就是,|后面的内容会被显示,而短杠后面的内容直接不显示了!)

例子:

js:

const jade = require('jade');
console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))

jade:

'|'的应用

基于模板引擎Jade的应用(详解)

'.'的应用

基于模板引擎Jade的应用(详解)

基于模板引擎Jade的应用(详解)

include的应用

基于模板引擎Jade的应用(详解)

调用变量做运算

基于模板引擎Jade的应用(详解)

div的class

基于模板引擎Jade的应用(详解)

'-' 的应用

基于模板引擎Jade的应用(详解)

变量的直接引用

span#{a}和span=a效果是一样的。

jade中的for循环

jade:

-for(var i=0;i<arr.length;i++)
 div=arr[i]

js文件:

console.log(jade.renderFile('./views/11.jade',{pretty:true,name:'singsingasong',
 arr:['aaa','bbb','ccc','ddd']
}));

运行结果:

基于模板引擎Jade的应用(详解)

'!' 的应用

html
 head
 body
 div(class='1')!=content
 div(class='2')

运行结果:

基于模板引擎Jade的应用(详解)

jade的if...else...

html
 head
 body
 -var a=19;
 if(a%2==0)
  div(style={background:'red'}) 偶数
 else
  div(style={background:'green'}) 奇数

基于模板引擎Jade的应用(详解)

case语句

html
 head
 body
 -var a=1;
 case a
  when 0
  div aaa
  when 1
  div bbb
  when 2
  div ccc
  default
  |不靠谱

基于模板引擎Jade的应用(详解)

综合的来一个

小提示:之前的jade文件我们都没有写DOCTYPE,这里给它加上

基于模板引擎Jade的应用(详解)

这个执行结果的是:如果文件读写顺利就输出‘成功',如果出错,就返回‘错误'。

以上这篇基于模板引擎Jade的应用(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript delete 使用示例代码
Mar 29 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
jquery获取transform里的值实现方法
Dec 12 #jQuery
JS排序算法之希尔排序与快速排序实现方法
Dec 12 #Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 #Javascript
详解vue渲染函数render的使用
Dec 12 #Javascript
谈谈vue中mixin的一点理解
Dec 12 #Javascript
Vue集成Iframe页面的方法示例
Dec 12 #Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 #Javascript
You might like
PHP Try-catch 语句使用技巧
2016/02/28 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
中专生求职自荐信范文
2013/12/22 职场文书
优秀老师事迹材料
2014/02/05 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书