はじめに
- 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' } ] } })
出力
- 属性値を設定することで、コンポーネントの値を変化させる
<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>' })
Top comments (0)