テンプレートエンジンpug

Vue.jsのテンプレートが見慣れない記法で書かれていた。

<template lang="pug"> となっていて、pugというテンプレートエンジンを使っているらしい。

基本文法

タグ名のあとにスペースを開けてタグの中身を書く。

p 中身

↓

<p>中身</p>

タグの属性は関数呼び出しのように書く。

input(
  type='checkbox'
  name='agreement'
  checked
)

↓

<input type="checkbox" name="agreement" checked="checked" />

コード量が減ることが基本的なメリットらしい。 普段からタグの記述に不便さを感じていなかったので、あまり良さを実感できていない。