Vue.jsで俳句を表示するよ！ #俳句プログラミング @pronama

Vue.js プログラミング 俳句プログラミング 開発

最近バイトの方でVue.jsを勉強したので、プロ生ちゃんのツイートを見かけた瞬間にコードを書き始めました。

do ->
  poems = [
    {creator: "正岡子規", kamigo: "赤とんぼ", nakashichi: "筑波に雲も", shimogo: "無かりけり"},
    {creator: "松尾芭蕉", kamigo: "五月雨を", nakashichi: "集めてはやし", shimogo: "最上川"}
  ]

  haikuVM = new Vue
    data:
      haikus: poems
  haikuVM.$mount '#haiku'
  return 
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.min.js"></script>
    <style>h3{white-space: pre }</style>
  </head>
  <body>
    <div id="haiku">
      <div v-repeat="haikus">
        <h1>{{creator}}</h1>
        <h3>  {{kamigo}}</h3>
        <h3>  {{nakashichi}}</h3>
        <h3>  {{shimogo}}</h3>
      </div>
    </div>

    <script src="./haikuVue.js"></script>
  </body>

</html>