WordPress + Nuxt.js でポートフォリオサイトを作る その5

WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その5

GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/

Pug と Nuxt.js(Vue.js)

はじめてpug使ってみたのでちょっととまどったところ
属性名と属性値はぜんぶ () の中に突っ込めばOKという感じですね

<NuxtLink>

html

<p><NuxtLink :to="`/work/${item.slug}/`">detail</NuxtLink></p>

pug

p
  nuxt-link(:to="`/work/${item.slug}/`") detail

<childComponent>

html

<ul>
  <ChildComponent
    v-for="(post,index) in posts"
    :item="post"
    :key="index"
  >
</ul>

pug

ul
  ChildComponent(
    v-for="(post,index) in posts"
    :item="post"
    :key="index"
    )
  )

:src (v-bind:src)

html

<img :src="image.url" alt="title">

img(
  :src="image.url"
  :alt="title"
)

@click (v-on:click)

html

<li>
  <a
    @click="clickedEvent('hoge')"
  >Hoge</a>
</li>

pug

li
  a(
    @click="clickedEvent('hoge')"
  ) Hoge