これ1本でVue.jsで必要な知識が全て手に入る講座です。【超Vue.js完全ガイド 2024】
視聴回数 3,105 回
0
0
このコースはこれ1本でVue.jsで必要な知識が全て手に入る、Vue.js完全ガイドとなっています。この講座を修了する頃には、Vue.jsの多くを熟知し、Vue.jsを使ったWebサービスを世界中に公開しているでしょう。
続きはこちらから視聴できます。
https://www.udemy.com/course/vue-js-complete-guide/?couponCode=EC325727C01B3EF917C5
Twitterはこちら
https://twitter.com/__yoshipi__
もくじ
0:00 これがVue.jsだ！
05:36 このコースの流れ
08:44 こうしてVue.jsをはじめる(イントロダクション)
09:11 「単一ファイルコンポーネント」と「Vite」
13:36 こうして開発環境を整える(Node.js, VSCode, create-vue)
20:29 create-vueが作成したプロジェクトはどうなっているのか
31:20 拡張機能はこうセットアップする(Volar, ESLint, Prettier)
39:15 createAppを使ってVueのアプリを作る方法
46:59 .vueファイルはこうなっている！
52:44 JavaScriptのデータを表示する方法
56:09クリックされた時に処理を実行する方法
58:50これがリアクティビティだ！
1:02:38 ref()を使ってリアクティブなデータを作る方法
1:10:29 reactive()を使ってオブジェクトをリアクティブにする方法
1:19:41 reactive()とref()はこうして一緒に使える
1:27:48 普通のオブジェクトとref()はこうして一緒に使う
1:35:58 これがVue.jsの基礎だ！(テンプレート構文, イベントハンドリング, 算出プロパティ, ウォッチャー, クラス/スタイル)(イントロダクション)
1:36:27 これがテンプレート構文だ！
1:39:25 二重波括弧({})を使ってデータを描画する方法
1:41:56 これがv-から始まる特別な属性であるディレクティブだ！
1:43:11 v-htmlを使ってデータをHTMLとして出力する方法
1:46:29 こうしてv-bindを使って属性値を指定する
1:52:00 Boolean属性に対してv-bindを利用する方法
1:55:30 v-bindで１度に複数の属性を指定する方法
1:57:01 v-onを用いてクリックなどのイベント発生時に特定の処理をする方法
2:02:24 イベントオブジェクトを使ってイベントの情報を取得する方法
2:05:01 v-onでハンドラーに引数を渡す方法
2:06:15 イベント修飾子を使って頻繁に行う処理を簡略化する方法 - stop, prevent
2:12:01キー修飾子を使ってキーボードイベントに対して処理をする方法
2:14:00 ディレクティブの構造はこうなっている
2:15:15 角括弧([])を使ってディレクティブの引数にscriptのデータを指定する方法
2:16:44 v-modelを使用してinputを単純に扱えるようにする方法
2:19:25 computedを使って複雑な式を１つにまとめる方法
2:30:18 computedを使う時はここに注意する - ReactiveEffect
2:46:19 watchEffectを使ってリアクティブなデータの変更を監視する方法
2:53:43 watchを使って特定のリアクティブなデータの変更を監視する方法
3:09:18 class属性はこう指定する！
3:17:49 style属性はこう指定する！
続きはこちらから視聴できます。
https://www.udemy.com/course/vue-js-complete-guide/?couponCode=EC325727C01B3EF917C5
Twitterはこちら
https://twitter.com/__yoshipi__
もくじ
0:00 これがVue.jsだ！
05:36 このコースの流れ
08:44 こうしてVue.jsをはじめる(イントロダクション)
09:11 「単一ファイルコンポーネント」と「Vite」
13:36 こうして開発環境を整える(Node.js, VSCode, create-vue)
20:29 create-vueが作成したプロジェクトはどうなっているのか
31:20 拡張機能はこうセットアップする(Volar, ESLint, Prettier)
39:15 createAppを使ってVueのアプリを作る方法
46:59 .vueファイルはこうなっている！
52:44 JavaScriptのデータを表示する方法
56:09クリックされた時に処理を実行する方法
58:50これがリアクティビティだ！
1:02:38 ref()を使ってリアクティブなデータを作る方法
1:10:29 reactive()を使ってオブジェクトをリアクティブにする方法
1:19:41 reactive()とref()はこうして一緒に使える
1:27:48 普通のオブジェクトとref()はこうして一緒に使う
1:35:58 これがVue.jsの基礎だ！(テンプレート構文, イベントハンドリング, 算出プロパティ, ウォッチャー, クラス/スタイル)(イントロダクション)
1:36:27 これがテンプレート構文だ！
1:39:25 二重波括弧({})を使ってデータを描画する方法
1:41:56 これがv-から始まる特別な属性であるディレクティブだ！
1:43:11 v-htmlを使ってデータをHTMLとして出力する方法
1:46:29 こうしてv-bindを使って属性値を指定する
1:52:00 Boolean属性に対してv-bindを利用する方法
1:55:30 v-bindで１度に複数の属性を指定する方法
1:57:01 v-onを用いてクリックなどのイベント発生時に特定の処理をする方法
2:02:24 イベントオブジェクトを使ってイベントの情報を取得する方法
2:05:01 v-onでハンドラーに引数を渡す方法
2:06:15 イベント修飾子を使って頻繁に行う処理を簡略化する方法 - stop, prevent
2:12:01キー修飾子を使ってキーボードイベントに対して処理をする方法
2:14:00 ディレクティブの構造はこうなっている
2:15:15 角括弧([])を使ってディレクティブの引数にscriptのデータを指定する方法
2:16:44 v-modelを使用してinputを単純に扱えるようにする方法
2:19:25 computedを使って複雑な式を１つにまとめる方法
2:30:18 computedを使う時はここに注意する - ReactiveEffect
2:46:19 watchEffectを使ってリアクティブなデータの変更を監視する方法
2:53:43 watchを使って特定のリアクティブなデータの変更を監視する方法
3:09:18 class属性はこう指定する！
3:17:49 style属性はこう指定する！
