강의

멘토링

로드맵

Programming

/

Front-end

簡単かつ迅速に学習するVue 3基本(Composition API)

Vue.jsを初めて学ぶ方のための講義です。 公式文書をわかりやすく消化できるように、簡単な例と絵で説明がよくできています。

  • Blog Creator
vue
vue3
프론트엔드
Vue.js
Vue 3
Notion

学習した受講者のレビュー

こんなことが学べます

  • Vue3基本概念(反応性、データバインディング、コンポーネントなど)

  • Composition APIの開発方法

  • vue-notionパッケージによるNotionデータのインポート

🌟 Vue.jsを素早く簡単に学びましょう! 🌟

このレッスンは、Vue.jsの公式文書に基づいてわかりやすく作成されたレッスンです

✅ひたすら必要な内容だけきれいで素早くお知らせします!
✅ 不必要にジルオフする時間(コード書く時間、間違ったコード書き直す時間)がありません!
✅簡単にまとめられていて、ほとんどの講義が10分未満!しかし、細かくお知らせできるように圧縮されています!
✅画面はそのままのまま話す時間?ほとんどありません!集中する必要があります!

結果

このレッスンはセクション2以降のレッスンごとに課題があります。
Section 4までは練習であり、Section 5から着実に課題をうまく遂行されればこんなサイトを作ることができますよ。


細かい説明よりもどんなことを学ぶのだろうか?
下からすぐに調べましょう!

Section 01. 講義の準備

始める前に、コンピュータにインストールして設定するものについて説明します。

01. 開発環境を構成する

開発に必要なChromeVue.js DevtoolsVSCodeNode.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)

反応性を利用できるrefreactiv e 、そしてそれを利用して追加的な作業を行うことができるcomputedwatcherを扱います。

01. ref vs reactive

レスポンシブオブジェクトであるreactiverefを比較してどう違うかを説明します。

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

親コンポーネントから深い子コンポーネントにデータを渡すことができるProvideInjectについて説明します。

04. Fallthrough Attributes

コンポーネントに配置された属性をどのように扱うことができるかをattrsで調べます

05. Component v-model

コンポーネントにv-modelを書くときに何をすべきかを学びます。

06. Slots

コンポーネントのテンプレートを親コンポーネントで扱うことができるスロットについて説明します。

このように見てもわからない場合は、無料講義をいくつかご覧ください!

どんな感じなのか確か❗️知っています。


💬予想される質問 Q&A

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Vue.jsのドキュメントを読むのが難しい人や面倒な人

  • Vue.js 初めて入門する人

  • フロントエンド入門者

前提知識、
必要でしょうか?

  • HTMLの基本

  • CSS基本(border、margin、paddingなど分かる程度)

  • Javascriptの基本(console.logや矢印関数を知る程度)

こんにちは
です。

カリキュラム

全体

32件 ∙ (3時間 20分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

9件

4.9

9件の受講レビュー

  • sftblw님의 프로필 이미지
    sftblw

    受講レビュー 3

    平均評価 4.7

    5

    44% 受講後に作成

    - Chỉnh sửa: ★★★★★ 5.0 Tính nghệ thuật. Đẳng cấp tuyệt vời không cần phải nói - Mô tả: ★★★★☆ 4.5 Xuất sắc. Về chất lượng giải thích khái niệm, có một số phần còn thiếu sót hoặc làm vội vàng, nhưng chúng tôi không quên xem lại bản thân khái niệm, mọi thiếu sót đều được khắc phục qua quá trình chỉnh sửa. - Tính tự chủ: ★★★★☆ 4,5 Xuất sắc. Bài tập được đưa ra vào cuối mỗi bài giảng và bạn thậm chí có thể xem lại bằng cách hiển thị câu trả lời đúng trong bài giảng tiếp theo. Nó được cấu trúc tốt cho mục đích duy nhất là tạo một blog. - Lựa chọn mục tiêu bài giảng: ★★★★_ 4.0 Hơi thất vọng một chút. Có vẻ như đối tượng mục tiêu là những người mới bắt đầu, nhưng ngay cả như vậy, vẫn có một số phần mà phần giải thích về khái niệm vẫn còn thiếu một cách tinh tế. Nếu bạn đã biết các khái niệm tương tự, bạn có thể tiếp tục một cách suôn sẻ. - Người tham gia được đề xuất: Những người có kinh nghiệm sử dụng JavaScript tại nơi làm việc nhưng chưa bao giờ sử dụng Vue.js, những người đã sử dụng các khung giao diện người dùng khác nhưng muốn tìm hiểu Vue.js, những người có thể tự mình theo dõi và tìm kiếm các khái niệm họ làm không hiểu hoặc hỏi người hướng dẫn. Những học viên mới bắt đầu tự tin học bằng cách đặt câu hỏi và nhân viên của các công ty thành viên Infron Business cần sử dụng nhanh chóng cho công việc thực tế nhưng lại gặp khó khăn khi đọc từng tài liệu chính thức vì chúng rất khó hiểu. quá dài.

    • urco129524님의 프로필 이미지
      urco129524

      受講レビュー 1

      平均評価 5.0

      5

      31% 受講後に作成

      Tôi đang học một điều gì đó mới và thật tuyệt khi có thể tìm hiểu chi tiết!! Màn hình được sắp xếp gọn gàng, dễ nhìn, dễ theo dõi. Nó được sắp xếp sao cho dễ dàng học được điều gì đó mới hoặc tham khảo những phần khó hiểu!!

      • cuhexa0754님의 프로필 이미지
        cuhexa0754

        受講レビュー 2

        平均評価 5.0

        5

        100% 受講後に作成

        Thật tuyệt vời khi mọi thứ từ soạn giáo án đến thực hiện đều tuân theo một chương trình giảng dạy được hoạch định rõ ràng. Đó không phải là một bài giảng mà bài giảng sẽ bị gián đoạn nếu bạn mắc lỗi, như thể bạn chỉ đơn giản là thể hiện kiến ​​thức của mình. Đó là một bài giảng hay, thậm chí còn có những hiệu ứng hoạt hình nhỏ. Đặc biệt, tôi thực sự thích nó giải thích các nguyên tắc cơ bản và phương pháp npm một cách riêng biệt, thay vì chỉ cài đặt gói npm. Bài giảng của người này là thứ tôi muốn nghe lại ngay cả khi có thông tin khác được đăng tải.

        • guizan6111님의 프로필 이미지
          guizan6111

          受講レビュー 1

          平均評価 5.0

          5

          31% 受講後に作成

          Cảm ơn bạn đã giải thích các thuật ngữ và nội dung liên quan đến mã hóa mà thực sự khó đối với những người không chuyên ngành một cách dễ hiểu! Tôi cần nghiên cứu về sự phát triển trong những thời điểm khó khăn khi việc chuẩn bị công việc còn khó khăn và đó là một bài giảng hoàn hảo. Tôi nghĩ tôi sẽ học bài tiếp theo khi nó ra mắt (có vẻ như bạn có giọng nói hay)

          • neeunbox3114님의 프로필 이미지
            neeunbox3114

            受講レビュー 1

            平均評価 5.0

            5

            50% 受講後に作成

            Khuyến khích. Những lời giải thích được giải thích rõ ràng và dễ hiểu cho người mới bắt đầu.

            ¥2,753

            似ている講座

            同じ分野の他の講座を見てみましょう!