Login Get started

Vue.js Course for Beginners [2021 Tutorial]

freeCodeCamp.org・145 minutes read

Professional software developer Gwen Faraday offers a new Vue.js course for beginners, highlighting the framework's efficiency, lightweight design, and ease of use for web development. The course covers essential Vue.js features like directives, components, form handling, loops, lifecycle hooks, and project setup, aiming to equip learners with practical skills and knowledge for building dynamic web applications.

Insights

Vue.js is a lightweight, virtual Dom framework for building dynamic websites and apps efficiently.
Vue.js allows for incremental adoption, making it adaptable for small features or large-scale applications.
Vue.js was created by Evan You in 2013, with continuous updates and improvements to related libraries.
Directives like "v-show" and "v-model" in Vue.js facilitate conditional rendering and data binding with ease.
Lifecycle hooks in Vue.js offer specific points for executing functions, aiding in tasks like data fetching and authorization checks.

Get key ideas from YouTube videos. It’s free

Recent questions

What is Vue js?
Vue js is a JavaScript framework for building dynamic websites and apps.
Who created Vue js?
Vue js was created by Evan You in 2013.
How can I start using Vue?
To start using Vue, import the library from v3.vuejs.org, use the create app method, and connect JavaScript with HTML using directives like v model and v if.
What are Vue directives?
Vue directives like v-show, v-else-if, and v-else are used for conditional rendering and toggling elements in web applications.
What is a computed function in Vue?
A computed function in Vue runs getter and setter functions for variable changes.

Related videos

Summary

00:00

"Vue js: Fast, Lightweight, Progressive Web Development"

Gwendolyn Farraday is a professional software developer with over five years of experience in various languages and frameworks.
She specializes in Vue js and offers a new full Vue course for absolute beginners.
Vue js is a JavaScript framework for building faster and more dynamic websites and apps.
Vue js is a virtual Dom framework, making JavaScript web applications faster and more efficient.
Vue is lightweight, with a size of about 8-10 kilobytes when zipped.
Vue is a progressive framework, adaptable for small features or large-scale applications.
Vue allows incremental adoption, making it easy to update legacy applications page by page.
The Vue project was started in 2013 by Evan You, with version two launching in 2014 and gaining popularity worldwide.
Vue version three was released in fall 2020, with continuous updates to related libraries like vcli, Vue router, and Vue x.
To start using Vue, import the library from v3.vuejs.org, use the create app method, and connect JavaScript with HTML using directives like v model and v if.

15:54

Vue Directives and Methods for Dynamic Rendering

To display a loading spinner, set a variable to true initially.
Once the page loads, set the variable to false and remove the spinner from the DOM.
The "v-show" directive is useful for toggling elements frequently without adding/removing them from the DOM.
"v-show" changes CSS properties like display from none to block, making it more performant.
Other directives like "v-else-if" and "v-else" can be chained to "v-show" for conditional rendering.
Using these directives functions like a regular if-else statement, rendering elements based on conditions.
To prevent initial rendering flickers, use "v-cloak" to hide elements until the Vue application is fully loaded.
"v-cloak" is set to display none initially and removed once the app is ready, preventing flickering.
Events in Vue can be handled using the "v-on" directive, listening for actions like clicks or key presses.
Methods can be defined in Vue components to handle more complex actions, like toggling elements or logging data.

31:09

Creating Custom Forms in Vue Components

To create a form in HTML, one can use a form tag directly in the HTML or create a custom form as a Vue component.
Defining a custom form as a Vue component involves naming the component, providing an options object, and defining a template using graves for multi-line HTML.
The template for the custom form component can include various elements like divs and inputs, with specific types like email and password.
Styling the form inputs can be done by adding CSS properties like margin and display to make them visually appealing.
Adding a data method to the component allows for defining variables like a title, which can be displayed in the template using interpolation.
To handle form submission, an event listener for submit can be added, along with a method like handle Submit that logs a message when the form is submitted.
Preventing the default form submission behavior of refreshing the page can be achieved by using event modifiers like prevent.
Using v-model directives in the template allows for binding form input values to variables like email and password, which can be logged or used for further processing.
Components can be composed by creating custom input components for form fields, passing data between parent and child components using props, and utilizing v-bind to pass variables.
When passing variables as props to child components, using v-bind or its shortcut colon is essential to ensure proper data binding and synchronization between components.

