Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Learning Vue.js by Picking Out the Essentials

Vue.JS is essential for frontend beginners!! We'll delve into Vue.JS from the basics to the advanced levels!

(5.0) 4 đánh giá

73 học viên

  • sucoding
실습 중심
Vue.js
Vue 3
pinia

Dịch cái này sang tiếng Việt

  • The entire Vue 2 syntax.

  • Vue 3 basic concepts (Vue instance, template syntax, data binding)

  • How to use Composition API (reactive, ref, computed, watch)

  • Vue Router configuration and routing

  • Pinia state management

  • Vue 3's reactivity system

  • Component Design and Data Transfer (Props, Emits, Slots)

  • How to use Vue 3 lifecycle hooks

  • Composition API vs Options API

  • Communication with Server (Axios, Fetch, async/await)

  • Application performance optimization

  • Building and deploying a Vue app

Vue.JS rất dễ hiểu ngay cả với những người không chuyên!!
🛩 Giai đoạn 4 của loạt lộ trình front-end của Sucoding! 🛩

Sách bán chạy nhất trong Vue.js Giới thiệu

Khóa học trực tuyến Sucoding đã được xuất bản dưới dạng sách!

2024 『Tự học lập trình Vue.JS』 đã được xuất bản! 🎉

Khóa học trực tuyến Sucoding cũng đã được xuất bản dưới dạng sách.
Nó chưa bao giờ tụt khỏi vị trí dẫn đầu kể từ khi ra mắt.
Đây là sản phẩm bán chạy nhất trong danh mục giới thiệu về Vue 3. 😎
Nếu bạn đọc nó cùng với sách thì hiệu quả sẽ tăng lên gấp nhiều lần.

mua

Tôi tò mò

Bạn học được gì?

Trong Vue.js, bạn sẽ học các tính năng cốt lõi để triển khai các trang web động . Vue là một khuôn khổ mạnh mẽ cho phép phát triển giao diện người dùng phản ứngdựa trên thành phần vốn khó có thể triển khai chỉ bằng JavaScript. Tuy nhiên, việc học và thành thạo tất cả các tính năng của Vue cùng một lúc có thể hơi khó khăn.

Trong khóa học này, chúng ta sẽ chỉ tìm hiểu những tính năng cốt lõi của Vue.js thường được sử dụng trong thực tế. Chúng tôi mạnh dạn loại trừ các tính năng phức tạp hoặc ít khi sử dụng và tập trung vào các phần thường được sử dụng trong các ứng dụng web thực tế, chẳng hạn như thành phần cấu thành , liên kết dữ liệu hai chiều , Vue Routerpinia .

Nhờ đó, ngay cả người mới bắt đầu cũng có thể học các khái niệm và công nghệ cốt lõi của Vue.js một cách dễ dàng và hiệu quả, đồng thời có được các kỹ năng phát triển front-end có thể áp dụng ngay vào thực tế.

Ngay cả người mới bắt đầu cũng được chào đón,

Tôi sẽ hướng dẫn bạn mọi thứ theo từng bước, bắt đầu từ những điều cơ bản.

Tôi sẽ hướng dẫn bạn mọi thứ theo từng bước, bắt đầu từ những điều cơ bản.

Vue.js là một trong những công nghệ quan trọng nhất trong phát triển front-end, nhưng
Đối với người mới bắt đầu, lúc đầu có thể hơi khó khăn một chút.
Nhưng đừng lo lắng!

Để bạn có thể xây dựng một nền tảng vững chắc từ mặt đất lên ,
Chúng tôi sẽ giải thích mọi thứ một cách cẩn thận và tử tế .

Để ngay cả người mới bắt đầu cũng có thể học một cách tự tin
Chúng tôi sẽ hướng dẫn bạn qua các ví dụ và bài tập dễ hiểu ! 🚀

Tìm hiểu từng khái niệm cốt lõi của Vue.js,
Học các kỹ thuật tự nhiên có thể áp dụng vào các ứng dụng web thực tế !

Chỉ dành cho bài giảng Sucoding
Điểm đặc biệt

Chương trình giảng dạy tập trung vào cốt lõi được tối ưu hóa cho thực hành

  • Chúng tôi đã giản lược các lý thuyết phức tạp và chỉ chọn những tính năng Vue 3 thường được sử dụng trong các dự án thực tế .

  • Học các kỹ năng thực hành như phát triển dựa trên thành phần, quản lý dữ liệu phản ứng, bộ định tuyến và quản lý trạng thái.

