一个前端攻城狮的全栈之路第四弹:jade模板引擎的简单介绍和使用
2017-07-15 12:31
941 查看
1、类似于java的jsp模板引擎一样,nodejs的模板引擎jade也是爽歪歪,下面就简单说明一下本文大致介绍的jade内容
(1)拆分可复用的模块,以及怎么在其余模块里引入复用对的模块,这里的模板又分为两类:
(a). head中的link和script标签,通过include嵌套引用
(b). html的头部声明,就是doctype html定义的部分,通过extends继承引用
(2)定义块级元素:“block content"
(3) 怎么在标签中绑定变量
(4) 怎么在标签中定义class、href等常用属性
(5)怎么循环列表
(6)怎么调用封装的公用方法处理标签上绑定的变量,类似于vue中的过滤器
(7) 怎么在模块中引入当前模块的js等
(8)怎么使用if/else判断
2、按照上述顺序,就一一列举些小例子
(1)拆分可复用的模块
(a) 如果项目比较大,并且分的比较细,可以将header中的link标签再单独拆分出来,在header.jade中引用,如下图
(b)header定义html头部和引入link.jade,(注:这里的引用要用:include嵌套)
(c)在其它模板中引入公用的header.jade(注:这里的引用要用:extends继承)
(2)定义块级元素:“block content"
如果想直接定义一个div,可这样书写(注:相当于div可省略不写)
如果想指定为其他块级标签,在前面声明即可,例如声明为form
(3)怎么在标签中绑定变量,这里分为两种情况:
(a) 标签的内容是变量
(b)标签的属性是变量
(4)怎么在标签中定义class、href等常用属性
直接定义在标签后的括号中,用“”逗号+空格“”隔开(逗号非必须,建议加上)
(5)怎么循环列表
用each..in方法循环
(6)怎么调用封装的公用方法处理标签上绑定的变量,类似于vue中的过滤器
例如方法format已经封装在app.js中
(7)怎么在模块中引入当前模块的js等
如果当前模块需要引入它自己的js,这里引入的位置需要注意,应该在当前模块最外层div标签闭后引入
(8)怎么使用if/else判断
(9)会学以上的方法,小的demo应该是没问题了,另一些高阶的用法mixins等大家可参考官网来学习!!!
(1)拆分可复用的模块,以及怎么在其余模块里引入复用对的模块,这里的模板又分为两类:
(a). head中的link和script标签,通过include嵌套引用
(b). html的头部声明,就是doctype html定义的部分,通过extends继承引用
(2)定义块级元素:“block content"
(3) 怎么在标签中绑定变量
(4) 怎么在标签中定义class、href等常用属性
(5)怎么循环列表
(6)怎么调用封装的公用方法处理标签上绑定的变量,类似于vue中的过滤器
(7) 怎么在模块中引入当前模块的js等
(8)怎么使用if/else判断
2、按照上述顺序,就一一列举些小例子
(1)拆分可复用的模块
(a) 如果项目比较大,并且分的比较细,可以将header中的link标签再单独拆分出来,在header.jade中引用,如下图
(b)header定义html头部和引入link.jade,(注:这里的引用要用:include嵌套)
(c)在其它模板中引入公用的header.jade(注:这里的引用要用:extends继承)
(2)定义块级元素:“block content"
如果想直接定义一个div,可这样书写(注:相当于div可省略不写)
如果想指定为其他块级标签,在前面声明即可,例如声明为form
(3)怎么在标签中绑定变量,这里分为两种情况:
(a) 标签的内容是变量
(b)标签的属性是变量
(4)怎么在标签中定义class、href等常用属性
直接定义在标签后的括号中,用“”逗号+空格“”隔开(逗号非必须,建议加上)
(5)怎么循环列表
用each..in方法循环
(6)怎么调用封装的公用方法处理标签上绑定的变量,类似于vue中的过滤器
例如方法format已经封装在app.js中
(7)怎么在模块中引入当前模块的js等
如果当前模块需要引入它自己的js,这里引入的位置需要注意,应该在当前模块最外层div标签闭后引入
(8)怎么使用if/else判断
(9)会学以上的方法,小的demo应该是没问题了,另一些高阶的用法mixins等大家可参考官网来学习!!!
相关文章推荐
- artTemplate模板引擎简单介绍使用
- 教你使用javascript简单写一个页面模板引擎
- 一个前端攻城狮的全栈之路第五弹:mongoose简单使用(实现对mongodb的增、删、改、查)
- 教你使用javascript简单写一个页面模板引擎
- JS模板引擎Ejs的简单使用介绍
- artTemplate模板引擎简单介绍使用
- 一个简单的类模板的使用
- .net c# 一个简单但是功能强大动态模板引擎(一)
- 一个前端html模板处理引擎(javascript) - pure
- sdcms的模板解析引擎,一个非常简单和实用的CMS
- 【转载】Velocity模板引擎的介绍和基本的模板语言语法使用
- 一个超级简单的HTML模板框架源代码以及使用示例
- 新手开发asp.net模板引擎(1): 一个简单的模板
- 转载一个简单的lua展示【COCOS2DX-LUA 脚本开发之一】LUA语言基础在Cocos2dX游戏中使用Lua脚本进行游戏开发(基础篇)并介绍脚本在游戏中详细用途!
- 数据库连接及简单模型的创建使用(模板引擎切换)
- 一个简单的javascript前端模版引擎
- 模板的简单介绍与使用
- SQL Server 桌面引擎”(也叫 MSDE 2000)使用方法的简单介绍。
- 新手开发asp.net模板引擎(1): 一个简单的模板
- 模板的简单介绍与使用