Home    Tutorials    Database Design & Development    VueJS Tutorial Full Course From Scratch

VueJS Tutorial Full Course From Scratch

 Admin0,

VueJS Tutorial Full Course From Scratch

VueJS is an open-source progressive JavaScript framework used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development. VueJS focuses on the view layer. It can be easily integrated into big projects for front-end development without any issues.

What you’ll learn

  • Vue JS – Full course from scratch (Introduction and installation).
  • Vue JS – Full course from scratch (Project Structure and Single File Components).
  • Vue JS – Full course from scratch (Binding Text,Binding HTML,Binding Classes).
  • Vue JS – Full course from scratch (Binding to Attributes, Binding Styles, v-bind Shorthand).
  • Vue JS – Full course from scratch (Conditional Rendering,List Rendering,Lists and Keys,Conditional List Rendering).
  • Vue JS – Full course from scratch (Methods,Event Handling,Form Handling,Modifiers).
  • Vue JS – Full course from scratch (Bonus Directives,Computed Properties vs Methods).
  • Vue JS – Full course from scratch (Watchers,Computed Properties and v-for,Computed Setter.).
  • Vue JS – Full course from scratch (Immediate and Deep Watchers,Components).
  • Vue JS – Full course from scratch (Component Props,Prop Types and Validations).
  • Vue JS – Full course from scratch (Non Prop Attributes,Provide and Inject,Component Events).
  • Vue JS – Full course from scratch (Validating Emitted Events,Components and v-model,Slots).
  • Vue JS – Full course from scratch (Named Slot,Slots Props,Component Styles).
  • Vue JS – Full course from scratch (Dynamic Components,Keeping Dynamic Components Alive).
  • Vue JS – Full course from scratch (Teleport Component,HTTP and Vue,HTTP GET Request).
  • Vue JS – Full course from scratch (HTTP POST Request,Lifecycle Hooks,GET Request on Page Load).
  • Vue JS – Full course from scratch (Template Refs,Reusability with Mixins,Composition API).
  • Vue JS – Full course from scratch (Replacing data with ref,Replacing data with reactive).
  • Vue JS – Full course from scratch (Reactivity and toRefs,Replacing methods,v-model and Composition API).
  • Vue JS – Full course from scratch (Replacing Computed Properties,Replacing Provide_Inject).
  • Vue JS – Full course from scratch (Template Refs and Composition API,Props and Composition API.).
  • Vue JS – Full course from scratch (Reusability with Composition API,Deploying Vue Applications).

Course Content

  • Introduction –> 63 lectures • 7hr 21min.

VueJS Tutorial Full Course From Scratch

Requirements

  • NodeJS and NPM.

VueJS is an open-source progressive JavaScript framework used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development. VueJS focuses on the view layer. It can be easily integrated into big projects for front-end development without any issues.

The installation for VueJS is very easy to start with. Any developer can easily understand and build interactive web interfaces in a matter of time. VueJS is created by Evan You, an ex-employee from Google. The first version of VueJS was released in Feb 2014. It recently has clocked to 64,828 stars on GitHub, making it very popular.

 

Features

 

Virtual DOM

VueJS makes use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead, a replica of the DOM is created which is present in the form of JavaScript data structures. Whenever any changes are to be made, they are made to the JavaScript data structures and the latter is compared with the original data structure. The final changes are then updated to the real DOM, which the user will see changes. This is good in terms of optimization, it is less expensive and the changes can be made at a faster rate.

 

Data Binding

The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of a binding directive called v-bind available with VueJS.

 

Components

Components are one of the important features of VueJS that helps create custom elements, which can be reused in HTML.

 

Event Handling

v-on is the attribute added to the DOM elements to listen to the events in VueJS.

 

Animation/Transition

VueJS provides various ways to apply a transition to HTML elements when they are added/updated or removed from the DOM. VueJS has a built-in transition component that needs to be wrapped around the element for the transition effect. We can easily add third party animation libraries and also add more interactivity to the interface

 

Computed Properties

This is one of the important features of VueJS. It helps to listen to the changes made to the UI elements and performs the necessary calculations. There is no need for additional coding for this.

Templates

VueJS provides HTML-based templates that bind the DOM with the Vue instance data. Vue compiles the templates into Virtual DOM Render functions. We can make use of the template of the render functions and to do so we have to replace the template with the render function.

 

Directives

VueJS has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and v-model, which are used to perform various actions on the frontend.

Watchers

Watchers are applied to data that changes. For example, form input elements. Here, we don’t have to add any additional events. Watcher takes care of handling any data changes making the code simple and fast.

Routing

Navigation between pages is performed with the help of vue-router.

 

Lightweight

VueJS script is very lightweight and the performance is also very fast.

Vue-CLI

VueJS can be installed at the command line using the vue-cli command line interface. It helps to build and compile the project easily using vue-cli.

Comparison with Other Frameworks

Now let us compare VueJS with other frameworks such as React, Angular, Ember, Knockout, and Polymer.

 

 

Get Tutorial