Giải thích trực quan và bài giảng thực hành để giúp bạn hiểu

  • Chúng tôi giải thích các khái niệm từng bước để ngay cả người mới bắt đầu sử dụng Vue.js cũng có thể dễ dàng hiểu được và bạn có thể học theo cách ví dụ → thực hành .

  • Đây là khóa học thực hành giúp bạn học cách lập trình , giúp bạn áp dụng lý thuyết trực tiếp vào cuộc sống thực.

Làm chủ API sáng tác

  • Bằng cách tìm hiểu sâu về Composition API , cốt lõi của Vue 3, bạn có thể học cách viết code sạch hơn và hiệu quả hơn .

  • Chúng ta cũng sẽ tìm hiểu bằng cách so sánh rõ ràng sự khác biệt với API Tùy chọn hiện có.

Học Vue.js với các dự án thực tế

  • Tìm hiểu cách sử dụng Vue bằng cách phát triển các ứng dụng web thực tế , không chỉ bằng cách thực hành mã đơn giản.

  • Bạn có thể phát triển các kỹ năng thực tế thông qua nhiều dự án nhỏ như danh sách việc cần làm, bảng thông báo và SPA.

Chúng tôi hào phóng chia sẻ những mẹo thực tế và bí quyết của nhà phát triển.

  • Chúng tôi sẽ dạy bạn những mẹo thực tế từ các nhà phát triển không có trong sách giáo khoa, cũng như các cách cải thiện hiệu quả công việc .

  • Ngoài JavaScript, nó còn cung cấp định hướng để phát triển thành một nhà phát triển front-end .

Phản hồi tùy chỉnh của học sinh và hỗ trợ Hỏi & Đáp chi tiết

  • Cung cấp phản hồi nhanh chóng và thân thiện cho các câu hỏi của sinh viên.

  • Nó chỉ ra những lỗi thường gặp và những phần khó hiểu và tối đa hóa hiệu quả học tập của mỗi cá nhân.

Đợi đã!

Bạn có biết rằng ngay cả trong các bài giảng cũng có một 'nút thắt' phù hợp với tôi không?

Cũng giống như một trò chơi tuyệt vời mà mọi người đều biết có thể không vui đối với tôi ,
Bài giảng không giống nhau đối với mọi người.

Cho dù bài giảng có được khen ngợi nhiều đến đâu thì nó cũng có thể không phù hợp với tôi .
Ngược lại, một bài giảng bình thường với người khác có thể lại là bài giảng hay nhất với tôi .

Vì vậy, ít nhất 10% trong số tất cả các bài giảng của tôi là miễn phí .
Hãy tự mình lắng nghe và xem liệu nó có 'phù hợp' với bạn và phong cách của bạn không !

Nếu bạn và tôi hòa hợp với nhau,
Hãy để tôi chỉ cho bạn con đường nhanh nhất để trở thành một nhà phát triển front-end .
Hãy tin tưởng và theo tôi! 🚀

Trong bài giảng này chúng ta sẽ tạo ra
Nhiều dự án thực tế khác nhau

tính toán & xem
Đếm số lượng ký tự trong một người


Bằng cách sử dụng computedwatch , đây là những tính năng cốt lõi của Vue 3,
Tôi sẽ thử sao chép và mã hóa chức năng đếm ký tự được sử dụng trên trang Saramin .

  • Tính toán số ký tự được nhập vào theo thời gian thực bằng cách sử dụng tính toán ,

  • Sử dụng watch để phát hiện hiệu quả những thay đổi trong dữ liệu đầu vào của người dùng.

Trong khi triển khai các chức năng được sử dụng trong thực tế như chúng vốn có,
Tìm hiểu các khái niệm về xử lý dữ liệu phản ứng một cách dễ dàng và rõ ràng! 🚀

thành phần
Tự động hoàn thành các thuật ngữ tìm kiếm

