Vue.js 3

Difficulty Level: Advanced Prerequisite: You should be familiar with state management in frontend frameworks. Takeaway: This article gives you an overview of how pinia.js is different from Vuex state management. Why state management? Using Vue, the web page is designed by splitting into vue components, each component is an independent and reusable piece in the web page. The state of the component is not shared with other components or the nearest parent or its children, it’s a closed container with HTML, CSS and javascript.

Difficulty Level: Intermediate Prerequisite: You should be familiar with Vue.js options and component-based architecture. Takeaway: This article gives you an understanding of assumptions and shorthands used in Vue.js. In this article we cover the below topics with example Component name casing V-bind in template V-on in template Function call with event Event emit with event Watch to get the old state and new state Filters with multiple props Props declaration Dynamic Component Props Object as props Style binding in template Let’s create a simple Vue application using Vue CLIcommand, we use this application to demonstrate all the items listed below.

Difficulty Level: Advanced Prerequisite: You should be familiar with Vue.js 2.x / 3.x and familiar with the usage of v-model directive. Takeaway: This article gives you an understanding of the behavior of v-model in custom component implementation in Vue 2.x and 3.x Two-way binding is one of the most important features of web applications. It makes development easier by just using the v-model directive in templates. Two-way binding schema What is Two-way binding?