はじめに
数分前からvue.jsを始めました。
ずっとjQueryユーザですが、なんか良いというのをよく勉強会などで耳にするので、始めてみました。
質問
今、vue.jsのチュートリアル( https://jp.vuejs.org/v2/guide/ )をやっているのですが、
「コンポーネントによる構成」の項目で詰まってしまいました。
以下のHTMLで、なぜ<li>This is a todo</li>
が出力されないのでしょうか?
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 6 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 7</head> 8 9<body> 10 11 12 13 14 <ol> 15 <!-- todos 配列にある各 todo に対して todo-item コンポーネントのインスタンスを作成する --> 16 <todo-item></todo-item> 17 </ol> 18 19 20 21 22 23 <script> 24 // todo-item と呼ばれる新しいコンポーネントを定義 25 Vue.component('todo-item', { 26 template: '<li>This is a todo</li>' 27 }) 28</script> 29 30</body> 31 32</html> 33
公式では以下の図のように、何かが出力されるような書き方をしております。
しかし、実際に実行してみると、以下の図のように何も表示されません。
これはなぜなのでしょうか?
Riot.jsのカスタムタグのようなニュアンスだと思っているのですが、違うのでしょうか?
ご存じの方がいらっしゃいましたら、ご教示いただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/24 07:27