47:58

"Efficient Data Handling in Vue Components"

The process involves using a handle submit function to access a form.
Different methods are available for capturing variable values from child to parent components.
The computed object is introduced to run getter and setter functions for variable changes.
The v-model is directly created on the custom component to link variables like email and password.
The model value prop is accepted in the child component to retrieve values from the parent.
The emit method is used to pass data between components via events like the update event.
The v-model shorthand listens for events like update from the child component to update parent variables.
Loops are introduced to simplify the process of handling multiple components like custom inputs.
A key prop is essential in loops to uniquely identify elements and prevent bugs.
Objects containing label, value, and type are utilized in the loop to manage input data efficiently.

01:03:59

Vue.js Component Updates and Lifecycle Management

To update a child component in Vue.js, the 'type' prop needs to be added and bound using V-bind to refer to the prop passed in from the parent component.
In handling loops in Vue.js, the V-for directive can be used on regular HTML elements or custom components, like card components commonly seen on websites like Pinterest.
Lifecycle hooks in Vue.js are functions triggered at specific points in a component's lifecycle, such as before creation, mounted, updated, and before destroy.
The Vue.js documentation provides a lifecycle diagram detailing the instance lifecycle of Vue components, with hooks like before create, created, before mount, mounted, before update, updated, before unmount, and unmounted.
Lifecycle hooks can be used for various purposes, such as authorization checks, data fetching, event initialization, and cleanup before component unmounting.
A demo application in Vue.js involves starting with a static HTML and CSS setup, gradually integrating Vue.js features to understand its implementation in real-world applications.
The package.json file in a Vue.js project contains metadata and scripts for starting a server to compile styles and serve the application.
The source directory in a Vue.js project houses JavaScript code, including the main HTML file for the application and links to Vue pages.
To work with Vue.js in an application, scripts importing Vue.js and creating Vue instances are added to update and interact with components like cards for quantity updates and cart functionality.
The goal of integrating Vue.js into an application is to transition from coding within HTML to utilizing Vue CLI setup with tools like Webpack, Vuex, and Vue Router for a comprehensive Vue.js ecosystem.

01:19:46

"Tracking Inventory and Sidebar in Vue.js"

The text discusses creating a data method to track inventory in a Vue.js application.
Inventory is initialized with zero quantities for carrots, pineapples, and cherries.
The text explains how to use v-model to connect input fields to inventory items.
An Add To Cart method is created to update the cart with selected items and quantities.
The method increments the quantity of selected items in the cart.
A button is connected to the Add To Cart method to update the cart.
A modifier, v-model.number, is used to ensure input values are treated as numbers.
The text then transitions to integrating a sidebar component in the Vue.js application.
The sidebar component is registered and added to the main Vue application.
Functionality is added to toggle the sidebar's visibility using a button and an 'x' close button.

01:36:39

"Dynamic Cart Total Calculation in Vue.js"

The component is named "cart" and deals with a cart object containing carrots.
The number of carrots in the cart is displayed using the double mustache syntax.
The cart's quantity dynamically updates as carrots are added.
The total price for the carrots is calculated as the price per carrot multiplied by the quantity.
An error occurs due to a syntax issue with the dollar sign in JavaScript.
Escaping the dollar sign resolves the error, allowing for proper parsing of the template string.
A computed function named "cart total" is created to calculate the total cost of all items in the cart.
The computed function updates the total amount every time the quantity changes.
The inventory of various groceries is fetched from a JSON file using Vue.js lifecycle hooks.
The fetched data is displayed on the page, with the first three items shown dynamically.

01:53:45

Troubleshooting and Enhancing Shopping Cart Functionality

The index needs to be passed in for the function to work correctly.
Debugging involves using console.log to check the values being passed into the function.
An issue arises from trying to add to a cart name that has no value yet.
To resolve the issue, a check is added to set the cart name to zero if it doesn't exist.
The sidebar needs to display more information than just the number of items in the cart.
To make the sidebar dynamic, the inventory needs to be passed in along with the cart.
Looping through all items in the cart is necessary to display their information in the sidebar.
A helper method is created to find the price of an item in the inventory.
The total needs to be dynamically calculated based on the quantity and price of items in the cart.
The delete function for removing items from the cart needs to be implemented in the parent component.

