Udemy Vue 入門コーステキスト一覧
TweetCodeSandbox で Vue プロジェクトを始めよう
- CodeSandbox で Vue プロジェクトを始めよう
- main.js が Vue のアプリケーションを始めるためのエントリーポイントになっている
- App.vue を変更してみよう
- Style 機能を使って見た目を変えてみよう
- Scoped CSS を使って、メンテナブルな CSS を書こう
- 初めての Vue Component の import と使用
- 普通の Web Page を Vue の Component を活かしながら作成する
- main.js における new Vew() の設定項目詳細
- Scoped CSS の例外的挙動について
宣言的レンダリングと Reactive Data
- 値の変化に追従する UI を作成するのに便利
- Vue の template から参照できるのは Reactive Data のみ
- DOM がクリックされた時にメソッドを実行する
- @click で実行するメソッドに引数を渡す
- クリックすると 1 増えるようにする
- 任意の値分数値を増やせるようにする
- Computed を使って、Reactive Data を元に、計算を加えた Reactive な値を作る
- Class を動的に変化させて、スタイルを変化させる
- Template から参照できる変数, View への bind
v-for を使いこなしてバスケットボールチーム名簿を作る
Props を使ってコンポーネントからコンポーネントへでデータを渡す
関数型プログラミング入門（主に map, filter の使い方）
Vue 基礎実践アプリケーション
- reactive なデータの定義と描画
- Component への分割と Props の受け渡し
- Component をさらに細かく Component に分ける
- Method を Component に Props として渡していく
- 身長を変更するために必要な値を引数として受け取る
- 配列の中にオブジェクトがしまわれた data を変更する複雑なメソッドを定義する
- Computed を活用し、身長順に並べ替えたリストを表示する
- Template を使って v-for の可読性をあげる
Vue-router を使ってページを遷移させる
- Vue-router を使う準備をする
- Routing の設定をする
- Router-link を使ってページを移動する
- Dynamic Route Matching を使って動的に変化する URL を活用する
- メンバーのプロフィール情報から router-link を作る
- this.$route.params.id とプロフィール情報を使ってページを作る
- 404 not found ページと、存在しない選手ページを作る
Vuex で状態管理の複雑さと戦う
- Vuex はどんな時に便利？
- Vuex, store の設定と state の参照
- Mutation で state を変更する / mutation を実行する（commit）
- State を直接参照せず、getter 経由で参照することを強く推奨する
- mutaion に直接 commit せず、action 経由で実行することを強く推奨する
- Vuex を使うことでバケツリレーが必要なくなったので色々やってみよう
- Vuex 総復習
- Vuex の Modules 機能
Vuex と input 要素を組み合わせてサーチ風機能を作る
- Vuex の復習と準備
- input 要素が変更された時のイベントをつかまえてメソッドを実行する
- Action を発行し、mutation を経由して state を変更する
- MyJSON というサービスを使って、ダミーの API を作る
- Axios, async/await を使って非同期にデータを取得する
- action の中で複数の commit を実行することで Loading 機能を追加する