Quick Recall Vue Js

<script>
new Vue({                                // Create the object of view
    el: '#app',                             // targeted element 
    data: {                                  // Reactive Data
        message: 'Hello Vue !'
    },
    methods: {                          // Methods or Functions
    }
});
</script>        

Interpolation

• Interpretend like plain text --> {{}}
• Helps us to use javascript variable or functions in HTML part
• Data(){} used to return reactive data & can transfer data from script to template.
• In angular we cannot change the value in interpolation but in vue we can change.

Directives

-- Use to bind properties.

Data Binding :

• v-bind:propertyName
• :propertyName

<a v-bind:href="links.link" :class="links.class" :alt="links.alt">{{links.text}}</a>        

• v-if : not even disply on the DOM
• v-show : adds css display property
• v-html : interpret like HTML code

Event Handling

• v-on:click
• @click
• Dynamically we can add class using

:class="{className:Condition}"        

• Current Version - 3
• Js Progressive framework

Flow

index.html (#app) --> Main.Js (createApp) --> App.Vue (component[HelloWorld.Vue]) --> HelloWorld.Vue (props)

Component

• Reusable
• Can we bind style inside component ? --> scoped
• Can we pass data from parent component to child component --> Props

Two Way Binding

• Data Automatically Transfer from View to Model & model to View.
• v-model we can use to read values from input field.
• CheckBox & Radio values also get through v-model.

Conditional Rendering

• v-if | v-else-if | v-else
• v-on:click="isShow=!isShow" - Toggle

Loop

• v-for="item in items"
• v-for="(item,index) in items"

Pass Data To Child Component --> PROPS

• Props are used to transfer data from one component to another component.
• We can defined datatype or type of properties like String, Object, Functions.
• We can transfer data from data function of parent component to child component just like property bind.

Child Component

<template>
<h1> Child Component </h1>
<h3>{{name}}</h3>
<h5>{{data.gender}}</h5>
<button v-on:click="fn_pass">Click</button>
</template>

<script>
export default {
    name: 'ChildComp',
    props: {
        name: String,
        data: Object,
        fn_pass: Function
    }
}
</script>							        

Parent Component

<template>

<ChildComp :name="mobile" v-bind:data="student" :fn_pass="Test" />
</template>

<script>
import ChildComp from './Child.vue'
export default {
    name: 'HomeComp',
    components: {
        ChildComp
    },
    date() {
        return {
            mobile: 123,
            student: {
                name: "Akshay",
                mobile: 123
            }
        }
    },
    methods: {
        fn_pass() {
            alert("Function Get Called");
        }
    }
}
</script>					        

Dynamic Classes

• We have another property --> computed <-- (refer computed property)
• Inside that we can write "functions" to write multiple dynamic CSS properties.
• On the basis of boolean values of each class we can apply it over the element.

How to transfer data from Child to parent ??

• We can use "functions" to trasnfer data from child to parent component.

Ref

• To get & set DOM values.
• Focus | Style | Values can be set using ref.

this.$refs.refName.focus(); 
this.$refs.refName.style.color='red';

// Read text from tags having ref attribute
this.$refs['refName'].textContent        

Modifiers

• We can use it with v-model
• If we want to modify input field values then we can use it.

1. lazy : get values only after out focus
2. number: for paricular datatype
3. trim : to remove extra spaces

Non-Props Data

• If we didn't consider passing attribute data as a props then that data automatically.
• consider as a non-props data & got attached with parent tag like div.
• If we want to attach to a specific tag then we can use v-bind='$attrs'
• If we don't want to attach to parent tag then in script we can set --> inheritAttrs : false

Computed Property

• Complex operations
• Cached based so better performance than functions.

Watchers

• This 'watch' property always keep eye on data properties & if we automatically want to execute some functionality on data properties then we can use watch.

<template>
<h1> Watch Properties</h1>

<h3>{{count}}</h3>

<button @click='count++'>+</button>
<button @click='count--'>-</button>
</template>

<script>
export default {
    name: 'WatchComp',
    data() {
        return {
            count: 0
        }
    },
    watch: {
        count(val) {
            if (val >= 5) {
                console.log('Limit Reached');
            } else if (val < 0) {
                this.count = 0;
            }
        }
    }
}
</script>
        

Slots

• Slots are used to pass dynamic data or HTML tags.
• Named Slots are very useful

Parent Component

<template>
<SlotChildComp>
    <template v-slot:header>
        <h1>Bottle</h1>
    </template>

    <template v-slot:main>
        <p>This milton brand is absolutly amazing</p>
    </template>

    <template v-slot:footer>
        <button>Buy NOW</button>
    </template>
</SlotChildComp>

<SlotChildComp>
    <template v-slot:header>
        <h1>Bottle</h1>
    </template>

    <template v-slot:main>
        <p>This milton brand is absolutly amazing</p>
    </template>

    <template v-slot:footer>
        <!-- <button>Buy NOW</button> -->
    </template>
</SlotChildComp>
</template>

<script>
import SlotChildComp from "./SlotChild.vue";

export default {
    name: 'SlotParentComp',
    components: {
        SlotChildComp
    },
    data() {
        return {
            count: 0
        }
    },
}
</script>
		        

Child Component

<template>
<div class="cart">
    <header>
        <slot name='header'></slot>
    </header>

    <div>
        <slot name='main'></slot>
    </div>

    <footer>
        <slot name='footer'><button>Click Me</button></slot>
    </footer>
</div>
</template>

<script>
export default {
    name: 'SlotChildComp',
}
</script>

<style>
.cart {
    width: 200px;
    border: 1px solid black;
    padding: 20px;
    text-align: center;
}
</style>        

Dynamic Components

<template>
<h1>Dynamic Component</h1>
<button @click='compo="DynamicReactComp"'>REACT</button>
<button @click='compo="DynamicAngularComp"'>ANGULAR</button>
<button @click='compo="DynamicVueComp"'>Vue</button>
<div class='container'>
    <component :is='compo' />
</div>
</template>

<script>
import DynamicReactComp from "./DynamicReact.vue";
import DynamicAngularComp from "./DynamicAngular.vue";
import DynamicVueComp from "./DynamicVue.vue";

export default {
    name: 'DynamicComp',
    components: {
        DynamicReactComp,
        DynamicAngularComp,
        DynamicVueComp
    },
    data() {
        return {
            compo: 'DynamicReactComp'
        }
    },
}
</script>

<style scoped>
.container {
    width: 300px;
    padding: 20px;
    text-align: center;
    margin: auto;
    border: 1px solid black;
    border-radius: 10px;
    margin-top: 10px;
}
</style>				        

Teleport Component

• Inspite of #app in index.html we can render vuejs component to other different id.

<teleport to='#footer'>	
         <TeleportComp/>
</teleport>				        

Lifecycle Method

• Lifecycle methods are only for components, for every component it will be different.
• Create - structure
• Mount - add data properties
• Update - btn click | event
• Unmount - remove

1. beforeCreate : Get Execute before anything.
2. Created : Get Execute when javascript part get ready.
3. beforeMount : Get Execute before HTML template.
4. mounted : Get Execute when HTML template part get ready.
5. beforeUpdate : Get Execute before any update on UI by certain event.
6. updated : Get Execute after any update on UI by certain event.
7. beforeunmount :

>> Whenever component get removed from DOM | UI then this will get called.

>> Smooth, less memory or management of memory.

>> Whatever actions want to do before UI component remove can do in beforeUnmount.

8. unmounted : Whatever actions want to do after UI component remove can do in unmounted.

Routing

• package installation - npm i vue-router@next
• create one routing.js file having high level functions from vue-router like createWebHistory | createRouter

--> Define Routes
router = [{name:'Home',path:'/',component:HomeComp}] 

<router-link to='/'>Home</router-link> --> for links
<router-view></router-view> ---> for component loading

--> Redirect from one component to other component
this.$router.push({name:'Home'});        

Dynamic routing

{
    name:'Profile',
    path:'/profile/:name',                                                    // dynamic property
    component:ProfileComp
},

import { useRoute } from "vue-router";

useRoute().params.name;                                               // values can be read by this approach.        

PageNotFound

{
                name:'PageNotFound',
		path:'/:pathMatch(.*)*',                                 // this use for page not found
		component:PageNotFoundComp
},        

Here is demo of small CRUD operations using Vue.Js