Web Develpers era: vuejs 3 components fundamentals

Vue.createApp({})

.component('click-counter',{

template: "<button @click="count+">{{count}}</button>',

data(){

return {

count:0

}

})

.mount('#app')

component is reusable

index.html

<click-counter>/</click-counter>

so changes on ones component wont affect on others

it is simple compnent

if it is large component

reusable component with props:

props arew custom attributes thar register on component

:name="plan"

    props: {
        apiUrl:{
            type: String,
default:'thesingle',
required:true,

            required: true,
        },
        childApiUrl:{
            type: String,
            required: false,
        },

nested components in vue

component using in another component

there are two ways to rgesiger componetn

local component vs global comppoent

main.js -> registere globally

locally-> at respective vues

https://vuejs.org/guide/essentials/component-basics.html

at induvidual

component is aobject

communication between vue compoents with custom events

we can pas data to child component using props

from child to parent ising emit

v-om:select="selectplan"

f selected it will call select plan component

select method emits custom event

select(){

this.$emit('select',this.name);}

in parent

:select ="selectPlan"

selectplan function

https://vuejs.org/style-guide/

component name

todo-item

twowords

readability

BaseByttin,vue

base or app or v start with it is good practice

page have one side bar at that we give the

tightly coupled component names

if child component linked with parent component, so use it as prefix

parentcomponent + child component

vuejs live cycle chooks

each component go through the inisitlisation step by stp

https://vuejs.org/api/composition-api-lifecycle.html#composition-api-lifecycle-hooks

after instance created created 9 fetch data using api)

after dom elements loaded mounted

vuejs component slots

distribut content to componetns using slots also

<todo-tem > buy bananans </todo-item>

like normal html we are passing data one type of slot above

insid of component

<template #description> </template

named slots

vue3 with composition api

<script setup>
import { ref } from 'vue'


const count = ref(0)
</script>
<button type="button" @click="count++">count is {{ count }}</button>

defineProps({
  msg: String,
})

<script setup>
import { ref } from 'vue'



setup() {
    defineProps({
        msg: String,
      })
defineEMits(['hithere]
      const count = ref(0)
      const log = () =>{
console.log('works');
      };
      const queryBody = reactive({
          sort_by: '',
          order: '',
          page: 1,
          per_page: 5,
      });
      const pageMeta = computed(() => {
        const from = (queryBody.page - 1) * queryBody.per_page + 1;
        const to =
            queryBody.page * queryBody.per_page > totalRows.value
            ? totalRows.value
            : queryBody.page * queryBody.per_page;

        return { from, to };
    });
    watchEffect(() => {
        getData(queryBody);
      });
      return {
        queryBody,
        rowItem,
      };
</script>