vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎
pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签。
它简化了HTML的成对标签的写法,使代码更加简洁、开发效率更高,但是同时它也带来了一些副作用:可移植性差、调试困难、性能并不出色。
第二部分:vue2.0中使用pug(jade)
Step1:安装pug和jade依赖
#安装支持pug依赖
npm install pug pug-loader pug-filters -D
#安装支持jade依赖
npm install jade jade-loader -D
Step2:配置pug和jade
打开webpack.base.conf,在module的rules节点下添加如下配置:
{
test: /\.jade$/,
loader: "jade"
},
{
test: /\.pug$/,
loader: 'pug'
},
这样我们的.vue文件就支持pug的语法了。
Step3:尝试使用pug语法
渲染后,我们可以看到效果:
可以看到,我们可以使用pug来编写我们的html,同时还可以结合vue的语法。
参考文档
https://github.com/pugjs/pug
https://segmentfault.com/a/1190000007556806
https://www.cnblogs.com/xiaohuochai/p/7222227.html
https://zhuanlan.zhihu.com/p/25177324
https://pug.bootcss.com/api/getting-started.html
http://www.jianshu.com/p/36b9be2f3f85
https://segmentfault.com/a/1190000006198621
http://www.jianshu.com/p/05ed25bfc2c5
https://segmentfault.com/a/1190000007556806
http://www.jianshu.com/p/53def6da5dd7
vue2.0中使用pug(jade)的更多相关文章
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- router-view在vue2.0中不显示,解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- vue2.0中,由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
- vue2.0中动画
#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...
随机推荐
- Django--数据库查询操作
MySQL是几乎每一个项目都会使用的一个关系数据库,又因为它是开源免费的,所以很多企业都用它来作为自家后台的数据库. BAT这类大公司除外,它们的业务数据是以亿级别来讨论的,而MySQL的单表6000 ...
- JsonParseException:非法的unquoted字符((CTRL-CHAR,代码9)):必须被转义
其它异常,Could not read document: Illegal unquoted character ((CTRL-CHAR, code 10)): has to be escaped ...
- C#语言————拼接、插入、替换、删除四种方法
StringBuilder sb = new StringBuilder("hello"); sb.Append("world");//拼接 sb.Insert ...
- HDU ACM 3790 最短路径问题
最短路径问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- 第七章 鼠标(CHECKER2)
CHECKER2程序包含一个键盘接口,内容与CHECKER1完全相同.利用←.→.↑.↓四个方向键可以在25个矩形之间移动鼠标指针.Home键把鼠标指针移动到左上角的矩形:End键使鼠标指针落到右下角 ...
- ASP.NET WebForm 检测页面刷新(Refresh)
本文是翻译贴, 原文参见Detecting browser 'Refresh' from Code behind in C# 浏览器的"刷新"常会导致问题, 特别是当页面和数据库有 ...
- python基础 - 字符串作
split(sep=None, maxsplip=-1) 从左到右 sep 指定分隔字符串,缺省情况下空白字符串,指定的字符串会被切掉 maxsplit 指定分隔次数,-1 表示遍历 rsplit(s ...
- golang xorm框架的使用
1.创建engine engine, err := xorm.NewEngine(driverName, dataSourceName) 上述代码创建了一个数据库引擎,可以在一个程序中创建多个engi ...
- mysql删除数据左右空格
select trim(字段) from 表 删除左右空格 select ltrim(字段) from 表 删除左空格 select rtrim(字段) from 表 删除右空格
- magento2.2.5安装
首先肯定要去下载源码,然后配置虚拟主机访问,例:http://magento.cn 这里我们采用命令行安装: php bin/magento setup:install --admin-firstna ...