基于模板引擎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 相关文章推荐
一个基于jquery的文本框记数器
Sep 19 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP重定向的3种方式
2013/03/07 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python3并发写文件与Python对比
2019/11/20 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
拉歌口号大全
2014/06/13 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS