はじめに
- 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)