悩むところなく使えました。バーチャルDOMの効果もあるのか、画面遷移はものすごい高速です。これぞ、SPA(シングルページアプリケーション)だ!という感じでちょっと感動します。単一ファイルコンポーネントで作っていきます。まとめて書けるので依存関係の可視性が良いです。どのような単位でコンポーネント化していくかは、プロジェクトの方針やアプリケーションの特性によるかと思います。今回のプロジェクトでは、CRUDの画面単位にコンポーネント化することにしました。画面の制御を見ていきます。赤枠の部分がコンポーネントになっています。src="./list.js"></script>HTMLソースに1~8までの番号があります(横スクロールして確認してください)。それぞれ何をしているのか説明します。HTMLタグに、「v-on:イベント名="処理(または関数)"」という書式でイベントハンドラを登録します。関数を呼び出しています。バインディングしています。自動的に値を代入してくれます。関数を呼び出して一覧を更新します。データバインディングします。関数を呼び出して一覧を更新します。(自分で実装したら結構面倒なコードを書く必要がありますよね。これは便利だと思います)4ページングページングの「前へ」「次へ」ボタンの制御です。いうCSSクラスを追加する。いう制御をしています。クリックイベントも発生しなくなるので、これだけでページングボタンの制御はおしまいです。関数を呼び出して前ページを表示します。同じ制御を、「次へ」ボタンの方でも行います。オブジェクトを取得します。オブジェクトを使って一覧に必要な情報を表示します。プロパティが表示されます。部分では、アカウントのリンクをクリックしたら、編集ダイアログを表示する制御をしています。オブジェクト※が渡されます。7ダイアログアカウントのリンクをクリックした際に表示されるダイアログは、別コンポーネントとして実装しています。うまく動いておりません。対応していないようなので、ブラウザ上でのデバックを考慮して、JSファイルに記述しています。プロパティで取り扱うデータを定義します。マニュアルにもありますが、コンポーネント化する場合は、取り扱うデータオブジェクトを返す関数として定義します。バインドされているので勝手に値が入ってきます。内容がテーブルにレンダリングされます。値なので、フィルタを使って表示用のラベルに変換しています。面白い機能ではないかなと思います。定義した値を使った処理を実装します。値が変化すると、算出プロパティが自動で再計算されます。算出プロパティを使っています。プロパティに記述します。登録されるらしく、this.メソッド名でアクセスできます。