Bằng cách sử dụng thành phần, là khái niệm cốt lõi của Vue 3,
Hãy triển khai tính năng tự động hoàn thành cho các thuật ngữ tìm kiếm thường dùng trong các dịch vụ công cụ tìm kiếm .

  • Quản lý hộp tìm kiếm và danh sách tự động hoàn thành hiệu quả thông qua việc phân tách thành phần .

  • Tìm hiểu cách truyền dữ liệu tự nhiên giữa các thành phần bằng cách sử dụng propsemit .

  • Triển khai giao diện người dùng tương tác phản hồi nhanh chóng với dữ liệu đầu vào của người dùng bằng cách hiển thị dữ liệu theo thời gian thực !

Tạo một hàm có thể sử dụng ngay trong thực tế
Bạn có thể học cách sử dụng các thành phần Vue và phương pháp phát triển có cấu trúc . 🚀

Thành phần sâu hơn
Giao diện menu tab

Bằng cách tận dụng khái niệm về các thành phần động trong Vue 3,
Hãy triển khai giao diện menu tab giúp nâng cao trải nghiệm của người dùng .

  • Quản lý hiệu quả nhiều nội dung tab với tính năng chuyển đổi thành phần động .

  • Tìm hiểu cách kết xuất thành phần linh hoạt bằng v-bind và thuộc tính is .

  • Thực hiện chuyển đổi tự nhiên giữa các tab với quản lý trạng tháixử lý sự kiện .

Khóa học này sẽ hướng dẫn bạn cách tạo giao diện người dùng phức tạp từ các thành phần có thể tái sử dụng và mở rộng . 🚀

Ứng dụng quản lý việc cần làm
Danh sách việc cần làm


Bằng cách tận dụng tất cả các khái niệm và kỹ thuật đã học trong Vue 3,
Hãy cùng tạo ứng dụng Todo List chất lượng cao của riêng mình.

  • Quản lý hiệu quả khả năng thêm, xóa và sửa đổi tác vụ thông qua việc phân tách thành phần .

  • Triển khai giao diện người dùng phản ứng với những thay đổi trạng thái theo thời gian thực bằng Reactive Data Binding .

  • Tìm hiểu cách quản lý trạng thái và luồng dữ liệu một cách tự nhiên bằng cách sử dụng computed, watch và v-model .

  • Triển khai lưu trữ dữ liệu vĩnh viễn bằng bộ nhớ cục bộ !

Dự án này tích hợp các tính năng cốt lõi của Vue theo cách thực tế ,
Bạn có thể phát triển các năng lực phát triển có thể sử dụng ngay trong thực tế . 🚀

Xác thực
Xác thực và ủy quyền

Hiểu rõ các khái niệm về xác thựcủy quyền , đây là các chức năng cốt lõi của ứng dụng web.
Hãy triển khai chức năng đăng nhập an toàn bằng cách sử dụng **JWT (Json Web Token)**.

  • Phân biệt rõ ràng giữa xác thực và ủy quyền thông qua lý thuyết và thực hành.

  • Tìm hiểu logic đăng nhập có tính bảo mật cao thông qua quy trình xác minh và phát hành mã thông báo JWT .

  • Chúng ta sẽ thực hành cách lưu trữ và quản lý token (LocalStorage, SessionStorage) .

  • Tìm hiểu cách giữ thông tin người dùng an toàn sau khi đăng nhập và kiểm soát quyền truy cập dựa trên quyền .

Thông qua khóa học này, bạn sẽ có được kinh nghiệm thực tế với các khái niệm xác thực và ủy quyền cần thiết dành cho các nhà phát triển front-end .
Bạn sẽ học được các phương pháp quản lý người dùng an toàn và hiệu quả . 🚀

Bộ phim
Ứng dụng phim 🎬

Bằng cách tận dụng tất cả các khái niệm và công nghệ của Vue 3 mà chúng ta đã học cho đến nay,
Hãy cùng tạo ứng dụng web cung cấp thông tin về phim .

  • Tận dụng API phim bên ngoài để truy xuất và hiển thị dữ liệu phim theo thời gian thực.

  • Cấu trúc dựa trên thành phần quản lý hiệu quả danh sách phim, thông tin chi tiết, chức năng tìm kiếm, v.v.

  • Kiểm soát luồng dữ liệu bằng các yêu cầu API và xử lý không đồng bộ bằng Axios .

  • Bạn sẽ triển khai chức năng chuyển đổi trang bằng Vue Router và trải nghiệm định tuyến động .

  • Cung cấp trải nghiệm người dùng (UX) thực tế thông qua giao diện người dùng (UI) phản hồi nhanhquản lý trạng thái .

