當前位置：首頁 > 前端技术 > vue >内容正文

vue

Pug 介绍和在 Vue 中使用

發布時間：2023/12/18 vue 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 Pug 介绍和在 Vue 中使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 介紹

pug 是一種前端模板引擎，原名 jade

可用來生成 HTML，它的寫法類似于 CSS

中文文檔

這里先簡單舉幾個 🌰

#hello <div id="hello"></div> a.link-button Link <a class="link-button">Link</a> a(href="https://xrkffgg.github.io/Knotes/") 我的網站 <a href="https://xrkffgg.github.io/Knotes/">我的網站</a>

易理解，同時極大的簡約了我們的代碼。

2 安裝

2.1 下載

npm i -D pug pug-html-loader pug-plain-loader # or yarn add pug pug-html-loader pug-plain-loader

2.2 配置

// vue.config.js module.exports = {chainWebpack: config => {config.module.rule('pug').test(/\.pug$/).use('pug-html-loader').loader('pug-html-loader').end()} }

2.3 使用

<template lang="pug">div.helloh1 Hello World </template>

3 實踐

3.1 舉例

下面將拿出實際項目中的一些代碼進行改造

原代碼

20 行，所有標簽完全閉合

<template><el-card shadow="never" class="aui-card--fill"><div class="mod-sys__dept"><el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"><el-form-item><el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button></el-form-item></el-form><el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;"><el-table-column prop="name" :label="$t('dept.name')" header-align="center" min-width="150"></el-table-column><el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center"></el-table-column><el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column><el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"><template slot-scope="scope"><el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button><el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button></template></el-table-column></el-table></div></el-card> </template>

改造后

13 行，標簽完全簡化

<template lang="pug">el-card.aui-card--fill(shadow="never").mod-sys__deptel-form(:inline="true" :model="dataForm" @keyup.enter.native="getDataList()")el-form-itemel-button(type="primary" @click="addOrUpdateHandle()") {{ $t('add') }}el-table(v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;")el-table-column(prop="name" :label="$t('dept.name')" header-align="center" min-width="150")el-table-column(prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center")el-table-column(prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80")el-table-column(:label="$t('handle')" fixed="right" header-align="center" align="center" width="150")template(slot-scope="scope")el-button(type="text"size="small"@click="addOrUpdateHandle(scope.row.id)") {{ $t('update') }}el-button(type="text"size="small"@click="deleteHandle(scope.row.id)") {{ $t('delete') }} </template>

el-button 由于屬性過長，使用了分行

4 特性

4.1 支持

支持 Vue 的 : @
支持 ES6 模板字符串

4.2 屬性

如果一個標簽有多個屬性，可使用分行或逗號

// 1 el-button(v-if="ifShow" type="size" size="small" @click="doClidk") 點擊// 2 el-button(v-if="ifShow",type="size",size="small",@click="doClidk") 點擊// 3 el-button(v-if="ifShow"type="size"size="small"@click="doClick") 點擊

4.3 注釋

單行

// 一些內容 p foo p bar <p>foo</p> <p>bar</p>

不輸出注釋

//- 這行不會出現在結果中 p foo p bar<p>foo</p> <p>bar</p>

塊注釋

body//一堆文字進行中<body> </body>

4.4 符號

管道文字（ | ）：向模板添加純文本

# [ ] 標簽嵌入

p.這是一個很長很長而且還很無聊的段落，還沒有結束，是的，非常非常地長。突然出現了一個 #[strong 充滿力量感的單詞]，這確實讓人難以 #[em 忽視]。 p.使用帶屬性的嵌入標簽的例子：#[q(lang="es") ?Hola Mundo!]<p>這是一個很長很長而且還很無聊的段落，還沒有結束，是的，非常非常地長。突然出現了一個 <strong>充滿力量感的單詞</strong>，這確實讓人難以 <em>忽視</em>。</p> <p>使用帶屬性的嵌入標簽的例子：<q lang="es">?Hola Mundo!</q></p> p| 如果我不用嵌入功能來書寫，一些標簽比如strong strong| 和em em| 可能會產生意外的結果。 p.如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就會讓我舒服多了。<p>如果我不用嵌入功能來書寫，一些標簽比如<strong>strong</strong>和<em>em</em>可能會產生意外的結果。</p> <p>如果用了嵌入，在 <strong>strong</strong> 和 <em>em</em> 旁的空格就會讓我舒服多了。</p>

// 大文本塊 p.使用常規的標簽可以讓您的代碼行短小精悍，但使用嵌入標簽會使代碼變得更 #[em 清晰易讀]。——如果您的標簽和文本之間是用空格隔開的。<p>使用常規的標簽可以讓您的代碼行短小精悍，但使用嵌入標簽會使代碼變得更 <em>清晰易讀</em>。 ——如果您的標簽和文本之間是用空格隔開的。 </p> // 純文本塊 divp This text belongs to the paragraph tag.br.This text belongs to the div tag.<div><p>This text belongs to the paragraph tag.</p><br/>This text belongs to the div tag.</div>

: 塊展開

a: img<a><img/></a>

/ 自閉和標簽

foo/ foo(bar='baz')/<foo/> <foo bar="baz" />

5 后記

感謝支持。

若不足之處，歡迎大家指出，共勉。

如果覺得不錯，記得點贊，謝謝大家 ?💖?

歡迎關注。

GitHub
掘金
簡書

5.1 原文地址

https://xrkffgg.github.io/Knotes/blog/15.html

總結

以上是生活随笔為你收集整理的Pug 介绍和在 Vue 中使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： juc的辅助类
下一篇：学习Vue3 第七章（认识Reactiv