Learn Vue 3 Basics (Composition API) Quickly and Easily

01. Setting up the development environment

Install Chrome , Vue.js Devtools , VSCode , and Node.js , which are required for development.

02. How to use VSCode

For those who are unfamiliar with Visual Studio Code, I will explain briefly how to use it.

03. Installing the VSCode Extension

Install extensions that are good to use while using VSCode .

• Korean Language Pack
• indent-rainbow
• Live Server
• Material Icon Theme
• Auto Rename Tag
• Prettier - Code formatter
• Vue Language Features (Volar)

04. Download the source code

Covers how to download files containing example code .

01. Getting Started with Vue.js

To get started with Vue, we'll learn how to call the createApp function and create an app.

02. Component

We will cover components , which are a core concept in Vue.js.

03. Data Binding

Learn data binding to draw HTML more efficiently within components .

04. Responsiveness

We cover the concept of reactivity, which is necessary to create a more dynamic web through interaction.

01. v-bind

We will learn about v-bind , which can be used to data bind properties !

02. v-for

Let's cover how to create tags repeatedly using v-for .

03. v-if and v-show

You can make tags appear or disappear depending on conditions using v-if or v-show .

04. v-on

We'll cover v-on , which helps you handle events in tags.

05. v-model

We'll cover v-model , which allows you to bind data to input forms that users can change through interaction .

01. Ref vs. Reactive

We will compare reactive and ref , which are reactive objects, and discuss how they differ.

02. Computed

We'll cover computed , which uses reactive objects to create another value.

03. Watcher

We'll cover Watchers , which allow you to perform additional tasks based on changes in reactive objects.

01. Single File Component

A vue file that allows you to utilize components more, Single File Component !!

02. Create a Vue project

Learn how to create a project that's perfect for Vue development using npm .

03. script setup / style scoped

Script setup to use scripts more efficiently
Style scoped, which applies style only within the component

04. Life Cycle Hook

Learn about Life Cycle Hooks , which allow you to perform specific tasks as components are created and destroyed .

05. Template References

Let's manipulate the DOM using ref in the template!

06. Asynchronous Components

Asynchronous components that call the required components from the server asynchronously.
Learn about dynamic components , which allow you to draw components dynamically.

01. How to use Notion

For those who are unfamiliar with Notion , we cover everything from signing up to simple usage !

02. Importing Notion Data

Learn how to import Notion data using the vue-notion package .

01. Props

Learn about Props , which pass data from parent components to child components.

02. Emits

Learn about Emits , which pass events from child components to parent components.

03. Provide / Inject

We will cover Provide and Inject , which allow you to pass data from a parent component to a deep child component.

04. Fallthrough Attributes

Let's learn how to handle the properties placed in a component through attrs .

05. Component v-model

Learn how to use v-model in your components .

06. Slots

We will cover slots that allow the template of a component to be handled by the parent component.