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.
Vue3 basic concepts (reactivity, data binding, components, etc.)
How to develop a Composition API
Importing Notion data via the vue-notion package
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!
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!
Before we begin, let's cover what you need to install and set up on your computer.
Install Chrome , Vue.js Devtools , VSCode , and Node.js , which are required for development.
For those who are unfamiliar with Visual Studio Code, I will explain briefly how to use it.
Install extensions that are good to use while using VSCode .
Covers how to download files containing example code .
We're starting to get into the Vue.js syntax in earnest.
To help you understand, we'll proceed with just one HTML file.
To get started with Vue, we'll learn how to call the createApp function and create an app.
We will cover components , which are a core concept in Vue.js.
Learn data binding to draw HTML more efficiently within components .
We cover the concept of reactivity, which is necessary to create a more dynamic web through interaction.
We'll cover directives that allow you to work with HTML elements in various ways within your components.
We will learn about v-bind , which can be used to data bind properties !
Let's cover how to create tags repeatedly using v-for .
You can make tags appear or disappear depending on conditions using v-if or v-show .
We'll cover v-on , which helps you handle events in tags.
We'll cover v-model , which allows you to bind data to input forms that users can change through interaction .
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.
We will compare reactive and ref , which are reactive objects, and discuss how they differ.
We'll cover computed , which uses reactive objects to create another value.
We'll cover Watchers , which allow you to perform additional tasks based on changes in reactive objects.
Let's create a component file (.vue) and delve into components in more depth.
A vue file that allows you to utilize components more, Single File Component !!
Learn how to create a project that's perfect for Vue development using npm .
Script setup to use scripts more efficiently
Style scoped, which applies style only within the component
Learn about Life Cycle Hooks , which allow you to perform specific tasks as components are created and destroyed .
Let's manipulate the DOM using ref in the template!
Asynchronous components that call the required components from the server asynchronously.
Learn about dynamic components , which allow you to draw components dynamically.
Learn how to use Notion as an editor, like a blog.
For those who are unfamiliar with Notion , we cover everything from signing up to simple usage !
Learn how to import Notion data using the vue-notion package .
Covers various ways to pass data between components.
Learn about Props , which pass data from parent components to child components.
Learn about Emits , which pass events from child components to parent components.
We will cover Provide and Inject , which allow you to pass data from a parent component to a deep child component.
Let's learn how to handle the properties placed in a component through attrs .
Learn how to use v-model in your components .
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❗️
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)
All
32 lectures ∙ (3hr 20min)
All
9 reviews
4.9
9 reviews
Reviews 3
∙
Average Rating 4.7
5
- 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.
Reviews 1
∙
Average Rating 5.0
Reviews 2
∙
Average Rating 5.0
5
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.
Reviews 1
∙
Average Rating 5.0
5
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)
Reviews 1
∙
Average Rating 5.0
$17.60
Explore other courses in the same field!
![Planner, học phát triển web ở cấp độ này thì sao? [Lý thuyết + Thực hành]강의 썸네일](https://cdn.inflearn.com/public/courses/333579/cover/5bfdb903-721c-4e32-803b-ed0d4cfc28b7/333579.png?f=avif&w=420)
