Pugの基本とVueへの導入方法を解説

Web

Pugとは?

ブサカワなワンちゃんです。

まぁnpmを見るとパグ(犬)らしき画像が載っているので嘘ではないです。

Pugを利用するとHTMLの記載を簡略化することができます。 通常のHTMLはMarkup Languageなので開始タグと終了タグがセットになりますが、Pugではそもそもタグという考え方ではなくなります。

簡単な例でみてみましょう。

<div id="container1">
  <p class="text">PugPugPugPug</p>
</div>
<div id="container2">
  <p class="text">PogPogPogPog</p>
</div>
div#container1
  p.text PugPugPugPug
div#container2
  p.text PogPogPogPog

比較するとPugの方がスッキリした感じに見えますね。

最終的にはWebpackなどにより、HTMLとして生成されます。

では基本的なルールを見ていきましょう。

要素の表記

HTMLでは要素をタグとして<div>のように表現しますが、Pugでは要素名のみになります。

テキスト

<p><a>のようにタグ間にテキストを指定する場合は、要素にスペースを入れて続けて記載します。

p␣テキスト

要素の入れ子

HTMLでは開始タグと終了タグの間に入れることで要素を入れ子にできますが、Pugではインデントを利用します。

div         //-親要素
  p PUGPUG  //-子要素

最初の例でわかるように、インデントが同じ場合は入れ子にならず、同じ階層の要素になります。

また子要素が1要素だけの場合は次のようにコロン(:)を使用することもできます。

div: p PUGPUG

では次のようにするとどうなるでしょう。

div: p PUGPUG
  p POGPOG

試してみると次のように余計な要素が追加されました。 基本的にはインデントを使用し、コロンは可読性を上げる場合に使うのがいいかもしれません。

<div>
  <p>PUGPUG</p>
  <p>POGPOG</p>
  <p></p>
</div>

id・class

idclass属性は、cssと同じようにそれぞれ#,.を使用します。 ちなみに、idclassを指定した場合に要素を省略すると、div要素になります。

div#id
div.class
#id  //-<div id="id"></div>になる

属性

<a>href属性のようにid,class以外の属性を指定する場合は次のように括弧を使用します。 属性が複数ある場合はカンマで区切ります。

a(href="http://pugpug.pug", target="_blank") PUGPUGPUG

インライン要素

インライン要素は、<b>要素のようにテキストの一部を強調したりする場合に使われる要素のことになります。

次の例を基に、インライン要素を指定する方法を3つ紹介します。

<p>PUGPUG<b>PUG</b>PUG</p>

タグ指定

素直にタグを使います。PugだからといってHTMLタグが使えなくなるわけではありません。

p PUGPUG<b>PUG</b>PUG

インターポレーション

#[]でインライン要素を囲むことで指定します。

p PUGPUG#[b PUG]PUG

パイプ

パイプ|を使用して次のように記載します。

p PUGPUG
  b PUG
  | PUG

コメント

Pugでは//でコメントになります。HTMLに表示したく無い場合は//-とします。

VueCLI への導入方法

インストール

Vue.jsでPugを利用するには次のものが必要になるのでインストールします。

$npm i pug pug-loader pug-plain-loader

vueファイルへの適用

vueファイルでPugを使用する場合は、次のようにtemplateに指定します。

<template lang="pug">
div#app
</template>

ディレクティブは属性と同様に指定します。

例えばv-forディレクティブは次のように指定します。

ul
  li(v-for="i in items", :key="i") {{i}}

イベントv-onも同様です。

button(@click="click") Click Me!

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました