DEV Community: Husniddin6939

Vue JS props

Husniddin6939 — Mon, 18 Nov 2024 08:12:02 +0000

Passing in data from Parent component to child component named props;
Lets see how does it work?
Parent component

Vue JS Emit function

Husniddin6939 — Sat, 16 Nov 2024 12:59:39 +0000

We use Emit function for passing data from child component to Parent component and we are gonna show you to how it goes in codes
We start Emit function from child component

<template>
    <div>
        <div class="Child component">
            <h1>d Component</h1>
            <h2>{{ count }}</h2>
            <button @click="sendDate">send count</button>
        </div>
    </div>
</template>

<script setup>

import {defineEmits, ref} from "vue";

const count=ref(0);

const emit=defineEmits();

const users=[
    {
        id:1,
        name:"khusi",
        age:20,
        profession:"IT"
    },
    {
        id:1,
        name:"khusi",
        age:20,
        profession:"IT"
    },
    {
        id:1,
        name:"khusi",
        age:20,
        profession:"IT"
    },
    {
        id:1,
        name:"khusi",
        age:20,
        profession:"IT"
    },
]

const sendDate=()=>{
    emit("counter", 11);
    emit("users", users);
}

</script>

Now we can pass them into Parent component

<template>
    <div>
        <div class="Parent component">
            <h1>c Component</h1>
            <ComponentD @counter="submitEmit" @users="submitUser"/>
        </div>
    </div>
</template>

<script setup>
import {defineEmits} from "vue";
import ComponentD from "./d-component.vue";

const emit=defineEmits();

const submitEmit=(e)=>{
    console.log(e);
    emit("counter", e)

}

const submitUser=(e)=>{
    console.log(e);
    emit("users", e);
}

</script>

the result is

Lets we learn how it works

- import {defineEmits, ref} from "vue"; Importing necessary things from vue
- const count=ref(0); creating a veriable and giving it default value with ref
- const emit=defineEmits(); It has to declared defineEmits in any veriable
- const users=[ {id:1, name:"khusi", age:20, profession:"IT"}, {id:1, name:"khusi", age:20, profession:"IT"}, {id:1, name:"khusi", age:20, profession:"IT"}, {id:1, name:"khusi", age:20, profession:"IT"}, ] Using from any Data
- const sendDate=()=>{ emit("counter", 11); emit("users", users); } we create a function and give it in first optional number and the second our data inside of defineEmits and in the string we write optional name for using in Parent component
And we learn how to call them in Parent component

-const submitEmit=(e)=>{ console.log(e); emit("counter", e) }
-const submitUser=(e)=>{ console.log(e); emit("users", e); } Two function created and in it we call our emit variable from child component and give them its name and e. In this case e=Our optional number that 11 and our data
- <ComponentD @counter="submitEmit" @users="submitUser"/> Finally we call two function under emit optional names and we can see the results on console

Thank you All for attentions

Vue JS (Provide, Inject)

Husniddin6939 — Sat, 16 Nov 2024 11:17:48 +0000

We use Provide and Inject for transporting Data from Parent element to any child elements directly and in this code I will show you how to use them

<template>
    <h1>Parent Component</h1>
<div class="wrapper">
    <h1>{{ user }}</h1>
    <input type="text" placeholder="Enter username" v-model="user.name">
    <ComponentD :user="user"/>
</div>
</template>

import {reactive,provide} from "vue";


const user=reactive({
name:"Jahongir",
age:30,
})

provide("user", user)

<template>
    <div>
        <div class="child-element">
            <h1>d Component</h1>
            <h2>{{ user }}</h2>

        </div>
    </div>
</template>

<script setup>

import {inject} from "vue";

const user=inject("user");

And the result is

Overall What we do is that

- import {provide} from "vue"; Provide imported by vue

- import {reactive} from "vue"; Reactive imported by vue

- const user=reactive({name:"Jahongir",age:30,}) Reactive Object created

- provide("user", user); In this case, first user in the string is optional name and the second value is our object that we should not be changed

In Child element we accept the value with Inject like below

- import {inject} from "vue"; Inject imported by vue;

- const user=inject("user"); user value from Parent component token by veriable with any optional name.

- For example in the above we would write any names after const but we should give inside of inject provide's first string name "user"

- <h2>{{ user }}</h2> Finally we run it so on

