Vue.jsの動画リスト
この再生リストでは、Vue.jsを学び、効率的でモダンなウェブアプリケーションの開発を行うためのスキルを身につけることができます。Vue.jsは、シンプルで強力なJavaScriptフレームワークで、リアクティブなデータバインディングやコンポーネント指向の開発が特徴です。
まずは、Vue.jsの基本概念やインストール方法を学びます。次に、ディレクティブやコンポーネント、プロパティ、イベントなどの基本機能を簡潔に解説します。これにより、Vue.jsを用いたシンプルなウェブアプリケーションの構築ができるようになります。
実践的なプロジェクトを通じて、Vue.jsの応用技術を学びます。ルーティング、状態管理、API通信、アニメーションなど、Vue.jsを用いた複雑なウェブアプリケーション開発に必要な知識を習得できます。
再生リストを活用して、Vue.jsを使いこなし、効率的でモダンなウェブアプリケーションを実現しましょう。
-
12:44
Vue jsとは?その特徴とメリットについて解説!最新Vue.js3対応
この動画から、Vue.jsのバージョン3の動画シリーズを公開していきます。まずは、特徴やメリット、jQueryではなくVue.jsが使われるようになってきた理由や、特徴の1つである「リアクティブ」の…
-
14:01
Vue js3の読み込みと、基本的な書き方について!
今回は、Vue.jsの読み込みと、基本となる書き方や考え方について説明しています。バージョン2からバージョン3で書き方が少し変更されたので、注意しましょう。また、JSから移行する際にとりあえず書いて…
-
07:26
Vue jsのディレクティブとデータバインディングについて解説!
Vue.jsにはv-◯◯という形で書くことができる、ディレクトティブというものがあります。そして、その中でも今回は v-bind という属性をVueのデータと紐付けることができるものを紹介しています…
-
14:13
Vue.jsにおける、クラスとスタイルのバインディングについて解説!
この動画では、属性をバインド(紐づける)できるv-bindをclassとstyleで活用する方法についてお話ししています。この辺の技術について理解できると、動的にクラスやスタイルを変更できるようにな…
-
12:22
Vue.jsのmethodsを使って、共通メソッド(関数)を定義する方法と、その使い方について
この動画では、通常のJSでもよく使う関数を定義する方法と、その使い方について説明しています。Vue.jsのメソッドが理解できてくると、一気にできることの幅が増え、Vueを使う意味も大きくなってくると…
-
15:29
【Vue.js実践!】Vueのmethodsとdataを使って、メニューの切り替えをしてみましょう!
Vueのmethodsやdataを学んでも、なかなか活用の仕方が分からないという声をいただきます。そんな方の為に、どのようにどうやったら活用できるのかを実践形式で紹介しています。今回はよくあるメニュ…
-
10:36
Vue.jsのcomputedについて解説!methodsの違いとは?キャッシュしてくれるとは?
この動画では、初心者がなかなか理解しにくいcomputedについて説明しています。一見するとmethodsとほとんど変わりないように見えますが、処理結果を保持(キャッシュ)してくれるというメリットが…
-
16:24
条件付きレンダリング!v-if・v-show などを解説。条件に応じて表示を切り替えられるようにしましょう!
この動画では、設定した変数やメソッドに応じて、表示を切り替える方法について学んでいきます。具体的には・v-if・v-else-if・v-else・v-showのそれぞれの挙動と使い方について解説して…
-
06:17
HTMLタグを(エスケープさせず)そのまま処理してくれる、v-htmlについて解説!
vueで定義した変数などに含まれるHTMLタグをそのまま表示したいことがあります。そういった時に使えるのが、この動画で紹介している v-html です。普段内容を表示する際はマスタッシュと呼ばれる …
-
18:31
v-forで配列やオブジェクトを繰り返し処理する方法解説!
Vue.jsには配列やオブジェクトを繰り返しできる v-for という機能があります。今回は、実際に配列とオブジェクトを処理した際の挙動などを確認します。それから、それぞれを処理した場合の引数の意味…
-
08:57
v-forの中でv-forを回す方法!配列やオブジェクトに含まれる配列などをどのように処理すればいいかを解説
配列やオブジェクトの中に配列などが含まれているデータ形式はよく存在します。こういった場合にどのように処理すればいいのか、実際の挙動を確認しながら解説しています。複雑なデータ形式の外部APIや変数など…
-
15:13
データの変更を監視して処理する watch について解説!設定可能な引数やオプションも
この動画では、dataなどの変更に基づいて別の処理をすることができるwatchについて解説しています。また、引数に設定できる・newValue・oldValueについてや、deepやimmediat…
-
11:34
v-modelでinputタグのデータと、Vueのdataを紐づける(バインドする)方法とその活用方法
checkbox, radio, select をv-modelで管理・活用する方法についてはこちらhttps://factory-programming-mv.com/video/qT4OFD7S…
-
22:26
HTMLのcheckbox, radio, select をv-modelで管理!活用する方法も
この動画ではHTMLのチェックボックス(checkbox)、ラジオボタン(radio)、セレクトボックス(select)をv-modelでどのように管理し、実際にどう活用するのかを解説します。動画シ…
-
11:31
Vue jsのライフサイクルフックについて解説!適切なタイミングで処理させる方法
この動画では、Vue jsのライフサイクルフックについて説明しています。以下動画で説明している内容の概要です。・beforeCreate: これは、Vueコンポーネントがまだ作られていない時点で実行…
-
07:25
vue.jsのrefsで要素を取得する方法と、その活用方法!
通常のJSでは、getElementByIdやquerySelectorなどで要素を取得しますが、Vueのrefを使うことで要素を取得・参照することができます。この動画では、実際の使い方と、v-fo…
-
16:45
Vue jsでドロップダウン・アコーディオンメニューを実装する方法!前編
この動画では、Vueの基礎的な技術を活用したよくあるWebサイトの機能を実装していきます。今回はドロップダウン(dropdown)・アコーディオン(accordion)メニューを実装していきますが、…
-
16:17
Vue jsでドロップダウン・アコーディオンメニューを実装する方法 後編
この動画では、Vueの基礎的な技術を活用したよくあるWebサイトの機能を実装していきます。今回はドロップダウン・アコーディオンメニューを実装していきますが、実装方法としては色々な形があるので、今回の…
-
16:49
VueのComponent(コンポーネント)解説!機能や要素ごとに分割して、呼び出せるようにしましょう!
サイトやアプリケーションが大きくなってくると、重複したコードが多くなってきます。そんなときに効率化できて便利なのが、このComponent(コンポーネント)です。引数などで、呼び出す際にテキストや属…
-
08:46
Vue3 Composition API(コンポジションエーピーアイ)とは?Options API との違い
Vue3から追加された、Composition APIについて解説しています。今までは、関連している変数やメソッドが離れてしまうことにより、視覚的にみづらくなってしまっていた問題を解決するものです。…
-
08:44
VueのComposition APIでリアクティブなデータを定義する、refとreactiveについて
今まで、Vue2などで使われてきたOptions API では、dataメソッド内にデータを定義することで、リアクティブなデータを定義してきました。Vue3ではComposition APIが導入さ…
-
10:43
Vue3でref, reactiveで定義したデータにアクセスし、データを書き換える方法
Vue3において、Composition APIを使用して、refやreactiveを用いて定義したデータを操作する方法について説明します。Composition APIの利用: Vue3ではCom…
-
06:12
Vue3でComposition APIにおける、Computed の定義と呼び出しについて
Vue3の新しいComposition APIを活用したComputed(コンピューティッド/計算プロパティ)の定義とその呼び出し方法について詳しく解説します。前回の動画では、Composition…
-
09:26
Composition APIにおける、WatchとWatchEffectについて解説!
この動画では、Vue.jsの「コンポジション API(Composition API)」における「ウォッチ(Watch)」と「ウォッチエフェクト(WatchEffect)」について、初心者向けにわか…
-
09:01
Vue3 の Composition API における、ライフサイクル(Lifecycle)メソッドについて
動画内で説明していた、Vue3 の公式ドキュメントはこちらhttps://ja.vuejs.org/api/composition-api-lifecycle.htmlVue.js(ビュージェイエス…