简介

Pug 模板引擎中文文档
pug 大大简化了 html 的格式，并且在pug模板里面可以使用js代码
一下我只列出来了我使用的一些属性，具体的语法还是去官方看

1. 属性

标签属性和 HTML 语法非常相似，但它们的值就是普通的 JavaScript 表达式。您可以用逗号作为属性分隔符，不过不加逗号也是允许的。

a(href='baidu.com') 百度// 单行属性
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')// 多行属性
input(type='checkbox'name='agreement'checked
)
// 用引号括起来的属性
div(class='div-class' '(click)'='play()')// 模板字符串
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)// 不转义的属性
div(escaped="<code>")
div(unescaped!="<code>")

2. 嵌入

- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>转义!</span>";h1= title
p #{author} 笔下源于真情的创作。
p 这是安全的：#{theGreat}// 转义 如果您需要表示一个 #{ 文本，您可以转义它，也可以用嵌入功能来生成（可以，这很元编程）
p Escaping works with \#{interpolation}// 字符串嵌入，不转义
- var riskyBusiness = "<em>我希望通过外籍教师 Peter 找一位英语笔友。</em>";
.quotep 李华：!{riskyBusiness}// 空格处理
p| 如果我不用嵌入功能来书写，一些标签比如strong strong| 和em em| 可能会产生意外的结果。
p.如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。

3. 混入 Mixin

// 定义
mixin skus(name)tda-image(:src=`${name}.skuImage` :width="48" :height="48")td= `{{${name}.skuName}}`td= `{{${name}.skuNo}}`tddiv= `网销：{{${name}.priceNetwork}}`div= `零售：{{${name}.priceRetail}}`div= `批发：{{${name}.priceTrade}}`div= `吊牌：{{${name}.priceHangTag}}`div= `成本：{{${name}.priceCost}}`tddiv= `{{ ${name}.weightRough }}`div= `{{ ${name}.weightNet }}`td 0td.flex_center.mb-1(v-for=`it3 in ${name}.combinesSkus`)a-image(:src="it3.skuImage" :width="32" :height="32").ml-1 {{it3.skuName}}td= `{{${name}.createTime}}`td= `{{${name}.sourceName}}`td #[a.blue 打包] #[.line] #[a.blue 拆包] #[.line] #[a.blue 日志]tabletr(v-for="it2 in skus")
// 使用+skus('it2')

vue 中使用 pug相关推荐

VUE中的pug使用
安装 pug npm i -D pug-html-loader pug-plain-pug #安装支持pug依赖 npm install pug pug-loader pug- ...
vue中使用pug语法调用函数传参 mixin
npm i -D pug pug-html-loader pug-plain-loadermodule.exports = {chainWebpack: config => {config.mo ...
pug模板语法在vue中的使用--HTML的模板引擎
一. 介绍 pug,原名jade,是流行的HTML模板引擎,,最大的特色是使用缩进排列替代成对标签.它简化了HTML的成对标签的写法,使代码更加简洁.开发效率更高,但是同时它也带来了一些副作用:可移植 ...
.vue文件转换成html,在vue中把含有html标签转为html渲染页面的实例
在vue中把含有html标签转为html渲染页面的实例在标签内部添加v-html指令即可使用pug的写法: 这个content表示的是一个含标签的变量输入content为: 我是p标签输出结果 ...
js pug 代码_Vue项目中配置pug解析支持
Vue 的用法没有变化: transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}&q ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...

vue 中使用 pug

简介

1. 属性

2. 嵌入

3. 混入 Mixin

vue 中使用 pug相关推荐

最新文章

热门文章