Thank you all for attentions

-Object oriented programming -Callback hell -Async/Sync js -Promise

Husniddin6939 — Sat, 06 Jul 2024 12:07:54 +0000

Object oriented programming contains 4 pillars

Object oriented programming - We group related variables and function that operate on them into objects and it is what we call encapsulation.
Let's show an example of this in action.

function getSalery(baseSalery, overtime, rate){
      return baseSalery + (overtime*rate);
}

let employee = {

    baseSalery:24000,
    overtime:20,
    rate:10,
    getSalery: function(){
       return this.baseSalery + (this.overtime*rate);

    }

};

employee.getSalery();

When type code in Object oriented way, our functions end up having fewer parametrs so...

The best functions are those with no parametrs
it is easier to use and mountain it in fewer parametr functions.

                               ##ABSTRUCTION

Imagine abstriction think of a mobile phone on our hand as an object, this devise has a lots of tiny elements on the inside and we only and simply use it by tuchching and we don't care what happened inside, all complexity hidden from us - This is abstraction in practise.

We can use the same technique in objects, we can hide same of the proporties and methods from the outside and throught this way we echiave a couple of benifits.

Using an undarstanding an object with a few properties and methods is easier than an object with several properties and methods.

2.Secondly, it helps us reduce the impact of change. Let's imagine if we change inner or private methods, none of these changes will leak to the outside coz we don't have any code that touches these method outside of their content object, we may delete a method or change its parametrs but none of these changes will impact the rest of the aplications code.

So with abstraction we reduce the impact of change.

                          ## Inheritance

-Object -getOwnPropertyDescriptor, -defineProperty

Husniddin6939 — Fri, 05 Jul 2024 15:47:00 +0000

GetOwnPropertyDescriptor - Throught this key we can control our objects properties.

For example these keys controlled by users if it should be - Configurable, Enumerable, Writable.

let change={
    name:'Arda',
    theme:'Magic'

}

let result=Object.getOwnPropertyDescriptor(change, 'name');

console.log(result);

                            ## Writable

it is possable to type value again if we put true.

                            ## Enumerable

Throught this value we can control loops - for in and for of works or not.

                            ## Configurable

This key can remove and change object values.

                            ## DefineProperty

This method also give pirmession or not to change object

let change={
    name:'Arda',
    theme:'Magic'

}


Object.defineProperty(change, 'theme', {
    value:"Netlify",
    enumerable:false,
    writable:false,
    configurable:false
});

change.smth='ok'

console.log(change);

for(let key in change){
    console.log('new',change[key]);
}

in this case we change object theme to Netlify and use for in and show each property and finally we should say that if we have not to change we will control it from js.

-SetTimeOut , SetInterval

Husniddin6939 — Fri, 05 Jul 2024 10:16:07 +0000

setTimeOut - it call to function and execute our codes after a few menutes.

Additionally setTimeOut accepts these values

                         How it works ?

setTimeOut(()=>{console.log("Hello khusi")}, 8000);

and result showed after 8 secound.

.
We can type the third value as so.

setTimeout((text)=>{console.log("Hello khusi"+ text)}, 8000, "program");

and it demonstrate

setInterval - it works during the time that we add.

Secondly, setInterval take this kind of properties.

                      How does it work ?

"use-strict";

let btn=document.getElementById('start');
let timeText=document.getElementById('time');
let stopbtn=document.getElementById('stop')

let timer=0;

let timeCount=setInterval(()=>{
    timeText.innerHTML=`${timer}`;
    timer++;

}, 1000);

btn.addEventListener('click',()=>{
    setInterval(()=>{
        timeText.innerHTML=`${timer}`;
        timer++;

    }, 1000);

});

stopbtn.addEventListener('click', ()=>{
    clearInterval(timeCount)
})

Firstly it started to count automatically

then we stop it with stop button by clicking

after that we again start to continue by clicking start button

-Event delegation, Event propagtion, Bubling, Capturing

Husniddin6939 — Tue, 02 Jul 2024 13:53:14 +0000

Stop Propagation -

-Dynamic elements, -Data maping Dom, -Attributes

Husniddin6939 — Fri, 28 Jun 2024 09:43:31 +0000

-Dynamic elements - throught this way, we can create elements and move in js like this
1.First of all, we create html tag in js

const div=document.createElement('div')

2.Secondly, we add classList

