Vue 3 Intermediate - Composition API
captain
The easiest and most accurate course to learn Vue Composition API, available in both Vue 2 and the latest Vue 3!
중급이상
Vue 3, Vue.js
Learn Vue 3 Basics (Composition API) Quickly and Easily
This is a lecture for those who are learning Vue.js for the first time. It is well explained with simple examples and pictures so that you can easily understand the official documentation.
Reviews from Early Learners
What you will gain after the course
Vue3 basic concepts (reactivity, data binding, components, etc.)
How to develop a Composition API
Importing Notion data via the vue-notion package
🌟 Learn Vue.js easily and quickly! 🌟
This lecture is based on the official Vue.js documentation and is designed to be easy to understand .
✅ We will provide you with only the necessary information quickly and neatly!
✅ No more unnecessary dragging and dropping (writing code, rewriting incorrect code)!
✅ Most lectures are under 10 minutes, so they're concise and concise! But they're also condensed to provide detailed information!
✅ Time spent just talking while looking at the screen? Almost none! You need to focus!
Results
This course has assignments for each lecture starting from Section 2.
Section 4 is for practice, and if you consistently do your homework from Section 5 onwards, you can create a site like this.
Are you curious about what you will learn beyond the detailed explanations?
Let's find out right below!
Section 01. Preparing for the Lecture
Before we begin, let's cover what you need to install and set up on your computer.
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 .
Section 02. Getting Started with Vue.js
We're starting to get into the Vue.js syntax in earnest.
To help you understand, we'll proceed with just one HTML file.
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.
Section 03. Directive
We'll cover directives that allow you to work with HTML elements in various ways within your components.
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 .
Section 04. Reactivity
We will cover ref and reactiv e , which can take advantage of reactivity, and computed and watcher , which can be used to perform additional tasks.
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.
Section 05. Components
Let's create a component file (.vue) and delve into components in more depth.
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.
Section 06. Notion
Learn how to use Notion as an editor, like a blog.
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 .
Section 07. Component Communication
Covers various ways to pass data between components.
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.
If you still don't understand, I recommend watching a few free lectures!
You'll know exactly what it feels like❗️
💬 Expected Questions Q&A
Recommended for
these people
Who is this course right for?
People who find the Vue.js documentation difficult or bothersome to read
For those who are new to Vue.js
Frontend beginner
Need to know before starting?
HTML Basics (Do you know how to use the value attribute in the input tag?)
CSS basics (knowing border, margin, padding, etc.)
Javascript basics (knowing console.log or arrow functions)
Curriculum
All
32 lectures ∙ (3hr 20min)
Published:
Last updated:
Reviews
All
11 reviews
4.5
11 reviews
sftblwReviews 3
∙
Average Rating 4.7
5
44% enrolled- Editing: ★★★★★ 5.0 Artistic. Excellent level that goes without saying - Description: ★★★★☆ 4.5 Excellent. There are some parts where the quality of the concept explanation is lacking or rushed, but it does not miss out on going over the concept itself, and the lacking parts are covered with editing. - Self-directedness: ★★★★☆ 4.5 Excellent. At the end of each lecture, an assignment is given, and the correct answer is shown in the next lecture, so you can review it. It is well organized to fit the single purpose of creating a blog. - Lecture target selection: ★★★★_ 4.0 It is a bit disappointing. It seems that the target is considered to be beginners, but there are some parts where the concept explanation is subtly lacking. If you already know similar concepts, you can move on smoothly. - Recommended candidates: People who have experience using JavaScript in the workplace but have never used Vue.js; People who have used other UI frameworks and want to learn Vue.js; Beginner learners who are confident that they can learn concepts they do not understand by searching or asking the instructor; Employees of Inflearn Business member companies who need to use the course quickly in practice but find the official documentation too long to read it one by one
- urco129524
Reviews 1
∙
Average Rating 5.0
- cuhexa0754
Reviews 2
∙
Average Rating 5.0
5
100% enrolledIt's great that the course is well-organized and runs according to the curriculum, from course planning to execution. It's not a course where you just show off your knowledge and the lecture is cut off if you make a mistake, but it's a great course that doesn't leave out even the smallest animation effects. In particular, it was great that it didn't just install with the npm package, but explained the basic principles and npm methods separately. This person's course is something I want to listen to again even if other information comes up.
- guizan6111
Reviews 1
∙
Average Rating 5.0
5
31% enrolledThank you for explaining the difficult coding-related terms and content to non-majors in a really easy-to-understand way! I needed to study development in these difficult times when job preparation is difficult, and this lecture was just right for me. I'll listen to the next lecture when it comes out (I think you have a nice voice)
- neeunbox3114
Reviews 1
∙
Average Rating 5.0
Limited time deal ends in 8 days
$15,400.00
30%
$17.60
Similar courses
Explore other courses in the same field!
![Planner, how about learning this level of web development? [Theory + Practice]강의 썸네일](https://cdn.inflearn.com/public/courses/333579/cover/5bfdb903-721c-4e32-803b-ed0d4cfc28b7/333579.png?f=avif&w=420)