02:10:41

Creating Dynamic Vue JS Single-Page Applications

To change a component, a remove item function needs to be passed in.
The remove item function must be created as a method, taking the item name to remove it from the cart.
Initially, the remove item function did not work due to it not being recognized as a function.
Renaming the function in the child component resolved the issue for the CDN setup.
The total quantity in the cart needed to be dynamic, achieved by creating a computed object summing up all quantities.
Moving Vue JS code outside the app.html file was necessary for multi-page functionality.
Extracting code into separate JavaScript files allowed for reusability across different pages.
Local storage can be used to persist data across page refreshes in the browser.
Creating a single-page application with Vue JS for seamless navigation and data sharing is recommended.
Using Vue CLI simplifies project setup and management for robust single-page applications.

02:28:01

Creating Vue Projects with Vue CLI

To create a project using Vue, use the command "Vue create" followed by the project name.
The Vue create command allows for customization of project options and package selection.
Custom options can be created, while Vue provides default options for version two and version three.
Features like Vue version selection, Babel setup, routing, state management, CSS preprocessors, linting, and formatting can be chosen during project setup.
The project setup includes selecting Vue version, router mode, linter and formatter, and saving configurations.
The Vue project structure includes folders and files created by Vue CLI, with a main.js file for setting up the project.
The Vue CLI provides commands like "serve" for local development and "build" for generating production-ready files.
The Vue project structure includes components like router-link for single-page application routing and router-view for page content.
Routing in Vue involves creating routes in the router index.js file and defining components for each route.
Components in Vue projects are organized into the "views" folder for router-connected pages and the "components" folder for reusable components.

02:44:20

"Setting up Vue Router and Components"

Original code involves accessing the source and app.html files.
The header needs to be copied and pasted into a new file for app-wide navigation.
Anchor tags in the header need to be changed to Vue router link tags.
Routes need to be set up in the router linked to components.
Components for home, products, and past orders need to be created.
Vue files have a custom extension, .Vue, for combining HTML, JavaScript, and CSS.
Styles can be added directly inside Vue components or imported globally.
Sass files can be imported into Vue projects with the necessary loaders.
Images referenced in Sass files need to be placed in the project directory.
Content from the original application, like inventory items, can be imported into Vue components.

03:03:02

"Troubleshooting and Implementing Components in Vue"

The banner displays correctly, and the recommended Products section is visible at the bottom.
The Products page is set up similarly to another app but rewritten in a component structure.
The main sections for past orders and products are copied into the code.
The pages are hard-coded, needing dynamic changes later.
The past orders page has an error due to a missing closing tag for the icon.
Certain tags like IMG and I need to be self-closing to fix errors.
The sidebar logic from the original application needs to be added to the new Vue application.
The sidebar component is moved to a components folder and imported globally.
Functions and data need to be passed between components for the sidebar to function correctly.
The add to cart functionality needs to be implemented to display items in the sidebar.

03:21:07

"Fixing 'Add to Cart' Error in Vue.js"

Error occurs when clicking "Add to Cart" button due to function not defined in homepage component
Function is defined in app.vue file under methods as "Add To Cart"
Need to pass the function into homepage component through router
Function should be received as a prop in homepage component
Function successfully passed through router Vue, allowing it to work in homepage
Escaping characters used in regular JavaScript not needed in Vue.js template
Data sharing in simple applications involves passing variables from parent component to children
More complex applications may require a robust state management system like VueX
Creation of a separate component for product cards to be shared across the application
Product card component created with props for product information and index, ensuring proper functionality

03:39:43

Connect with Gwen Faraday for course feedback.

Contact Gwen Faraday for feedback, comments, or questions about the course on Twitter or Faraday Academy.
Gwen Faraday can be found online under the name Gwen Faraday.
Encouragement to have a great day and anticipation of seeing participants in the next course.

Try it yourself — It’s free.