Vue.componentを初めて使ってちょっとハマった
日本語のドキュメントも充実しているVue.js。
それを頼りにちまちまとコンポーネントを試してました。
コンポーネントの登録はこうするらしい。
// todo-item と呼ばれる新しいコンポーネントを定義 Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
ほうほう。そしてこう書けば置き換わるらしい。
<ol>
<!-- todos 配列にある各 todo に対して todo-item コンポーネントのインスタンスを作成する -->
<todo-item></todo-item>
</ol>
あれ。何も表示されない・・・。ただこれだけなのになぜ・・・。
と思ったら、HTMLの部分にこれを書いただけだとどこにVueのを適用するのかわからないのでした！どこに適用して欲しいのかを知らせる必要があると。
ということで、まずvueのオブジェクトを作っておく。
new Vue({
el: "#todo-list",
});
そして、HTMLの方でもelに対応するidをしてしておく。
