Components Basics | vue component v-for
ComponentsallowustosplittheUIintoindependentandreusablepieces,andthinkabouteachpieceinisolation.Itscommonforanapptobeorganizedintoatreeofnestedcomponents:ThisisverysimilartohowwenestnativeHTMLelements,butVueimplementsitsowncomponentmodelthatallowsustoencapsulatecustomcontentandlogicineachcomponent.VuealsoplaysnicelywithnativeWebComponents.IfyouarecuriousabouttherelationshipbetweenVueComponentsandnativeWebComponents,readmorehere[1].DefiningaComponent[2]Whenusingabuildstep,wetypicallydefineea...
Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation. Its common for an app to be organized into a tree of nested components:
This is very similar to how we nest native HTML elements, but Vue implements its own component model that allows us to encapsulate custom content and logic in each component. Vue also plays nicely with native Web Components. If you are curious about the relationship between Vue Components and native Web Components, read more here[1].
Defining a Component [2]When using a build step, we typically define each Vue component in a dedicated file using the .vue extension - known as a Single-File Component[3] (SFC for short):
vue<script> export default { data() { return { count: 0 } } } </script> <template> <button @click="count++">You clicked me {{ count }} times.</button> </template>vue<script setup> import { ref } from ...