Vue.js勉強メモ(1) - 簡易Todoリストの作成
公式ガイドの、コンポーネントの詳細の手前まで読み終えたので、この時点でTodoリストっぽいものを作ってみる。データベースを用意しないため、厳密にはTodoリストではない。 コンポーネントについてはまだ学んでいないため、これから書くコードにはまだ改善の余地があるだろう。 準備 index.htmlを用意する。 1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html lang="ja"> <head> <meta charet="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h1>Todo List</h1> <script src="script.js"></script> </body> </html> 以下の部分でVue.jsを読み込んでいる。 1 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> script.jsを作成しておく。中身はまだ空。 実装する機能 初めにも述べたが、データベースは用意しない。以下の簡単な機能だけ実装する。 入力エリア Todoリスト表示エリア 各要素に削除ボタンをつける。 勉強を兼ねて、いくらか遠回りしながら作っていく。 配列の要素をli要素として表示 index.htmlに追記する。 1 2 3 4 5 <div id="app"> <ul> <li v-for="todo in todos">{{ todo }}</li> </ul> </div> Vue.jsが用意したテンプレート構文をHTMLに埋め込むことによって、データとDOMを結びつけることができる。v-という接頭辞がついた属性はディレクティブと呼ばれる。今回のv-forディレクティブは、その名の通りfor文を実現する。構文から分かると思うが、JSとかPythonで使われているfor-in文と同じ文法。 式の埋め込みは{{ 式 }}で行う。ガイドではMustache(口髭)構文と呼んでいる。良いネーミングだなと思ったけど、{{ }}の書式をそう呼ぶのはわりと一般的みたい？ さて、そうするとtodosというデータを用意する必要がありそうだが、これはscript.jsで行う。 1 2 3 4 5 6 const app = new Vue({ el: '#app', data: { todos: ['todo1', 'todo2', 'todo3', 'todo4', 'todo5'] } }) elプロパティに、データと結びつく要素を指定する。これはセレクタの書式。elとは恐らくelementの略。dataプロパティに、結びつけるデータを指定する。v-forで利用するために、todosプロパティは配列にする。...