div.classList.add('p-5','bg-info','m-5')

3.Thirdly, we add new tag in div which we create in js

div.innerHTML='<p>JavaScript</p>'

4.Vital code for access to show in browser, we open new container in html , after that we push our dynamic element in it

container.apend(div)

5.If we wanna create more cards like so, we should create a new function and also should add loops for controlling its length

function createElement(limit){
    for(let i=0; i<limit; i++){
        const div=document.createElement('div');
        div.classList.add('p-5', 'bg-info','m-5');
        div.innerHTML='<p>JavaScript</p>';
        container.prepend(div)
    }

}

createElement(3)

                                  After  Before

This keys put our dynamic elements right places with html tags.
For instace we have once html tag and anotherone is dynamic element we create, now let's contain our cards right places with after,before kays

"use-strict";
const button=$('.btn-danger')

const btnjs=document.createElement('button');
      btnjs.classList.add('btn-success','btn','m-5');
      btnjs.textContent='Js button';


      button.after(btnjs);

in this case, we put js dynamic button next of html buuton throught After js key.

                                  Before

"use-strict";
const button=$('.btn-danger')

const btnjs=document.createElement('button');
      btnjs.classList.add('btn-success','btn','m-3');
      btnjs.textContent='Js button';


      button.before(btnjs);

                               Attributes

Attribute - Example for attribute, in this code we have seen such kind of attributes like id,type,class..etc

<button id="btn-danger" type="button" class="btn-danger btn m-3">html button</button>

How to get attribute in js ? Simple !!!! Like this

console.log(button.getAttribute('id'));

Another key of attribute is setting new attribute or change their value if there is such element

button.setAttribute('title','button')
console.log(button);

If we try to set again this exsist Attribute in it , it will change its value

button.setAttribute('title','button')
console.log(button);

button.setAttribute('title','form')
console.log(button);

-ClassList

Husniddin6939 — Thu, 27 Jun 2024 16:30:44 +0000

                               ClassList

ClassList - this method can add new classname to opened tag and its keys these.

1.Add => this key will add new classname

menu.classList.add('bg-success');

console.log(menu.classList);

throught this key we can add more classnames in once like so

menu.classList.add('bg-success','gold','red');

console.log(menu.classList);

2.Remove => this key remove classname more then once

menu.classList.remove('gold','red');

console.log(menu.classList);

3.Contains => this key search classname which we type in and it response us boolean (true/false);

menu.classList.contains('bg-success');

console.log(menu.classLIst);

4.Toggle => This key if there is classname which we type the same it removed, otherwise it adds our classname like newone.

menu.classList.toggle('orange');

console.log(menu.classList);

then if we call this classname again "orange" via toggle key , it remove in this time

menu.classList.toggle('orange');

console.log(menu.classList);

-LocalStorage, Session, Cookies

Husniddin6939 — Thu, 27 Jun 2024 12:38:58 +0000

Three type of storages have own Life time duration, memory sizes and control points. 2.Additionally if we should save Object, Array or such kind of Data bases, Firstly we change them to string via JSON KEYS like this.

const person={
    name:"John",
    age:21,
    job:"Programmer",
    hobby:['sleeping']

};

LocalStorage.setItem('person', JSON.stringify('person'))

                       LocalStorage

LocalStorage is controled only by client-side, limit of memory is 5/10mb it depends on the browser,it only supports the type of string data base and it could edit by users.

LocalStorage used with these keys:

setItem -> Add

LocalStorage.setItem('name', 'John');

getItem -> Value

let person=LocalStorage.getItem('name');
console.log(person);

removeItem -> remove

LocalStorage.removeItem('person');

clear -> clear the full storage

LocalStorage.clear();

                       Cookies

Cookies more used for Safty and it only save a few dates arround 4kb, if we want to delete it we can but other case it is not deleted. Cookies controlled by both side it client-side and server-side and it accept requests also supports string and editable.

                       Session

Sessin can save 5mb memory size , it removed when we close the tab and it also support string and controlled by client-side.

-Dom js

Husniddin6939 — Thu, 27 Jun 2024 12:04:29 +0000

What is Dom in js - The document object model, it can change document structure, style and content.

Throw

Husniddin6939 — Wed, 19 Jun 2024 13:17:31 +0000

Throw - Throught this key we can create the error ourselves like this.