プログラミングに関する試行錯誤の記録を残します。ScriptPythonJavaScriptPHPVue.jsの基本を知る為にTodoListを作り、解説もする2020.01.01JavaScriptHOMEJavaScriptVue.jsの基本を知る為にTodoListを作り、解説もするJavaScript3大フレームワークの中で最も学習コストが低い(主観)、Vue.jsに入門しました。Vue.jsでTodoListを作る、というチュートリアルはブログ等で既に幾つも記事がありますが、この記事ではTodoListを作る事でVue.jsの何について理解できるか(=理解できたか)、を主眼として書いていきます。App.vue完成イメージ最終的には以下のTodoListを作ります。UIはもう少し改善の余地がありますが、Vue.jsの理解からは少し外れるかと思い、そこまで詰めてないです・・・。全体のコード先にコードから見たほうがイメージがつかみやすい気がしました。#42b983;}</style>TodoList作成を通して理解できること親コンポーネントから子コンポーネントの値連携propsを使用する。親側で、紐づいているコンポーネントのタグ内にv-bind:プロパティ名=値を記述する事で、子側に連携される。FrameworkApp.vue親側からtodosという値がitemsというプロパティ名で連携される。},TodoList.vue子側でitemsという値を受け取り、使用する。},子コンポーネントから親コンポーネントのイベント連携$emitを使用する。イベント名で親と子を紐付ける。必要に応じてパラメータも渡すことが可能。FrameworkTodoList.vue削除ボタンのクリック時に、イベント名としてremoveを、パラメータとしてDOM要素とindexを渡す。</ul>App.vueイベント名removeで受け取り、removeTodoを呼び出す。inの形で要素を展開できる。第1引数が要素、第2引数がindexとなる。</ul>フォーム入力バインディング双方向データバインディングしたい要素にv-model=プロパティ名を指定する。FrameworkApp.vueこの場合、taskというプロパティと紐づき、変更が監視される。},イベントハンドリングイベントを追加したい要素にv-on:イベント名を追加する事で、指定のイベントをハンドリングできます。Frameworkまた、公式のリファレンスでは指定可能なイベント種類の記載がありませんでしたが、以下Qiitaの記事でまとめられておりました。src=&quot;https://qi...App.vue以下の場合、追加ボタンクリックでaddTodoを実行する。投稿一覧SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#ができます。現在はVue.js、Python辺りを勉強中です。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。お問い合わせのページからご連絡下さい。2019.12.12以前、Handsontableで添付ファイルを表示するカスタマイズを行いましたが、それに引き続きのカスタマイズです。2019.09.17先日JSの開発/デバッグで開発者ツールを使っていたら、何それ?と言われてしまいました。開発者ツールの存在を知らない方もいるようなのでこの機会[...]スポンサーリンクプロフィールNaoki(@nkwtnb)SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#/Vue.js/Python/etc...作曲/編曲もします。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。記事の内容について問い合わせ等ございましたら、お気軽にTwitterのリプかDM、またはお問い合わせのページからご連絡下さい。Ganttプラグインを使ってみた感想。