Vue.js Tutorial

VueJS is one of the greatest frameworks for JavaScript similar to ReactJS. The user interface layer is designed with VueJS, which is simple to learn for any developer. It can also be used with other libraries and extensions.

VueJS is the first choice in my opinion if you want to construct a single-page application. Because there are so many challenges in the development area that cannot be handled by utilizing a single library, VueJS is interoperable with different libraries, so you may easily use it. VueJS is supported by all major browsers, including Chrome, Firefox, Internet Explorer, Safari, and others. This library may easily be compared to your favorite libraries.

Vue.js Basics

• Introduction & Installation
• Instances
• Event Modifiers
• DOM tree
• How to write and use for loop in Vue js ?
• Two Way Binding Model
• Reusing Components
• Rendering
• List Rendering Mutation Methods
• v-cloak Directive
• Passing Data to Child Components with Props
• Form Input Binding with Select option
• Dynamic Components
• Form Input Value Binding
• Form Input Binding number Modifier
• List Rendering v-for with v-if
• List Rendering v-for with a Range
• Form Input Binding with Checkbox option
• Form Input Binding with Multiline text
• Form Input Binding trim Modifier
• Form Input Binding with Radio Option
• List Rendering v-for with an Object
• Render Function with h() Arguments
• Form Input Binding with Radio Option
• List Rendering v-for with an Object
• Composition API with Templates
• Event Handling
• Event Modifiers
• Declarative Rendering
• Create a Hover effect in Vue.js
• Types of data binding with template in Vue.js
• Click Event
• Dynamic Components
• Pass data between components using Vue.js Event Bus
• Passing Data to Child Components with Props
• Render Functions Component VNodes creation
• List Entering & Leaving Transitions
• Composition API using Provide
• Watchers
• Methods

Vue.js Directives

• v-on:keyup Directive
• v-bind Directive in Vue.js
• v-for Directive in Vue.js
• List Rendering v-for with a Range
• v-else-if Directive in Vue.js
• Custom Directives with Components
• Form Input Binding number Modifier
• Conditional Rendering
• List Rendering v-for with a Component
• List Rendering v-for on a <template>
• v-if directive
• v-text directive
• v-show directive
• v-html directive
• v-on:click directive
• v-once Directive
• v-on:click.ctrl Directive
• v-on:click.right Directive
• v-on:click.shift Directive
• v-on:click.left Directive
• v-on:click.middle Directive in Vue.js
• v-pre Directive

Vue.js Transition

• List Move Transitions
• Transitioning between the Components
• REST API Call to Get Location Details

Vue.js Routing

• Routing
• How to use routing in Vue.js ?

Advance

• Consuming a Rest API with Axios in Vue.js

Differences

• Node.js vs Vue.js
• What is the difference between ShadowDOM and VirtualDOM ?
• What is the difference between created and mounted event in VueJS?
• Comparative study of Svelte vs React vs Angular vs Vue
• What is the difference between one-way data flow and two-way data binding in vue.js?

Miscellaneous

• How to replace all occurrences of a string using Vue.js filters ?
• How to set a click event once a page or view is loaded in vue.js?
• How to check an image is loaded or not in VueJS ?
• How to loop through a list of elements and display it in VueJS ?
• How to Make localStorage Reactive in Vue.js ?
• How to implement DateTime localization in vue.js ?
• Select different values on two select tags in Vue.js
• How to convert a normal string to a uppercase string using filter in VueJS ?
• How to dynamically add or remove items from a list in Vue.js ?
• How to binding inline styles in Vue.js ?
• How to change text into lower case string using filters in Vue.js ?
• How to Add Custom Fonts in VueJS ?
• How to Trigger Watchers on Initialization in Vue.js ?
• How to replace jQuery with Vue.js ?
• How to catch props data on component change in Vue.js ?
• How to create a reporting app with Vue 3 and Composition API ?
• How to delete all occurrences of a particular string using Vue.js ?
• How to Toggle a Class in Vue.js ?
• How to Check Response Data Length in VueJS ?
• Why the component data must be a function in vue.js ?

Why Vue.js?

• Adaptability: It gives bother free migration, basic, and efficient structure.
• Components: They help in creating custom elements that can be reused in HTML.
• Transition: Various methodologies are given in Vue.js to apply a transition to HTML components when they are included or expelled from the DOM.
• Detailed Documentation: It gives a simple learning curve through point-by-point documentation.