コンポーネントがよくわかりません。
これはなにをしているのでしょうか。
またコンポーネントの中のpropsとはなんなのでしょうか。
あと、v-bind:todo="item"の意味もよろしければ教えてください(>___<)
html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <title>Hello</title> 6 <script src="https://npmcdn.com/vue/dist/vue.js"></script> 7 <script src="./vue7.js"></script> 8 <!--<link rel="stylesheet" href="./css/1.css"></link>--> 9</head> 10 11<body onload="sample_func();"> 12 <div id="app-7"> 13 <ol> 14 <!-- 15 各 todo-item の内容を表す todo オブジェクトを与えます。 16 これにより内容は動的に変化します。 17 また後述する "key" を各コンポーネントに提供する必要があります。 18 --> 19 <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> 20 </ol> 21 </div> 22</body> 23 24</html>
javascript
1function sample_func() { 2 Vue.component('todo-item', { 3 props: ['todo'], 4 template: '<li>{{ todo.text }}</li>' 5 }) 6 7 var app7 = new Vue({ 8 el: '#app-7', 9 data: { 10 groceryList: [ 11 { id: 0, text: 'Vegetables' }, 12 { id: 1, text: 'Cheese' }, 13 { id: 2, text: 'Whatever else humans are supposed to eat' } 14 ] 15 } 16 }) 17}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。