Vue 3 中級 - Composition API
captain
Vue 2と最新のVue 3の両方で使用できるVue Composition APIを最も簡単かつ正確に学べる講座!
중급이상
Vue 3, Vue.js
🌟 Vue.jsを素早く簡単に学びましょう！ 🌟
このレッスンは、Vue.jsの公式文書に基づいてわかりやすく作成されたレッスンです。
✅ひたすら必要な内容だけきれいで素早くお知らせします！
✅ 不必要にジルオフする時間（コード書く時間、間違ったコード書き直す時間）がありません！
✅簡単にまとめられていて、ほとんどの講義が10分未満！しかし、細かくお知らせできるように圧縮されています！
✅画面はそのままのまま話す時間？ほとんどありません！集中する必要があります！
結果
このレッスンはセクション2以降のレッスンごとに課題があります。
Section 4までは練習であり、Section 5から着実に課題をうまく遂行されればこんなサイトを作ることができますよ。
細かい説明よりもどんなことを学ぶのだろうか？
下からすぐに調べましょう！
Section 01. 講義の準備
始める前に、コンピュータにインストールして設定するものについて説明します。
01. 開発環境を構成する
開発に必要なChromeとVue.js Devtools 、 VSCode 、 Node.jsをインストールします。
02. VSCodeの使い方
Visual Studio Codeを知らない方のために簡単な使い方を説明します。
03. VSCode拡張プログラムのインストール
VSCodeを使用しながら一緒に書くと良い拡張プログラムがインストールされます。
- Korean Language Pack
- indent-rainbow
- Live Sever
- Material Icon Theme
- Auto Rename Tag
- Prettier - Code formatter
- Vue Lanugage Features (Volar)
04. ソースコードのダウンロード
サンプルコードを含むファイルをダウンロードする方法について説明します。
Section 02. Vue.js はじめに
Vue.js文法を本格的に扱い始めます。
わかりやすくするために、1つのHTMLファイルだけに進んでください。
01. Vue.js はじめに
Vueを起動するには、 createApp関数を呼び出してappを作成する方法を学びます。
02. コンポーネント(Component)
Vue.jsで重要な概念と言えるコンポーネントについて説明します。
03. データバインディング
コンポーネント内でHTMLをより効率的に描画するためのデータバインディングを学びます。
04.反応性
相互作用を通じて、より動的なWebを作成するために必要な反応性の概念をカバーします。
Section 03. ディレクティブ (Directive)
コンポーネントでHTML要素をさまざまに操作できるディレクティブについて説明します。
01. v-bind
プロパティにデータバインドできるv-bindについて学びます！
02. v-for
v-forを介してタグを繰り返し作成する方法について説明します。
03. v-ifとv-show
v-ifまたはv-showを使用して、条件に応じてタグを表示または消去できます。
04. v-on
タグでイベントを処理できるようにするv-onについて説明します。
05. v-model
ユーザーが対話を通じて変更できる入力フォームからデータバインドできるvモデルを扱います。
Section 04. 反応性 (Reactivity)
反応性を利用できるrefとreactiv e 、そしてそれを利用して追加的な作業を行うことができるcomputedとwatcherを扱います。
01. ref vs reactive
レスポンシブオブジェクトであるreactiveとrefを比較してどう違うかを説明します。
02. Computed
レスポンシブオブジェクトを使用して別の値を作成するcomputedについて説明します。
03. Watcher
レスポンシブオブジェクトの変化に応じて追加の作業を行うことができるウォッチャーについて説明します。
Section 05. コンポーネント (Component)
コンポーネントファイル（.vue）を作成して、コンポーネントをより深く扱います。
01. Single File Component
コンポーネントをより活用できるvueファイル、Single File Component !!
02. Vueプロジェクトの作成
npmを使ってVueを開発するのに最適なプロジェクトを作成する方法を学びます。
03. script setup / style scoped
scriptをより効率的に活用できるscript setup
style をコンポーネント内でのみ適用するstyle scoped
04. Life Cycle Hook
コンポーネントが作成され消える過程で特定のタスクを実行できるLife Cycle Hookについて学びます。
05. Template Refs
templateでrefを使ってDOMを操作してみましょう！
06. 非同期コンポーネント
非同期的にサーバーで必要なコンポーネントを呼び出す非同期コンポーネント
動的にコンポーネントを描画できる動的コンポーネントについて学びます。
Section 06. ノッション (Notion)
ブログのようにNotionをエディタとして利用する方法を学びます。
01. Notionの使い方
Notionを知らない方のために会員登録から簡単な使い方まで取り上げます！
02. Notion データの読み込み
vue-notionパッケージからNotionデータをインポートする方法を学びます。
Section 07. コンポーネント通信
コンポーネント間でデータをやり取りするさまざまな方法について説明します。
01. Props
親コンポーネントから子コンポーネントにデータを渡すプロップについて学びます。
02. Emits
子コンポーネントから親コンポーネントにイベントを配信するEmitsについて学びます。
03. Provide/Inject
親コンポーネントから深い子コンポーネントにデータを渡すことができるProvideとInjectについて説明します。
04. Fallthrough Attributes
コンポーネントに配置された属性をどのように扱うことができるかをattrsで調べます。
05. Component v-model
コンポーネントにv-modelを書くときに何をすべきかを学びます。
06. Slots
コンポーネントのテンプレートを親コンポーネントで扱うことができるスロットについて説明します。
このように見てもわからない場合は、無料講義をいくつかご覧ください！
どんな感じなのか確か❗️知っています。
💬予想される質問 Q&A
新しく学んでいるのに、ディテールに学べてよかったです！画面もすっきり整理されて見やすくなっており、簡単につなげるように構成されています。新しく学んだり、混乱する部分を参考にして見やすく構成されています！
講義企画から実行までよく組み立てられたカリキュラム通りに進行されてとても良いです。単に自分の知る知識自慢するように間違えれば講義が切れる講義ではなく、少しアニメーション効果まで欠かすことなく良い講義でした。 特にnpmパッケージでインストールだけ進行せず、基礎原理とnpm方式まで分けて説明してくれてとても良かった。この方講義は他の情報が上がってもまた聞きたい内容です。
- 編集: ★★★★★ 5.0 芸術的である。言うまでもない優れたレベル - 説明: ★★★★☆ 4.5優れています。概念説明の質の面で不足したり、急いで進む部分がないわけではないが、概念自体を跳ね越えて行くことを欠かさず、不足した部分は編集でカバーしている。 - 自己主導性：★★★★☆ 4.5優れています。毎講義の終わりごとに課題を出して、すぐ次の講義で正解を示すことで復習までできる。ブログを作るという一つの目的に合わせてよく構成されている。 - 講義対象選定: ★★★★_ 4.0 どこか微妙に物足りなさ。対象を初級者と考えているようだが、そういうことには微妙に概念説明が足りない部分がたまにある。すでに似た概念を知っていればスムーズに進むことができる。 - 推奨受講者：JavaScriptを現業で使用した経験があるがVue.jsは書いたことがない人、他のUIフレームワークを使ってみたがVue.jsを学びたい人、直接従ってよく理解できない概念は検索したり講義者に質問しながら習う自分がいる初心者学習者、実務に早く書かなければならないが、公式文書は長すぎて一つ一つ読みにくいインフラ事業会員の社員
非専攻者には本当に難しいコーディング関連用語や内容を本当に分かりやすく教えてくれてありがとう！ )
おすすめです。 初心者がわかりやすく説明が上手です。
![[最新]Vue川の終わりの王：Nuxt 3完璧マスター강의 썸네일](https://cdn.inflearn.com/public/courses/333042/cover/654fc01a-31c1-4138-addf-69527cae68bc/333042.png?f=avif&w=420)
![企画者様 この程度ウェブ開発は学んでみてはいかがでしょうか？ [理論+実習]강의 썸네일](https://cdn.inflearn.com/public/courses/333579/cover/5bfdb903-721c-4e32-803b-ed0d4cfc28b7/333579.png?f=avif&w=420)