Dự án này tích hợp các tính năng cốt lõi của Vue 3 ,
Bạn có thể phát triển các kỹ năng phát triển ứng dụng dựa trên API cùng với kinh nghiệm phát triển thực tế . 🚀

Những câu hỏi thường gặp

H. Tôi là người mới bắt đầu và thực sự không biết gì cả. Như vậy được không?
A. Có. Thực sự ổn thôi. Đây là khóa học được thiết kế riêng để ngay cả những người không biết gì cũng có thể học được.

H. Tôi đã mua một cuốn sách. Tôi có cần phải mua các khóa học trực tuyến không?
A. Nếu bạn đã mua sách, chúng tôi khuyên bạn nên mua thêm. Ngoài ra, sách còn đề cập đến nhiều nội dung không có trong sách.

H. Có cần phải có kiến ​​thức trước không?

A. Có, khóa học này yêu cầu bạn phải có kiến ​​thức trước về HTML5/CSS3/JavaScript.

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành

  • Hệ điều hành và Phiên bản (OS): Windows, macOS

  • Công cụ sử dụng: Visual Studio Code, Chrome

  • Thông số kỹ thuật của PC: Cấu hình tối thiểu cho phép lướt web cũng được chấp nhận.

Tài liệu học tập

  • Chúng tôi cung cấp tài liệu học tập cho mỗi bài giảng để giúp bạn tiến bộ trong quá trình đào tạo thực hành.


Kiến thức và ghi chú của người chơi

  • Những người không chuyên ngành và người mới bắt đầu cũng có thể tham gia khóa học

  • Tuy nhiên, bạn phải học HTML5/CSS3/JavaScript trước.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Someone who has never studied View

  • Someone who has tried to study Vue, but given up every time

  • Someone who needs to build a service right away using Vue.

  • Someone who wants to learn simply and easily, without complicated explanations.

Cần biết trước khi bắt đầu?

  • HTML/CSS

  • JavaScript

Xin chào
Đây là

4,370

Học viên

202

Đánh giá

74

Trả lời

4.9

Xếp hạng

7

Các khóa học

수코딩은 온라인과 오프라인을 병행하면서
코딩을 가르치는 활동을 하고 있습니다.

다년간의 오프라인 강의 경험을 바탕으로,
더 많은 사람들이 코딩을 쉽고 재미있게 배울 수 있도록
매일 고민하고, 끊임없이 노력하고 있습니다.

현재까지 다음과 같은 3권의 책을 출판하며
프런트엔드 강의 분야를 선도하고 있습니다:

또한, 유튜브 채널을 통해 다양한 무료 강의도 제공하고 있습니다.
👇 지금 바로 방문해 보세요
[유튜브 채널 링크]

Chương trình giảng dạy

Tất cả

229 bài giảng ∙ (23giờ 32phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

4 đánh giá

5.0

4 đánh giá

  • beauvy11134101님의 프로필 이미지
    beauvy11134101

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • sucoding
      Giảng viên

      こんにちは beauvy1113様! 良い評価ありがとうございます :) 良い一日を!!

  • hyeju54324508님의 프로필 이미지
    hyeju54324508

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    34% đã tham gia

    初めて講義を聞く人にも理解できるように、本当にお上手だと思います! 他の講義(例えばnext.js)がアップロードされたら、ぜひ聞きたいです... カリキュラムも非常に充実していて、勉強するのにとても良いです!!

    • sucoding
      Giảng viên

      わあ、こんなに丁寧なフィードバック、本当にありがとうございます! 講義が初めての方にもお役に立てたとのこと、本当に嬉しいです😊 近日中にReact.JSの講義がオープンします! ご期待に応えられるよう、より充実した内容になるよう構成してみます💪 今後も良い学習となることを願っています!

  • hyeonajeong8233님의 프로필 이미지
    hyeonajeong8233

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • sucoding
      Giảng viên

      こんにちは hyeona.jeong様! 高評価ありがとうございます! より良い講義をお届けします。

  • pcdoomco8345님의 프로필 이미지
    pcdoomco8345

    Đánh giá 15

    Đánh giá trung bình 5.0

    5

    7% đã tham gia

    よく聞きますね〜

    • sucoding
      Giảng viên

      ありがとうございます!お役に立てれば幸いです:)

1.671.538 ₫

Khóa học khác của sucoding

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!