今回はjavascriptのフレームワークVue.jsを使って簡単な作成します。
なるべく簡単に実装するために、読み込みはCDN、cssとjsは埋め込み式で記述します。
まずは完成形をご覧ください→完成形
【ポイント】
➀checkboxにチェックをいれるとスタイリングが変わる
②削除可能
それでは実装していきましょう。
まずはいつものHTMLのテンプレートを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> |
</body>直前でVueを読み込みます
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </body> </html> |
Vueを読み込んだ後にscriptタグを記述します。
※ここから先はbodyタグの中のみ記述します
|
1 2 3 4 5 |
<body> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> </script> </body> |
bodyタグの中と scriptタグの中にVueのテンプレートをそれぞれ記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<body> <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue ({ el:'#app', }) </script> </body> |
そして#appの中にテキスト入力欄とボタンを設置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <div id="app"> <input type="text"> <button>add</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue ({ el:'#app', }) </script> </body> |
※出力結果
さて、これで準備完了です。まずはテキスト入力欄のデータをデータオプションで受け取ってみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <div id="app"> <input type="text" v-model='newItem'> <button>add</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue ({ el:'#app', data:{ newItem:"", }, }) </script> </body> |
これでinputタグ内にあるコンテンツとnewItemというデータが連動して動きます。
buttonの下に <pre>{{ $data }}</pre> を記述すると、連動して動いているのが可視化され確認することができます。
次は「ボタンがクリックされたら関数が呼び出され、アラートが起動する」というのを実装してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <div id="app"> <input type="text" v-model='newItem'> <button v-on:click='addItem' >add</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue ({ el:'#app', data:{ newItem:"", }, methods:{ addItem:function(){ alert('クリックされました') } } }) </script> </body> |
次は
➀データオプションにtodoを用意
②addItem関数がよばれたら、todoの中にnewItemを代入
③pタグのなかにtodoデータを反映させる
というのを実装してみます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<body> <div id="app"> <input type="text" v-model='newItem'> <button v-on:click='addItem'>add</button> <p>{{ todo }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue ({ el:'#app', data:{ newItem:"", todo:"", }, methods:{ addItem:function(){ // alert('クリックされました') this.todo = this.newItem; } } }) </script> </body> |
※出力結果
テキストボックスに入力した文字がボタンを押してテキストとして反映されればOKです！ただこのままだと
➀todoリストが一つしか追加できない
②削除ができない
など課題が残るので次回に持ち越そうと思います！
0
0