Introduction to VueJS
This course provides a comprehensive introduction to the landscape of modern User Interface (UI) frameworks, exploring the uses and capabilities of popular choices such as ReactJS, Angular, and VueJS. You will gain an understanding of the key distinctions between leading frameworks like ReactJS and Angular, laying the groundwork for informed technology selection in your projects.
The course then transitions into a focused, hands-on exploration of VueJS, a progressive JavaScript framework known for its ease of use and flexibility. You will begin by grasping the fundamental concepts and syntax of VueJS, enabling you to start building interactive web interfaces quickly.
A core aspect of frontend development is handling user interactions and dynamically updating the user interface. This course will teach you how to effectively listen to various DOM (Document Object Model) events within VueJS and how to respond to these events by updating your application's data. You will also master the concept of two-way data binding in VueJS, which simplifies the synchronization of data between your application's logic and the HTML elements displayed to the user.
Furthermore, you will learn how to efficiently render lists of data dynamically in your VueJS templates, allowing you to display collections of information in a structured and maintainable way. You will also gain proficiency in outputting content conditionally based on your application's state, enabling you to create dynamic and contextaware user experiences.
Beyond displaying data, this course will equip you with the skills to manipulate data within your VueJS applications, covering how to update and delete existing data entries in response to user actions or other events. You will also learn how to interact with backend services by sending POST HTTP requests from your VueJS applications, enabling you to submit data to a server.
Finally, the course covers essential techniques for handling asynchronous operations, specifically focusing on loading data from external sources and managing different loading states within your VueJS components to provide clear feedback to the user. You will also explore various methods for integrating VueJS into your projects and learn how to send more advanced HTTP requests, including PATCH and DELETE, to fully interact with RESTful APIs.
By the end of this course, you will have a solid understanding of the
modern front-end framework ecosystem and possess practical skills in
building interactive and dynamic web applications using VueJS,
equipped to handle user interactions, manage data, communicate with
backend services, and provide a seamless user experience.
Content
- Introduction to the uses of different User Interfaces Framework such as: ReactJS, Angular, VueJS etc...
- Differences between ReactJS and Angular.
- Introduction to VueJS.
- Listening to events and updating data using VueJS.
- Two-way binding in Vue JS. Outputting List of data using VueJS.
- Outputting content conditionally using VueJS.
- Updating, deleting data using VueJS.
- Sending post HTTP requests using VueJS
- Loading data and Managing loading states in VueJS.
- Loading Vue differently.
- Sending PATCH + Delete requests in VueJS.
Learning Outcomes
Upon completion of this course, participants will be able to:
- Identify and describe the common uses of popular User Interface (UI) frameworks such as ReactJS, Angular, and VueJS.
- Distinguish the key differences between ReactJS and Angular in terms of architecture and development paradigms.
- Understand the fundamental concepts and syntax of the VueJS framework.
- Implement event listeners in VueJS to trigger data updates.
- Utilize two-way data binding in VueJS to synchronize data between the template and the component.
- Render lists of data dynamically in VueJS applications.
- Control the visibility of content in VueJS templates based on conditions.
- Implement functionality to update and delete data within VueJS applications.
- Send POST HTTP requests from VueJS applications to interact with backend services.
- Load data from external sources and manage different loading states within VueJS components.
- Employ various methods for loading VueJS into a project.
- Send PATCH and DELETE HTTP requests from VueJS
applications.
Training Method
This course will follow problem-solving techniques. In addition to the interactive learning approach, participants will be guided towards adopting best practices.
Additional Information
This course is part of the Learning Track Full Stack Web Development.Certification
Participation OnlyPrerequisites
A strong understanding of JavaScript, NodeJS and ExpressJS is required.
Planning and location
10:00 - 16:00
10:00 - 16:00
10:00 - 16:00
10:00 - 16:00
Learning Track
This course is part of the following learning track(s) and can be booked as a stand-alone training or as part of a whole:
ESCO Skills
ESCO Occupations
Your trainer(s) for this course
