Conditional rendering is a technique used to display different UI components or content based on certain conditions, such as the value of a variable or the outcome of a boolean expression.
Vue.js
javascript
<template><p v-if="condition">Condition is true</p><p v-else>Condition is false</p></template><script setup>import{ defineProps }from'vue';const props =defineProps({condition:Boolean});</script>
Prop/Parameter Drilling
Prop/Parameter drilling is a technique where data is passed through multiple layers of components in the component hierarchy, often from a parent component to a deeply nested child component, via props or parameters.
Responding to events involves handling user interactions, such as button clicks or text input changes, and updating the component's state or triggering side effects accordingly.
Handling user input involves capturing and processing user interactions with input fields, such as text fields, sliders, or checkboxes, and updating the component's state or triggering side effects based on the input.
Vue.js
javascript
<template><input
type="text" v-model="text" placeholder="Enter text"/></template><script setup>import{ ref }from'vue';const text =ref('');</script>
Previewing a Component
Creating a preview of a component involves displaying a visual representation of the component in the development environment to help with the design and layout process.
Vue.js
Vue.js doesn't have a built-in preview feature. However, you can use a tool like Storybook to create previews for your components in a separate development environment.
Lists & Looping
Lists and looping involve rendering a dynamic number of components based on the length of a list or array, iterating over the list, and generating a UI component for each item.
List Item Keys are unique identifiers assigned to each list item in declarative UI frameworks to help manage and update list elements efficiently. Using List Item Keys enables the framework to optimize the rendering process, minimizing unnecessary updates and improving overall performance.
Slot APIs refer to a technique where components have customizable parts or 'slots' that can be filled with content when the component is being used. This allows for greater reusability and flexibility in composing user interfaces. The content that fills these slots can be other components or simple UI elements like text or images.
State management refers to the process of handling and updating the internal state of components, often in response to user interactions or other events.
Scoped Data Propagation is a technique that involves passing data across multiple levels of a component subtree without having to explicitly pass it through every intermediate component. It helps reduce the complexity of prop drilling and allows for a more efficient way of sharing data in a specific scope.
Vue.js
javascript
<!--ParentComponent.vue--><template><intermediate /></template><script setup>import{ provide, ref }from'vue';importIntermediatefrom'./IntermediateComponent.vue';const data =ref('Some data');provide('dataKey', data);</script><!--IntermediateComponent.vue--><template><child /></template><script setup>importChildfrom'./ChildComponent.vue';</script><!--ChildComponent.vue--><template><p>Received data:{{ data }}</p></template><script setup>import{ inject }from'vue';const data =inject('dataKey');</script><!--Usage--><parent-component data="Some data"></parent-component>
Side Effects
A side effect involves executing code that can have external consequences or perform operations that are not directly related to rendering the UI, such as making network requests or updating external data sources.
Vue.js
javascript
<template><div></div></template><script setup>import{ onMounted }from'vue';onMounted(()=>{// Perform side effect here});</script>
