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.hello
        h1 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__dept
      el-form(:inline="true" :model="dataForm" @keyup.enter.native="getDataList()")
        el-form-item
          el-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
  | 管道符号总是在最开头,
  | 不算前面的缩进。

<p>管道符号总是在最开头, 不算前面的缩进。
</p>
a ……用一个链接结束的句子
| 。

<a>……用一个链接结束的句子</a>。
| 千万别
|
button 按
|
| 我!

千万别
<button>按</button> 我!
  • # [ ] 标签嵌入
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>
// 纯文本块
div
  p 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 后 记

感谢支持。

若不足之处,欢迎大家指出,共勉。

如果觉得不错,记得 点赞,谢谢大家 ʚ💖ɞ

欢迎关注。

5.1 原文地址

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

Image placeholder
ByteCat
未设置
  73人点赞

没有讨论,发表一下自己的看法吧

推荐文章
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

Vuex的一些常用知识点介绍

一、为什么要使用Vuex1、多个组件依赖同一个状态,使用组件之间通信方法会非常繁琐,例如多层嵌套组件。2、需要全局保存的数据,例如用户、权限信息,全局系统设置二、Vuex的五个核心属性1、state:

vue单向数据流介绍

prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外,每次父组件更新时,子组件的所有prop都会更新

ajax怎么在vue中使用?

ajax怎么在vue中使用?axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护本文为大家介绍vue使用a

在浏览器中使用Vue.js裁剪图像

在本教程中,我们将探讨如何在浏览器中使用JavaScript库来操作图片,为服务器上的存储做准备,并在Web程序中使用。我们将使用Vue.js而不是原生JavaScript来完成此操作。要了本文想要完

零基础学测试 1 - 在 Laravel 中使用 PHPUnit

创建Laravel应用$laravelnewmind-geek-laravel-test-demo进入项目$cdmind-geek-laravel-test-demo运行自带的测试用例$vendor/

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

聊聊chronos的pullFromDefaultCFAndPush

序本文主要研究一下chronos的pullFromDefaultCFAndPushpullFromDefaultCFAndPushDDMQ/carrera-chronos/src/main/java/

使用 jQuery 触发 Vue 事件

时间一长老是忘记这行代码的写法,今天特地记上一笔,方便今后查阅 js文件如下document.save.dispatchEvent(newEvent('无此事件'))//触发不存在的事件不会报错 do

css伪元素的使用介绍

:before和::before的区别在介绍具体用法之前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频繁,其实CSS对这两个是有区分的。有时你会发现伪类元素使用了两个冒号(::

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

vue和jquery之间有什么区别?

首先我们来了解一下jquery和vue是什么?Vue是什么?Vue.js是一个前端JavaScript框架,用于构建用户界面。它是开源的。当使用其他JavaScript库时,它还可以用作集成工具。它本

vue与jquery的区别是什么?

vue与jquery的区别是什么?vue和jquey的对比:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DO

介绍 Go 的数组和切片

学习在Go中使用数组和切片存储数据的优缺点,以及为什么其中一个比另一个更好图片来自于:carrotmadman6.ModifiedbyOpensource.com.CCBY-SA2.0 数组 数组是编

Java 程序员眼中的 Linux_1.0.Linux 介绍

Linux介绍 Linux这个名字 Linux的Wiki介绍:http://zh.wikipedia.org/zh/Linux Linux也称:GNU/Linux,而其中GNU的全称又是:Gnu’sN

SSH(Secure Shell)介绍

SSH(SecureShell)介绍 SSH安装 查看是否已安装: CentOS:rpm-qa|grepopenssh Ubuntu:dpkg-l|grepopenssh 安装: CentOS6:s

etcd 常用操作介绍

安装 最简单的安装方法是直接去etcdGitHub的Release页下载预编译好的二进制文件。etcd官方为各个系统提供了不同的二进制文件,供开发者根据自己的系统去下载。 下载地址:https://g

etcd 常用操作介绍

安装 最简单的安装方法是直接去etcdGitHub的Release页下载预编译好的二进制文件。etcd官方为各个系统提供了不同的二进制文件,供开发者根据自己的系统去下载。 下载地址:https://g

PHP接口的介绍与实现

PHP接口的介绍与实现 接口定义了实现某种服务的一般规范,声明了所需的函数和常量,但不指定如何实现。之所以不给出实现的细节,是因为不同的实体可能需要用不同的方式来实现公共的方法定义。关键是要建立必须实

Docker容器实现原理及容器隔离性踩坑介绍

本文讲述了 关于容器隔离性的一个“坑”正如Docker官方的口号:“Buildonce,Runanywhere,Configureonce,Runanything”,Docker被贴上了如下标签:轻巧