DEV Community

koki-takishita
koki-takishita

Posted on

Vueコンポーネント一例

はじめに

  • vue.jsの公式サイトで学んだことをアウトプット

vue.js 公式

コンポーネントとは

  • ある機能を持った付け外し可能な、部品(スクリプト)のことで、Vue.jsでは部品を組み合わせてページを完成させる.

例 順番付きリストのコンポーネント

<html>
  <head>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <order_lists
          v-for="ol in order_lists"
          v-bind:item="ol"
          v-bind:key="ol.id">
        </order_lists>
      </ol>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Vue.component('order_lists', {
  props:    ['item'],
  template: '<li>{{item.text}}</li>'
})

var app = new Vue ({
  el: '#app',
  data: {
    order_lists: [
      { id: 0, text: 'aiueo' },
      { id: 1, text: 'kakikukeko' },
      { id: 2, text: 'sasisuseso' }
    ]
  }
})
Enter fullscreen mode Exit fullscreen mode

出力

Image from Gyazo

  • 属性値を設定することで、コンポーネントの値を変化させる
<div id="app">
  <ol>
    <order_lists

      // 配列を一つずつ取り出してolに代入
      v-for="ol in order_lists"

      // item(変数)にolを代入
      v-bind:item="ol"

      // kyeを設定
      // 順番付きリストを扱う際はkeyを設定するのがベターらしい
      v-bind:key="ol.id">
    </order_lists>
  </ol>
</div>

Vue.component('order_lists', {

  // itemを取得後、テンプレートをレンダリング
  // propsでデータを受け取ることができる.
  props:    ['item'],
  template: '<li>{{item.text}}</li>'
})
Enter fullscreen mode Exit fullscreen mode

Discussion (0)