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
idとclass属性は、cssと同じようにそれぞれ#,.を使用します。 ちなみに、idかclassを指定した場合に要素を省略すると、div要素になります。
div#id div.class
#id //-<div id="id"></div>になる
属性
<a>のhref属性のようにid,class以外の属性を指定する場合は次のように括弧を使用します。 属性が複数ある場合はカンマで区切ります。
a(href="http://pugpug.pug", target="_blank") PUGPUGPUG
インライン要素
インライン要素は、<b>要素のようにテキストの一部を強調したりする場合に使われる要素のことになります。
次の例を基に、インライン要素を指定する方法を３つ紹介します。
<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のおすすめ書籍はコチラ -
コメント