All language subtitles for [English (auto-generated)] Vue JS 3 for absolute beginners (HTML _ CSS _ Vue-Router) [ Dec 2022 ] [DownSub.com]

foreign

some of the concepts and basic things in

View js3 and we will be mainly focusing

on compost

and we will also look into view router

see how page navigations are happening

and we will set up some basic components

and we will also see how we can change

from one page to another

even though this is only going to be

focusing on vue.js I assume that you are

coming from a completely uh a different

background you have some programming

knowledge maybe in JavaScript python or

C sharp whatever it is but you have zero

idea about web download so I'm just

going to assume like that so this video

will be something like this

before we directly jump into view I will

give some basic introduction or idea

about HTML and then some basic idea

about CSS once these two are done then

we will finally jump into view Json

the whole video will be split into

different chapters in case you are

comfortable with HTML and then about CSS

how the project structures are all there

you can directly jump into the future

or you can directly jump into the view

router which will be the last part of

this video

whichever you are comfortable you can

start learning them but I will start

from scratch I will explain about HTML

and then about CSS and then move into

view components and then how some basic

right composition ABA is working and

then finally to view router

now that this video is about

introduction this is not going to go in

depth into all the composition API API

beat again we are not going to discuss

all the uh items or all the methods

functions available in composition we

are going to see very very very basic

thing like uh on binding uh to the

functions how the template itself is set

up how the properties are defined how we

are

modifying the elements using the ref

keyword only very basic things even the

for each components the conditional

rendering Loop rendering nothing is

discussed in this video we will do a

separate video for that but this is for

someone who wants to know what is all

about the view JS view 3 with the

composition API so that said let's jump

right away

so we'll start with width

the thing about most of the JavaScript

Frameworks are that they are frequently

evolving and many new features are being

added frequently so whatever we are

seeing in this video today

may be outdated by several versions next

month or maybe after a couple of months

so what I suggest is whenever you are

going to do something always look into

the latest

documentation from whichever framework

that you're going to use in our

video this uh this video we will be

looking at who js2 ujs3 using uh Vita

and I will use a Pina for uh

stores and we will also use a view

router for routing to different pages

so first thing we let's start from here

and you want to know how the

documentations always go to the guide

and getting started

so this is where we go so create wheat

so this one will uh create the wheat and

you need to give a file name in case you

are going to have

let's start with uh going to a folder I

will open up

the same tutorial folder here

you have a shortcut key press your Ctrl

and the tilde symbol

to open up the terminal if you are not

able to see that go to view and this is

the one

control terminal

let's say

change directory to this and now we have

changed the directory and once we have

changed directory let's say npm

create Vita

npm create reader let us do I can copy

this

create read that latest

with the file name and let's say this

name as a view that will be UE is

pronounced as view like a friend view

back view top view yeah view v i e w

3 demo

okay so it's saying that uh okay to

proceed yes we press enter and then

package name is V3 demo and what do you

want to do what

do you want vanilla framework JavaScript

or view or reactor and press my down

button to choose View and you can use

this grid to create a swelled up reactor

reactor any kind of other

project so let's start with View

and we are going to look into typescript

and there we go so we have now created

the project

well the good thing about all the latest

Frameworks is that they already come

with all the illustrations that you need

to do like they just it's like a they

hold your hand and

so you need to change to the folder we

created a folder before and then you

need to install the node modules and

you're going to run first let us change

to the folder

view 3 there well what I did I just put

change directory and then I typed a few

letters and pressed tab tab button will

give me the folders if you don't want to

press tab

you just press Ctrl and space it gives

both the same and now at this location

if I go here and open I don't have any

folder open data I want to code in this

folder and at the same time look into

all the projects files available here to

do that I am going to just going to say

code space dot which means a code in

this location when I do this and give

enter it will open up a new

Visual Studio window I'm sure the code

window let's do that

and this one is just asking you like

there are several things do you trust

this folder of course address this

folder and let us minimize the older one

let's take up top

this is the first time I am using a real

J is uh so it obviously is going to ask

me different uh extensions that are

available let us install all the basic

extensions we need to have slippers the

most important thing is if you have the

language features you will have all the

all the um intelligence features

available now

let us have this and I will do one more

thing I will just check for View and see

if we can

install some other items

so syntax is there highlight is there

I don't need a Snippets that is install

new slippers

and it's totally up to you whether you

want it or not

okay I think uh this is fine we don't

need anymore

these things are okay now let us go to

the folder

if we go to the folder here

okay

so this is my folder and it contains a

SRC folder public folder assets

components now there is one more thing

if you want to enhance the way of your

Visual Studio code looks you can go here

and then you can go to file like

something

the default on a city if you want to

install other items you search for

something let me install material theme

and we slowly gone so

what happens when you go back now you

can see the folder icons and you can see

different icons associated with your

folder so so this is um may be useful

to visually differentiate between the

folders different files with all those

icons before here we go this is called

mandatory this is still uh it's your

choice

before we begin anything I'm going to

reveal this folder and then see how it

looks right click on only any file

revealing folder

reveal in File Explorer so it opens up

my

Windows Explorer to show me

what are present inside so this is our

file view 3D demo and inside which we

have some source files some public files

so these are basically the static images

that you will be placing here and many

many many files are here these are all

created by default when you use the meat

Commander but there is one important

thing for all the applications to like

the view.js applications too and you

need the node.js packages node modules

which are nothing but if you are using

uh

Visual Studio or like c-sharp asp.net

different one these are all just the

packages packages developed by external

parties or other developers which you

can make use of in your application so

view itself is a node module so without

that package you will not be able to run

your application so to this application

to be done perfectly you need that

um load modula so this is already

explained to us in

here after you change to the directory

you need to install the

npm which is the node modules and then

you can start running before I install I

am just going to quickly walk you

through different folders which are

present here let us start from this

bottom first and foremost thing is you

need to look into this packages.json so

this gives you the dependencies that are

related to this project now if you are

using any external libraries external

nuget package like a 3js model viewer

whatever it is everything will be

mentioned here so first thing let us go

here and see so our file name is view3

demo and

we have some versions okay and if you

could see there are three scripts here

one is run sorry save development

another is build another is preview uh

what what it does is when you press npm

and Then followed by this day with

development

this does this particular uh he just

calls this uh or executes this whatever

uh function or operation that is

followed by that so uh we have

development mode we have build and then

we have

and uh there are dependencies uh

external packages for instance this

application itself is dependent on a

view version

3.2.4 and the power

and the other dependencies are

typescript and we do so you could see

like in case you are going to install

something up obviously we are going to

install router we are going to install

Pina so everything will come up here

you when you are going to press NP I

will type npm uh install all the

packages whichever is required along

with the basic npm or node modules

should be installed in our application

this is time consuming it will take some

time based upon your

um

sometimes based upon where you are using

it

at my office we are behind the proxy so

if you are using it behind the proxy

sometimes it doesn't work so you need to

ensure that your Visions are your Visual

Studio code or your npm

uh has access via the proxy you need to

set up the proxy you can just do some

basic Google search to see whether I uh

in case you are not able to

install them so currently I assume that

you can have access and you are not

behind a proxy npm installed

if you are behind the proxy you will be

stuck here it will just show ideal tree

build depth and then it will not go

anywhere and you will see that there is

some error with an action or something

thank you

okay there we go

so once this is done we don't have

anyone

so which means uh sometimes when you are

going to use uh old package

like you downloaded some template from

the internet most of the times what

happens is some of the packages are

outdated and out of the dependencies

some are updated some are outdated so

you will have like different versions

and you will have vulnerabilities or

those points you will have

instructions on what to do most of the

time you have to just audit and fix them

but currently since we are doing it from

scratch we don't have any issues here

uh let us go ahead and follow what we

need to do as a first step without doing

anything uh we could now see that we

have the node modules folders available

here if I go into this folder uh the

command actually created this node

modules and installed whatever is

required these are the bare minimum

required and in case you are going to

install something new uh it will get

added to the dependencies like when we

are going to install a view router and

Pina so they will get added here and

they will also be created folder now the

good thing is you can also open the role

modules and directly looking to the

source code the JavaScript files as well

from here

like I can open up some files I can see

what it's doing and I can do all those

kind of things

now we are not going into that

let's start with npm

then development so that's what is

mentioned here right so npm run there

let's put

there you go so we have got this one and

now

5173 port and I will press Ctrl plus

click it should open the new app in

another location so there we go this is

our wheat plus move application which is

a basic counter and that looks fine

so we have managed to initiate the

view.js

basic project

now this is okay so what you need to do

when you need to close this you can

press this deleted so it will kill the

terminal and your

hosts that Port is also now released

in case you wish to open up this one

like when you press enter

the ability opens up only

if all 5173 port in case you want to

open up

a specific port

all you need to do is follow up npm run

there and remember pay attention here

you need to First you

two iPhones and then space another two

iPhone support then you enter your port

number let's say in my case 8345

something

press enter you will be able to open up

in 8345 now you might be asking why I

need a clue double or here like I cannot

just like that go and say oh three three

four five it will not work now

it will directly go into the default uh

five one seven three so in case we want

to use your own port remember

npm run the first templation and then

another definition for you can't use p

as well like a regular Port eight three

four five or like nine thousand nine

eight nine nine nine second press and

open up this and it opened up in another

window and I can directly see it here

so now it is running in a double

and K so this is what we need and we can

so so far this looks fine we have now

managed to set up that and we also know

how to change the port that's okay

let's next step is

to see the other files

we're not going to look into what it

does now

array also not going to this does

all you need to know is first thing is

you need to understand how the package

works

the next most important thing is your

index.js index.html this is your entry

point

and your View application itself

whatever we are going to discuss later

internally is going to be mounted on top

of your

index.html in the index.html

not too confused but just to give you a

small hint of what we are going to see

you see there is a

that division here with

ID called as app oh my God so this app

ID is consumed or like you know like

this is a fetched and our View

application itself is amounted or added

to this body here we can see that in

half years

um we are not in RPS the main TS we are

mounting it on top of

an element with this hash means that it

denotes the ID we are mounting it on top

of an element HTML element with this ID

called app so that's what's happening

here so first step uh let's try to make

some modifications to see if your

viewing those changes here at the same

time I will also keep this one open okay

what do we have here like whatever you

see inside I have already said the app

will be mounted on top of the division

element or session element with ID app

so whatever is outside is not controlled

I repeat again

whatever is inside this ID app is the

one that is controlled by the view jsr

whatever is outside is not maintained or

controlled by video so if you add

something here it will be completely

outside or separated let me show you an

example

let's say if I put one more division

here with saying like hello

and the moment I press save it will

automatically be updated here I think I

should be seeing it on top left let's do

save

uh it is there it is here

see and the reason is both of them are

present inside the same body maybe the

HTML CSS has the flexbox or maybe

something else let's see okay it has a

flex box so those are a couple of other

things that we need to look into later

currently we see that we have some value

called hello here in case I have a Hello

World

let's save

it is added here but this is okay like

we are not going to look uh press our

present we are now looking to how we are

going to organize these things we look

into that later

we are doing developing the application

so let me remove it save again it should

be gone

so the main the key thing that I want to

explain here is only this ID where you

have the app is the section or the

division where your view is mounted or

the children where view is controlling

your application

because that is specified in your main

PSR so in case if you are using

JavaScript we mean that JavaScript okay

so that's it

the next thing is we want to look into

if I minimize the source so this is what

we have in the external area with index

and everything

just take a look at the script tag here

it says that it is loading a script from

The Source folder and the script file is

main.js

if we go into the source the entry point

or the main region where you need to

it which is your main dot JavaScript or

email dot typescript file

so this is where you are importing uh

the view components and importing some

methods functions from you currently we

are importing a function called as a

create app if I hover my mouse or what

does it say it's a constant and create

app and it creates an app function so

basically this creates an app this is

followed by a DOT notation so which

means that it is built the whole create

app itself is kind of uh

this is a fluent designer so there is a

design pattern called as flu entry

design pattern let's check what it says

fluent the design pattern

so what it says fluent is uh it's it's

basically a method chain okay so what

what happens is when you are going to

call create app and then you won't

create a what it returns it should be

returning you and app and when you mount

on top of it again it returns an app so

you can continuously call like a DOT

Mount dot use and whatever you do it

again returns you the same uh create app

component usually you will be achieving

it with the help of returning the same

class or the same object so it's so in a

sense this is a fluent design where you

can reuse it again

if you on top of it if you put another

user it will not work here because Mount

is the final endpoint Mount is not

returning performance but if you click

here and use you do something and then

press again you will again have mount

so it's a fluent pattern and let's not

talk about that now so there we have it

like the main TS is your entry point

in case you want to install the opinion

uh another store or some of the core

view components you will be doing that

in your Main Place

or your main JavaScript finder you will

import them here and then you will

ensure your View application is going to

use it we will come back to the second

let me create one more uh component here

new file and let's say demo.w

a view file usually will contain three

parts now in this video since we are

looking at a view of u3 I will be using

a composition API uh you you don't have

to be confused with the terms

composition API options API these are

all different methods of achieving the

same output in my opinion composition

API is uh

little you know straightforward and if

you are already using a C sharp or other

development you you should have some

idea how the object oriented works

so two three things one is a template so

this is the place where you will put

your HTML components and another is a

script

uh

you know when I press script the

intelligence kicked in and then it

immediately added these things okay so

let me remove this

and the third thing is uh you have Style

is only for this particular component so

let's say so there are three things one

place where you will Define your HTML

and then a style if you in case have

some kind of style which is associated

only for this template you will be using

style scope and then a function for

handling the way how it works so there

are the three basic things but all your

function everything happens

inside one file

so this is the way how the view

component is structured

now let's go back to app what do we have

here

we have three script template and style

as we have already seen before that

templates is the place where you have

your HTML incrementations so this is the

implementation which you are seeing on

your screen and the right side

how do I know that app is the one that I

need to look into why can't I start with

there are like hello world and other

things for this purpose let us go into

the mail again as I said before uh index

in the whole View application index is

the base or the top most like how do I

select this is the main entry point uh

the application itself renders this and

opens up in your screen your browser

inside this uh HTML how are you

associating

it's through this I division with an ID

called app and this is the place where

you are going to render your

and if you go inside your

Source you have the main entry point

called main.ts so two entry points

index.html is the entry point for your

application itself it might differ for

your use case in case you are building

it from a ground up you will be using

the syntax but in case you are going to

use vue.js inside your existing

application you already have a website

and you want to use it only a small

component then you will be directly

importing the script and I will be

defining some ID for some of the

component and you will be mounting there

but in this video we are only going to

look at how we are building in the

ground up so this is the entry and app

then my interface will kick in and then

it will create a component and it will

mount on top of

an element with the ID app now you see

here

Apple so main TS Imports the app.view

and then it mounts into the HTML element

with the ID app so which means main TS

knows that we are going to import view

but what if we want to directly uh load

something else

let's see what I did here now I pressed

all the shift and down here also that

the above line is copied below let's say

I import hello world from

here components

components slash

components right where component slash

hello

World Dot View

okay so instead of mounting the app in

case I am out hello world and press save

I should only be seeing the hello world

component

so that's the way how it works you enter

into HTML and you specify the region

where you want to

Mount or create your View application

and Main themes will take care of the

rest you import the base applique based

view component and the base view

component you mount on top of your HTML

location so we are not going to look

here I am going to press Ctrl and

backslash so that this is commented out

and now we will use the app

so first point here and second Point

into your main Pairs and third Point

into my view so now that I know that

view is

we will keep it very simple and

straightforward let view sorry the app

Dot View be my main view component and

all the other components whatever I want

to build let it all be added here that's

what I'm doing here if I go into the

template what I am doing here I have a

division element where I have put some

when I say I it's not actually me it is

the default

um template I'm used to say I have put

so anyhow so this is where this uh vj's

logo is there and the view JS logo is

there and then again we have a component

which is we have imported from the

component we are displaying it in the

bottom in case I press Ctrl backslash

and comment it out and save the bottom

part is gone because we only have two

items now we have the division where we

have an image for wheat and an image for

view JS so this is a very basic item and

now that we know that hello world is

there we have a commented out let us not

do anything there we will come back to

the components at a later stage but

currently let us play with this one now

script is here what is the script what

does it say it says like this is the

template

and what do you mean by SRC if I'm not

wrong this is uh the extension or it is

called as a single file component so

with vue.js they call this app.view as a

single file component or an sfc which

contains all three items style template

and the script now okay let us remove

this it is trying to import hello world

but there is a Squiggy line which says

that this is declared but not used let

us comment it out again

uh in case you know uh uh you don't know

I I assume that you already know HTML in

case you don't know HTML uh this

division element has two values

um

yeah link with an image and another link

with an image what does it do when I

click this image with source with DOT

SVG it opens up me opens up this with JR

js.day website let's see okay when I do

this it should open up view Json okay

you want to change data

let's try to see

google.com

and

bing.com I know this is very very

Elementary you might feel like why I'm

doing this but when I was doing uh

from scratch I even don't know what this

headshot means I have no idea how

everything works so in case you know

everything about HTML CSS you know only

looking into how view this works you can

skip some of the parts and move to the

later section but this whole video is

for someone who has zero idea about how

your programming works this is to just

give an introduction so please bear with

me so when I press this one it will open

up Google and when it is open up

bing.com let's try

let's try

bing.com so that's how it works you

press something and you easily attach a

where is the image coming from Source it

is coming from V Dot SVG and you see

there are two things

one image is coming from assets you see

we are also giving the relative uh

relative path like inside this uh we are

saying that there is a folder called

asset and uh inside the same directory

level wherever we are we are in

sorry app view in the app view in the

same level we have a folder called asset

an inside asset we have something called

view dot SVG okay but how come we say

that we dot SVG without saying anything

does that mean that this wheat is

present in the same level now whatever

you put in public becomes your static

static static static

object or should I say static resource

you can directly call from anywhere like

this for instance if I move this wheat

into Assad

yes move it should not work

let's try

why because it's no longer able to find

a V Dot SVG inside the public or the

static folder but in case I need to find

it out then I need to give the absolute

or a relative location I say that inside

this I have an access folder an asset

folder I have wheat and I press save

then

it comes up here

so this is the difference when you are

putting some assets inside your Source

then that as a set of the resources

available accessible only via your

absolute or relative path but if you put

something in paprika it is a static or a

global resource you can directly call

them

it's more the folder namings are also

not important in them whatever you want

you can use components you want to name

something as controls you want to name

this as a resource it's totally up to

you there is no restriction there let's

move the vehicle view both to public

move

and in this case now if I

save

save save both will be lost

foreign

location like this save and you should

be there perfect and that's fine and

then you have a few more items uh so

this is our like the basic HTML you can

add

image you can add a division and you

want one more item

um what else you really want the header

H1 you have like six letters here

hello world save it

you should see now uh here hello world

and if I say let's do one thing I will

press alt shift and down button so I

copy them again and again and I press H2

H3

F4

let's try

H6

H4

6

save

so it's basically the size of H1 is this

actually is sure let's try and you also

have

a paragraph B

save

paragraph is here so basically these are

all uh current ways of displaying the

text and everything by default has their

own

styling same like Microsoft Word or any

other word processor where you have

different styles or template for the

text and when you change the style of

one item everything gets for instance I

have a hatchimal component now let me go

into my style and say there are three

ways of accessing the elements I will be

very quick and I will just quickly show

how to access them for instance I want

to directly access an element name like

I have an element name called do element

call a element called ing element called

P so whatever there is person we inside

this one like these are all HTML defined

one in case you are using XML or xaml

these are all user defined

additional restrictions you can say like

instead of using H1 in xaml I will

create my own object and I will give it

my own name uh same applies in XML as

well it's user defined but in HTML these

are all reserved like H1 H2 already has

a value already has a meaning so

so let's say here to access something

which is already reserved I directly

type that one within the closed bracket

I let's say a font size and plus control

space to see if I am able to receive

something let's say font

and the size font sizes

how what do I say like

okay first let's start with small medium

small just say pay attention to the

hello world on the right side press save

foreign

if I put absolutely

values directly like 50 pixels

let's see how it changes

it changes if I put 150 pixel

did I save it

so the pixels are now getting uh later

so let us do one thing remove the pixels

and see what happens

even this is not applied so then the

only option I have is like to use em is

nothing but for every application there

will be a font size uh in word in Ms

word terms it is like the line spacing

we have like one times of the line

spacing or one point five times of the

font space finger so it's basically

every font will have

ah height and size and you are saying

that two times of the font

let's see how much big it becomes now

let's try not to give this yeah okay so

maybe pixel might also work in case I

don't have no house let's see

ah pixel is also working

so there should be no space okay in case

I use M

um let's say 1.5 m

foreign

this is the actual font size and I'm

saying that three times of the actual

font size so it becomes three times

bigger than this now something like that

and you have different options you want

to see press Ctrl and space you will

have all the different properties

methods so whatever you can access for

this I will say foreground

are like color Okay color is pink let me

remove it up

ink

it changed to Pink maybe it's not

visible let's say

Indian red

it changed to engender so that's how you

can apply now what happens wherever you

apply this is

and press save

those will also

inherit the properties of the style

that's how it works when you put

something in the scope this is how it

works it up it affects only whatever the

elements present here let's try

something I will go back to my

index.html here I will put one more H1

and I will call it as I'm parent and I

save we saw that it was coming the left

but you see the difference the color is

not inherited the reason why because the

value that you have given here is Cobra

which means this is applicable only to

whatever HTML element present inside

this template remove the scope and see

what happens

see now this is the inheritor are taken

back to the whole document itself this

is not something that you need maybe you

are building a component and you make

some mistake like you have different

styles you have the H1 style who are

controlling it from different components

and it messes up everything you don't

need that you should not do that keep it

scoped

if you are a very sure that the

style whatever you are applying should

be applied to throughout your document

or throughout your application or your

website or whatever it is

just take that

out from the scope go to your style.css

file

and paste it here

now everything

receives it now uh some of the technical

terms I use in the video might be

confusing because I come from

different development background

I develop for mobile applications

desktop applications and web at the same

time so sometimes I get myself confused

with the terminologies that I use for

desktop I use for web and I I get

confused with the items and I also use

different languages for my development

shop python

Java C plus so most of the times

in case I'm using multiple terms

whichever you feel is related to you

whichever makes sense to you just take

that up

so uh going back how do I know that the

style.css file is the place where I

should place my H1 so that it is applied

everywhere let's check pale green now

and Save

huh

let's go back to HTML

vue.js

what happened here

let's refresh

since the style is Cobra the moment I

changed something in the style that CSS

it is not refreshed so when something

happens in the main file it is not

getting refreshed immediately because

this there is no other trigger which is

telling the application that this

component has changed so in such cases

you need to refresh your app itself

anyway in production you don't have the

tissue when the user loads it will not

be in problem only in the development

when you want to see that you will be

doing it let's try something else again

while it may be same

the same immediately affects how

everything is affected now but before it

was not affecting

it's very weird you know

sometimes it works sometimes you have to

refresh so that's fine so uh coming back

to my previous question how do I know

the style that CSS is the one where I

need to put it it's not because it is

present in this SRC folder it's because

we have already uh explained that there

are two entry points to the application

itself it is index.html and into the

view itself it is main.tf let's go into

index.html

you see here index is the place where

you are loading your

main.ts inside the source I am saying

that inside the source there is a file

called main dot TS and lower that script

to file so that my application adapts

that one so index points to main.ts and

mean that yes then loads my CSS file so

in a way the style.css file is loaded

into main.js and main.ts is again loaded

as a script into this index.html so I

know that style.cs is the place where my

all the style should be placed if I am

going to affect the whole application

because this is directly loaded on top

of my index HTML so that's the way how I

know that I need to put it here

in here whatever I change whatever I put

it affects everywhere for instance let's

say we put hush 2 and call uh color is

let's take this

what is this

why do there are so many colors with

different names let's say gold

save

H2 becomes gold okay so this is the

basic idea behind the CSS but CSS is

like an iceberg whatever you see on

screen is very very uh limited and they

have so many things you can control uh

you can create

control the whole HTML element

animations you can make many many many

customizations

that cannot be explained in one video

but most of my applications what I do I

always go to the browser search for some

cool components and then I just copy

their CSS items and the modify them

according to reduce or else you can go

ahead with using uh some of the popular

you

ESS

items like bootstrap or Tailwind CSS

whatever you want but we will we will

see that later as well now

we have the main TS we have the C

style.css file and let's go back into

our app.view so now that we know how

this HTML element is associated with the

style if it is scoped then it is

affecting only the X percentage inside

this template and if it is in style it

affects all the elements

the good thing about a view 3 is you can

put in previous versions of view you can

have only one children inside the

template like if you put a view and

another div it will not work because

there are two children now now it works

previously it won't work in previous

versions of you now we can have multiple

uh children that's not a problem now

let's say I have a

do

and

now and image

sources let's download some image and

add them

I mean bringing anime I have added an

image into my assets at dragon.png

smaller dragon

image what I will do inside my demo

component I will say the sources where

is metamovie this person inside

component so I need to go one level up

into the folder if I put it in public

then I can directly call them so let's

see how we can go outside if I put dot

and slash I have only two items inside

the same directory level which is demo

under hello world if I put

to the one dot is for same directory

level two dot is for one level above

Plus in the previous level what do I

have let's go back here I have a app

here I have main TS and apart from that

I also have assets folder and components

folder so two level up one level up so

dot is for same level two dot is for one

level up one level up

I need a assets folder and then drag on

PNG and I need to give all the artists

for like in case the image is not home

what is the text I need to show I said

close the tab that's fine it's a very

straightforward and a simple one let us

not do anything much let's keep it very

very simple and I don't have a style I

don't have a straight

virtual script not from a script

language is equal to PS okay the reasons

we have used uh

um uh typescript when we are creating it

we need to specify that if we go into

the app view you see that script you

have the language is typescript if you

go into the arrow World also we say the

language that I'm going to use inside

descriptors are the typescript uh

usually if you are not using typescript

you don't need to set it up but let it

be there let us not do anything now let

now and we have now a template which is

called the demo view go into my app View

and I'm going to say

if if I need to use this demo I need to

First import that component inside my

application in case you are from a C

sharp or a Java background this is like

uh importing the namespace or import

using the namespace in c-sharp or

importing the names trees and Java

something similar so here we are going

to import but in in script we are not

importing the namespace itself we are

importing the component itself the whole

component there are two ways like there

is called as a named export and the

normal exporter we will look into that

in a later stage but currently let's say

you can give any name you are importing

something and I will give it as JJJ

from

foreign

I have imported something from the motor

View and I'm giving it a name called JJJ

and why did I give it as JJJ

thank you sense no

no but I want to show you that

it doesn't matter what your name

unless you are using named exports you

can give any name you want and you come

inside

now what is a named exporter

do we have named exports here

nope

here

nope okay we were looking to the named

exports at a later stage anyhow but

currently we know that we have placed

something inside this

demo and we are importing the demo

inside

so since this JDJ is just to show you

that you can name anything you want but

I will I'll make it a reasonable one I'm

importing

demo

come from demo.io

there is no nowhere I have specified

that whatever I import from it should be

named as demo now that's not a named

export it's a normal one so I have it

here let me go back to My Demo View so

you have now set up a separate component

and you are importing the component

inside another component so this is a

way how we can do it now we want to

reuse it press Ctrl space Sorry alt

shift down arrow in I'm using Windows

10. so now there will be two

now that will be true you want to adjust

the way how it looks

go to your demo and in one place you

adjust it and everywhere it will be

uh effect error moments ago while we

were discussing about uh

CSS I said there are three ways how you

can access your elements one is directly

calling the element right like image

and then put this one and call it the

other two ways are through ID through

class so first let me show something

write this

100 pixel

uh how it's spelling mistake

so height is now 100 pixels for both the

elements both the components where I

have imported the height is now modified

now it's okay I say that image is like

I'm directly affecting the image so in

case I have one more image with a

different uh uh

different uh source for instance let's

say I use

view dot SVG

even that becomes hundred

no I don't need it I want a dragon

should be at a different height and this

should be at a different way then in

that case we have something called ID

you give this is Dragon image

and I give an ID

call it as a view image how do I access

my IDs you can directly access your

elements using HTML elements using like

a um

for anything that is related

hash

dragon vmg

and say

hide this 50 pixel

save it

what happened you are already having the

image you are setting the height then

again you are calling that Dragon image

and say the height is 50. now let me cut

this

and uh okay let us not confuse that

press enter I will change this class ID

to class

and I will change this ID to class save

it it will not work

yeah

let's refresh

the reason is

when you put hash that is for ID of the

elements for classes you need to put

data

only the places where you have data that

will affect it

so what I'm going to do

for a dragon I have a class and here I

have an idle

for ID as I said we need to have

hash

and height will be

250 pixel so I repeat again to access an

ID you put a hash symbol for accessing

the class we put dot symbol and to

access the element itself no symbol

directly call the name and press save

there we go

so 50 50 250.

I'm going to show something I have

commented about this Dragon but before

we proceed I'm going to open up my

uh browser I use

Firefox I have uh which is

devtools installed and you need to do

that you need to go to extension so

search for add-on

this is the same for both Firefox and

chrome and Firefox I could get view

review.js type tools I have installed it

then I will be seeing it here whenever

I'm dealing with any UJS website that

will show up for me

um you can do the same for

[Music]

Chrome as well

I'm quickly going to add one more

element now what I'm going to show now

is I'm going to show how the Precedence

works

hello world save it and let's let's run

our application it's already running in

a location

okay hello world is there let's go back

to our app View and remove one component

okay save it should have only one now

that we know uh two things uh one is uh

we can access the priorities we know

like you know the priority of

the element the class the ID but we

don't know the Precedence order of

Precedence which gets the priority what

if I have all three

that's two and then I have a class

called uh

[Music]

texture class and then I have a ID

called

text ID then I give all the words here

let's do like a

texture CLS

Indian red and font sizes

3M

save font size needs to have an iPhone

in between

or maybe forum

okay and I will do a hash IDs text ID

when I say color is pale green

and font size is

2m say

okay and then finally

H2 itself

the element itself then I copy this

let's change to

1am

and color is

yellow

now which takes that most recent answer

and let me open up a note right now

let's remove it here itself the way the

order of Precedence is

I'm not sure if the spelling is correct

order of precedences

one

HTML element

is it the order of persons no it's the

let's say

um

Target element gets utmost top priority

Target element

how to increase the size of this

View

zoom in this View

okay

Control Plus equal

Control Plus equal increases control

plus minus decreases let's put Control

Plus equal and increase this one

this whole one is different it looks I

don't want the left side I just only

want this one

okay I found out where it is so it's

present in uh when you press Ctrl equal

it increases the whole application which

is not that we need so let me press Ctrl

0 it resets everything

or control minus 2 minimize the control

equal

for an application this useful uh

this is stupid

ah okay so I was saying Ctrl shift to p

and I have something called Zoom call

editor font zoom in now

do they have shortcut key for this they

don't have a shortcut key

let's say decide the key is

Ctrl shift to five

nope

Ctrl shift 5.

if I press Ctrl shift to existing

commands as a spending why do you have

control alt

Ctrl alt five

ah no one has shift all the side okay

shift alt fine or maybe shift out

shift alt equal to no one has it okay

shift alt equal to

and uh

shift Ctrl p

Zoom editor Zoom

did I miss something

uh editor font Zoom for zoom out and

reset

let me check this let's zoom out I will

say shift control

minus

good

but it's not a shift control minus

okay

seriously guys

zoom in zoom out is there if I reset I

will set uh

shift alt zero ah someone is already

using wire using that

shift Alt

shift alt 9 seriously

shift Alt

come on shift alt backspace perfect

enter

close it now let's try shift alt equals

that's good so shift all the equal and

increase

so that's fine

and gold wrap also should be there

water okay but why am I in the screen I

should not be here

okay the order of priority is the target

element inline CSS

gets top priority

then

element ID

then

element class

then element

tag

I don't know should I be calling it as

tag

HTML

element identifier

why do we need to confuse this

HTML

identifies what is to do

whatever

let me select our control backslash so

that it becomes commented out now let's

go up

okay

so as I have said that we will see from

topmost item so you have H2 you have a

class you have ID but the C even ID is

present it is taking the ID because it

is again the most uh order of

pressurizer so that's pale green if I

change it to

pink and save it should take think

and now if this is not present what will

be the next order it will take the

element class save

classes in the Android

if I remove this

class and text to both are like yeah

class and text to both

it will fall into yellow size

very small

so there we go and the topmost priority

is always inline CSS because you are

saying that this element directly has

this value Style

font sizes

[Music]

Forum like 3M and

color is purple save there we go

so this is the order of distance for uh

CSS

the next step is we have the hello world

here

but what if we want to see or give some

messages like this like instead of the

value directly we need to be able to

pass the message or the value for my

parent component to do that let's go

inside the demo part

the moment I use the key setup that

becomes

sorry

let's try

okay the moment I use the letter uh the

the key script it becomes a composition

API object

and so

we can do one thing we also need to set

up the language which is TSS

let me go here

okay what what is the what are the

things that we can expose from a script

we can expose a couple of things

one we can expose functions

and you can expose uh properties

to be filled from outside

and again how internal Properties or

attributes

like if you are from Java or C sharp

background you know that attributes

means some property or classes which are

accessible it's like the field which is

accessible only within the application

properties are

items which are

accessible from external values or

external methods

and then you can expose let's just only

focus on these three things

first and foremost you know for a proper

T value should be filled from outside

you need to define the props

just take a look at the script there is

no script the moment I press this

oops

you know what I thought there is going

to be something kind of

intelligence or slippers which will

directly do this for me looks like there

is nothing now

so that is all right so

Define props

when I put it inside

what is this

brackets

close it out

that's it let me save it and what does

it say it shows summative uh

it just gives me how I need to save it

like whenever I'm defining the props I

need to give the property name and Then

followed by what type of property it is

let us keep it simple now let's say I

have a property currently I don't but

let's assume that I have a property

called message and this will take up

only strings

that's it

you need to put it inside a

what is this called Curly basis

okay and yes this is not

it's a string

okay so what I'm saying let me save it

what I'm saying here is

and this particular demo component

the huberty it's an exposed property

when I say Define props this is a

property which can be accessed from

outside the world outside this component

there is a property called MSG which is

accessible from outside and this is a

kind of a string property that's what

I'm saying so the moment I go to this

app now when I press something in the

message now this is the receiver how do

I know that this is received so all I

can do is I can directly

whenever a component is loaded

everything inside the script will be

first and run now so which means that

whatever you put here any script that

will be loaded when this when this

object itself is created there are

several life cycle hooks like what to do

when it is mounted created or destroyed

whatever you want but currently let us

just do console.logger I need to log the

value message so like anyhow I'm

entering the value here but how do I

know that the value is received at this

point or not to do that I can I cannot

directly use MSG because this is an

exposed property or an external property

like this to be filled from outside I

can call it as a you know for namesake

it is an external property

or like expositive property

post are exporter whatever it is this

property will be filled from outside to

access this property from inside

you will not be directly able to call

message that will not work even if you

try it would fail let's see here

yeah you don't see that but if you press

F2 you see that message is not defined

which means the message is not

accessible then how do you access if you

are using old options API you will be

trying for props dot MSG

let's save it

and refresh

again you are not able to

read that option because props itself is

not defined so what do you do

in composition API you need to put it

inside a constant and call it as any

name you want it we call

E prop Maybe

so I'm defining this as an e prop and E

prop has a message

and if you press save clean this refresh

there you go hello

so if I change the name now hello to

hello lingam save

updated so app.view is now of data and

obviously the hello income also got

updated we're seeing it here because we

are not using it

that is totally fine now e-propriate

message we know that this is there

to access this message internally like

the message which is filled from outside

if you need to access it whether it is

an exported property or an internal

property

there is only one way there is not one

way like there is one most favored way

and there are other different ways One

is using the mustache symbol

um

View

are like

streamer most types yeah of course

it looks you know like I don't know why

they gave it a stats number two opening

braces it's it feels so uh

It Feels So chauvinistic but still we

call it as much as symbol and I don't

want to use the term stats like let's

call it as double braces throughout the

video so uh we will use the double

braces uh somewhere here in the hello

world I will use double braces double

curly braces double curly braces and put

e chemistry

now I will close this shave I should

become not the same the same in the vs

I should be now able to see Hello lingam

so this is mustache number but we will

be I

rises even though it is very long so the

double curly braces with MSG and go back

to here hello hello save

this color is so disturbing me so go

back here and change the inline color

very easy

there is inline color let's change and

remove the inline Style

so now it falls into ID what is the ID

color is in pink let's make the ID color

as yellow

and this one is

PL three

in size let's make it 3M

sale

so hello world is there and if you go

back and say hello World 2 whatever the

value that I changed here will get

changed so instantly the moment I save

it in the code in production environment

when you are

manipulating the values with regards to

some API or some user input you will

still see them same like this oh going

back to My Demo component so now I have

managed to do one thing I added one

property value

what if now let's try and add one more

property and I'll say

subtitle and call it as again as string

or let's say h so we call it as a number

and

um

so if sleeping call it as Boolean

and one more

title again it's a string so I expose so

many properties now and all these

properties will be available here

for instance h

it's a number again so let's say 34

save

uh type string is not assignable to type

number

so it's a type of number so 34.

element is missing and the tag where it

is missing in demo component

why it is processing okay forget about

it let's just give it like this and we

will handle it later

go back to this demo and then I will

have a couple of other items or maybe

here itself I can have message followed

by space

here I will just say

version of the message I will see

one more tag

Ctrl shift alt down arrow and this one

will be my hatch 3

[Music]

I will say h

this message you will call it as name

go back to app and this is no more

message this is name

you go back to demo and we have named it

as name name

and name hsh

and followed by

one symbol followed by

sleeping is

double curly braces with is sleeping

save

age sleeping the name is

sleeping is there go back to my here

name is Hello World true but I'm not

seeing the allowable too is here the

demo is there

am I missing something

ah this is H2 and this is H3 let us

remove the classes

save

let's keep only the classes and remove

the ID

[Music]

perfect so far uh save all

and close this refresh okay so let's try

to change the hello world instead of

otherwise that's the name right I will

give my full name

save

that's my name but it's not looking nice

so I'll just keep Simple just saying

there you go

start from 30

and it's it's updated here

32

so 320 I wish

okay let's give that a call give example

is sleeping is false in case I say it's

sleeping it's true

so sleeping is true

instead of true or false I can go back

to My Demo here so what we have achieved

now we have exposed sum properties let's

remove title we are not using

it there are some errors that shows

that since we are using typescript it

says that this is uh you are passing in

a number string but it should be a

number but in case you are coming

getting this value now we are directly

passing in the value so it says like

this that if you're passing in the value

from the script you are fetching

somewhere you will directly convert this

element to uh number this one you will

convert it to a Boolean and then it will

pass it through so you can fix that

later but now this is fine going back to

the demo

so I now know like something the double

curly braces I will be able to

do does that mean that is

this is the only possibility now did you

notice something

I have given my property as the camel

case first letter is small and this

again word special letter is caps

uppercase not the lower case so it's a

lower Keys and this is uppercase but

here it is taken Kebab case which is is

sleeping which means that if you give

camel case it will still accept Kebab

case as well let's say if I give camel

case asses that is still valid if we put

false

for also so Kebab is camel case view has

this way of converting it so let's just

uh

appreciate it for this purpose

and uh going back you can not only put

uh the property in your uh

curly braces double curly braces you can

also give a method directory for

instance

you might have known uh from C sharp I

believe it is called as null coasterator

of course

sing operator on C sharp

uh it's an alcoholic no not this one no

this is for

um

checking if your values it is called uh

conditional term area ternary operation

yeah

if the condition is true you give

something and colon you give something

else this is same in Python Java C sharp

everywhere since we are dealing with uh

web we will go for JavaScript

uh this is something like this you give

a condition then you give the specific

value if true if also conditional

ternary operation so if it is if

sleeping just say yes if not sleeping

say

nope

now false means no because it's sleeping

is fall safe

yes

is sleeping yes did I give slim I'm

always sleeping that's okay if sleeping

is false

even though I have given false

let's say true

and see what happens

something is wrong let's go back to the

demo and it's sleeping is false

Boolean right this is bull ah okay

because uh even though this is Boolean

giving some value there which is uh

where is my appearance it is considering

it as any value is present so it is

the answer in case I remove it it will

be false

no so I put any value inside not only

true I put any value inside

that is considered as true

that's the reason why we need

the value to be assigned hmm

anyhow that's okay I will come back to

this later let me put sleeping is false

even though this is false uh my

typescript says that this is a string so

this is not defined so what obviously

happens is it takes the circle that's

okay totally fine

button

and see how it looks save

okay a small button is seen here you

might be wondering like how we took the

color and how the hover everything was

because it's coming from this style.cs

is the default one in case you want to

modify something you want to modify the

Border radius color whatever it is the

background color I don't need this let's

say green

glue and save it I will be seeing that

change here so it's up to you and

let's let's go

let's change this up

and go back to My Demo component button

and I will say

button will be called

each save

and foreground I don't like this color

itself so save all and go back to my

style and the button let it be the

previous value whatever it was before

uh some dark color

save

because it was much better than the

beginning

something like this as well

okay whatever let's go back to the demo

and we have that done and this will have

a lot of other functions as well right

click method on click method you can

bind it one click okay if this is

directly coming from there and uh you

can bind V on V this uh colon with on

click everything has the same meaning

like you can create a function here what

should happen when you

press the button I'm defining a function

this is saying like uh creating a method

in any other programming general purpose

language like C sharp or Java function

and I'm going to call increase h

and uh I will call it here something and

a present I will just say console.log

we are here

save it and go back to this what

happened

uh

unexpected token ah okay where is this

unexpected token that happened

the function should be with uh

to open and close brackets increase

h

ick

increase the use of which we come on

click increase it so I click

call this method increases let's keep it

simple like that delete everything

president

you see like there are six times this

button is first that's why it is

increasing to eight now it's increasing

to 8 10 times so which means that this

is working this is working and we are

now able to change our

you what if we need to change this age

itself shall we try

uh H is equal to h plus

1 will it work

currently we know for a fact that this H

cannot be accessed directly like this

you need to access from here

let's just try h

dot value

is equal to e v dot h Dot

it's showing so many errors are presents

uh that is okay we are only seeing

whether we are able to access it or not

save it

we are here and we are facing so many so

many errors can't assign the property

value on 35 not an object I'm going to

just keep the age there and instead of

increase age we will say increase salary

and

we will come back to the other one later

we'll create salary and we will have

foreign

here and this one let's see

salary is

dollar

salary

whatever we are going to do now

and take the salary instead of exposing

from outside I'm going to keep it here

insert salary is equal to

4500 let's just just you know like this

and uh

salary is equal to salary plus one

just see

this will not work on me anymore because

salary is a constant so let

salary currently currently Let It Be

instant

not a constant increase salary

invalid projects you know we are not

here we are here yeah

once we have done that

we need to show

this seller you need to log what

salary

what is the first salary and what is

increased something like this save

delete everything increase salary it was

four thousand five hundred of course the

JavaScript kicking in

let's remove the brackets here so it's a

number

oh very good

that you know the reason is it is

considering this 4500 string and this is

a string and that's the reason why when

we press that uh it was giving me a

uh what do we say before it was

concatenating them the easiest way would

be to put a plus symbol in front of

whatever you consider as a number

and add it with another

one

so now when we do this we are fresh

it's saying that is a mirror

what is the error

forget about it

uh

okay now it is increasing each time I

press it is increasing to thousand

thousand is getting increased

so it is writing the first one which is

we'll call it as

current

ah

[Music]

and here

on crystal

okay

let's check now

delete save save it refresh we don't

need to refresh at all but still I would

like to refresh current is fourth

wagonal increase with to 5500

now it is increasing okay so we know

that this method works so

but now this is not the only way that it

also have remove and say V on let's so

instead of that

symbol we are using V on click so it

gives the same uh uh value

you could see that it is changing from

13 500 14 500

.

each time I change the value is getting

changed but what happens to the salary

element itself it is not getting updated

only the value is getting changed but in

this uh binding is not working so it was

working in the first instance if you see

when it was when we changed to something

it was able to modify it it's not

accepting a presenter so what do we do

we need to somehow make this salary

reactive which means that this becomes a

reactive element or they should be

a trackable or you can think of whatever

term you want but somehow when the

change happens here uh view the elements

should be able to catch that to do that

we now go into the next one called as

import there is a keyword called ref in

composition API but I will directly type

ref and press tab so I got this

referendum reactivity I don't know if it

should come from more reactivity or

directly from

video

I will give it a view

what I do

I'm just going to wrap my initial value

with ref that's it I don't do anything

else but when I do something like this I

cannot have let I have const

okay we we already know that when we

change the value here we are doing it

but increase it's giving me current

object object and

of course it is called multiple times

probably uh

three times but still we are not seeing

the value that's because once you define

it as a const with the ref which means

that you are referring to an object

itself and this object has a value

don't put plus here then you are trying

to join this object with this object and

it is not able to identify just put a

comma

so you are anyhow the log is it is a

spreader operator which means that

whatever you give everything will be

like

first is a string and let's say you give

55 and then again you do a false

whatever you give with the comma it's a

spread the operator everything all the

array object will be logger something

like this

if I save this page

refresh and press this you could see

that 55 false so we need something like

this instead of that if I save salary

now and see this this should give me

I need to refresh the feature

the object itself so salary has now

become an object which is kind of a v

object something it is being

a vue.js so to get the value already

that's it there you go

okay so you are in three salaries now

here eight thousands now

what we need we need to increase the

variable

somehow it will not work because salary

is a constant and you will not be able

to change the constraint once it is

assigned so the only option as we

already know is instead of setting the

constant we set the value directly and

not like this we will get

uh let's say

salary you there are two ways how we can

do this but I will just directly use

salary dot value

Plus

let's say for every click I get those on

an agreement

and again we copy this

and paste it below and say updated

salary while you save this press

increment

for some reason

my function changes are not reflected

here let us refresh the screen

okay

but did you notice something not only

here even your HTML element value is

also getting updated so this is the

reactivity

earlier when we were having the let

value like lead salary something the

changes are only track uh here but it is

not updated in the UI but now the moment

you start using the ref keyword whenever

you change something it is also uh

updated

using the reactivity or how view Json

does it internally it will update it so

that's there we go uh so this is about

the ref keyword itself you can do this

and I was speaking of this functions you

don't even need a function

even uh copy this

and uh I'm just showing you how it will

be done just paste it here

inside the brackets

sorry

let's say double click places you place

it here

and uh you don't need salary here

save

it still works

here it is now updated that's what is

the screen

it still works but here you will not see

because the click is now not calling

this function this increase salary

function but in set directly you are

updating the value the thing is when you

are directly calling this property from

the HTML element you don't need to give

dot value because you are calling the

value directly but when you are doing it

from your function or in a script you

need to call it via the value

so let's go back to what it was before

the salary by this time not inside a

double curly basis I will just keep it

like this there we go and the first

system and here here

is okay

okay so this one so this is how uh we

can get value from my external object

like this uh put some value save it and

it gets updated I changed it to 38 and

38 is updated and if I go into demo then

the function to change the value track

and change the value internally using

the ref keyword this is all with the

composition API and for options API you

will have different the ways using the

data Expo data methods

and then we have one more thing which is

the life cycle itself what is our life

cycle you find to look into

our life cycle hooks view three it

should give me

ah here no not this is this a one ah

they have a map you can log it from

anywhere you want uh I will prefer going

to the

uh what is this one the official page

they have a nice chart here so what

happens is whenever an application is

set up

before create you have a method and

whatever you want to do before create

you can do that and after create then

before mounting before mounting is

basically when the application

loader into the Dom Elementor Dom

element is nothing but uh

uh I don't know full form of Dom

document object something but this is

the HTML node and after it is mounted

and before run mode and before

after unlocked basically after once it

is mounted then we don't have access to

all these things you have like before

update after data shall we see

um we will create all and then we will

see how it works

quickly for the life cycle

and now again we are in composite

purpose you need to import the life

cycle

methods from view if you directly try to

do it it will show up you here but it

will not work I will show an example of

our monitor uh on model is fine

what should I do on Mount that

um

you see it is immediately called from

inside if you don't have the keyword it

will obviously throw error and this is a

same like our defined props so you need

to call that and within the

curly this is Curly braces right within

the brackets you need to define the

function whatever you want to Define

like what should happen during the mount

or update the same concept so here

I will call this one

let's do so whatever is inside the

curly braces what does it say you cannot

find name one motor so of course so on

counter

now there it is and it has another error

what does it say uh ah okay so it is not

expecting uh curly braces it is

expecting a function now we can do it in

two ways uh we can either call a method

and say handle Mount and just give this

handle mode here this is one way like uh

you you can use a method and in case you

have a particular function which is

should be called a during runtime for

different ways like for unmounted for on

creator for everything you want

something you can call it like this or

you can directly use the uh Lambda

functions okay it is called as Lambda

and C sharp and here it is called as

Arrow function I can use Arrow function

let's just keep it simple now

console.log

uh I wanted

let's just save it and I'll just copy

this here because anywhere come on I

should have copied it

okay what happens now

I am saving it

uh we we saw this

um

what is that uh

[Music]

uh chart right a flowchart of some

vue.js website let's see it's not here

let me open up again separately

life cycle hooks

there we go so what does it say Mount is

before the object itself is mounted onto

your uh before Mount are unmounted like

before Mount or after motor is basically

before it is surrendered so if we have

uh on mounted we also have before

I will just say

I'm

about to be more

why does it say not because before Mount

is not presented

okay now I have called in before month

what does it say view has no exporter

named before

okay let's open up our uh

five cycle hook before Mount is there

and before grade is also there

let's put the

of we should be calling something like

this so

okay because it doesn't have a function

which takes no arguments it as a

function but this function was not like

that

that's forget about it and see what

happens

thank you

indirect exporter before mode connector

okay

okay so maybe it is not there

before Montrose and after options AP so

let's see what is their amount

ah like unwanted we have on before

okay

so on mounted on before

okay let's save it delete everything the

fresh off screen

okay could not establish connection

let's clear again refresh the page

I'm about to be mounted first because it

is uh called first

I'm about to be mounted and then after

that we are mounted so we now know that

uh this is a life cycle hook on before

moving what about create and create you

can still have the same same concept

on create

I don't know let's go here

create

a like on

on before update is there before is

there

on updated

hmm

okay so we don't have it it seems but we

have some other items we have activate

deactivate the error captured update

error let's go for updated on updated

on before updated

okay let's see

let's copy the same

and do whatever you want

updater

um before updated

I'm about to be I've updated

updated so let's save this and delete uh

refresh

first we are mounted we say like I'm

about to be mounted and I mounted so

Mount and on mode happens when we are

switching the page like when when we

change the page the object itself is

unmounted you again change the page it

is mounted so let's see increase salary

it is going to update

so what happened here when I press

increase salary it went to this function

and then it executed everything if you

could see that after this execute is

happen and this left function then U JS

Refuge is kicked in and then it was

about to update the salary then it

realized that we already have a hook for

two so before update it is saying hey

I'm going to I'm about to be updated and

after updated it says I am updated so

this is the way how

the life cycle who works if you want to

show something uh before update you show

this if you don't want to do that you

can change it can we play something here

more I will just take this one

and before I am going to update this now

this is not an ideal scenario but what I

will do I'm about to be updated

for

salary dot value

and what I'm going to say

I don't want this like instead of

thousand I will say minus so what

happens is whatever we do uh it will

increase there and it will

decrease it here

uh shall we try now increase salary

okay so uh for some weird reasons my

save is not accepting so I'll just uh

refresh it okay so

press

see here

I am about to be updated to 9 also 600.

but the moment I update it it Still

Remains the Same what happened at this

point I am reducing it again so you can

have the before update on after update

whatever you want and it will change

them again before mount on moved all

those values could be modified

did you notice something

let me go back here and

put something here

and say

minus

500. so each time when the value is

trying to be updated as a penalty I am

going to be reducing the 500 I will

reduce whatever they tried and then I'm

going to use it something

let's see one thing

okay

increase salary

now what happened

maximum recursive update statement

exceeded in a component

why is that because

you are trying to do something you are

changing the salary inside this function

and before your update you are again

modifying the salary that is all totally

fine but after you are updated you are

again trying to change the value which

means that it will again trigger this on

before update and again trigger this we

are trying to enter into a recursive or

an infinite Loop so what happens you see

here

so first we try to change to you see the

value in down here we try to change add

1000 or 8600 we are about to update to

9600 and then what happened we kick it

in here to on before update if we change

the value and then we

went on update we reduced the value the

moment we reduce it this is happening

after the render so which means that it

will again render and then again it was

reduced

reducing and then it went back so after

some time uh the stack Overflow happened

and it is lost and if I remove it here

when the before update is triggered

whatever value you change is not going

to

re-trigger or put you into a infinite

Loop let's see this one

we've seen

maybe we can give penalty here 500.

save this refresh

increase salary each time I try to

increase salary

I am going to reduce 500 analogy so I am

trying to put 11 000

but what to do what do I get okay maybe

I need to put minus 1500 whatever the

value that comes in like 8 000 600 I am

trying to add a thousand to nine

thousand six hundred so I will reduce it

to to keep it simple we'll change this

to 8500 so it will look nice

I try to add 1000 to 9500 what will

happen I reduce the amount 2500 so it

gets reduced

so it's quite straightforward but this

change is not going to trigger because

you are already about to updated so

whatever change you do is not going to

affect when you change something after

the update or after the render happens

it will again trigger it again and again

so that's the base idea there so that's

it uh we now know about how we can

expose properties using different props

and we know how to use the ref keyword

and when we change the values or when

you do something like this how the ref

is then going to affect our update

automatically and we also know a little

bit about the life cycle hooks

we were looking into UJS composition API

so far and now we will move into uh

router in the beginning I explained

something about Vita

so all these wheat and other JavaScript

Frameworks are constantly evolving so

the best way as I explained at the

beginning of this course is uh to always

look into the official documentation to

see how we to get started because they

might be changing something so the same

applies not only for beat it applies for

vue.js or for a router or Pina whatever

it is always go to the default

official documentation to see how to get

started this is a trick that I always

use for um instead of watching thousand

videos I always go to the default

official documentation and from there

I'm going to the doors to understand

something this applies not only for vgs

for all any new programming that

and now we are discussing about view

router to change the pages go to view

router and go to get started so to

install you need a view router at four

cool

this is the basic thing and and skill

this uh

what is this called terminal

and let's

close this application

npm install

view router 4.

so this is the first time since the

beginning of this video we are adding a

new uh component a new library before

that we were only installing the default

ones if you go to the package.json now

you will be able to see along with the

view now you have view router so view

router is water the one that we

installed now this expects any view

router version 4.1.6 and above so

anything you install again like pina

stores or some 3js libraries whatever it

is everything is going to be

uh head into the dependencies here next

time when you are saving it into your

git repository or something do remember

to add option okay we're getting more by

default is already there uh okay so

since I did take more uh ignores the

node modules uh in case uh any of this

uh cores or this demo will be present in

the GitHub you can get the source code

from the description uh of this video

all you need to do is just open up run

npm install and then run your and you

should be able to get this up and

running and you can play with

it and now that we have installed a

router

how does a router box and see if they

have some kind of

explanation for this

whole course is just to get a basic idea

not any in-depth video so let's see

whether they have something

okay I don't want to do this now uh what

I will do I will directly go ahead there

is one thing called as uh use router

first first and foremost thing first

let's see in there one uh getting

started

we have uh most important thing is

router link and router view those are

the two things even you don't need a

router link the important thing that you

need is a router View and you need to uh

add this JavaScript method or JavaScript

file you need to create a file to handle

it also so let's do this that's what

we're going to learn in this section I

will go inside

first thing let's close everything here

okay let's come back to this page this

is because we are using typescript and

that's the reason why we have a just

type checking

let me create a component called route

sorry not a component uh file

routes that uh typescript

okay so this is the only file which is

going to handle all our routes now we

have already known that index

loads main tscript so whatever you put

in your main case will again be loaded

into your application so go to main TS

and along with importing The View you

now going to import the routes from the

same location right

loads

dot TS this is present in

same location

routes

what does it say

is declared but its value is never used

of course I'm going to use it

so use routes

so I'm just saying that hey view when

you're creating the application and

before you mount it please use this

route so it also said yes should be

there is it fine now import path can not

end this TS extension consider importing

JavaScript

okay why not okay so now that we have

our empty router uh these uh maybe this

is quite straightforward and quite

simple when we are dealing with uh

routes

what we need to do is we need to create

a router that's uh that's the whole

purpose of this create a router and

Export it that's the whole purpose of

this external file how do we create a

router we need a method which is already

a part of

um

view router so we added this right like

here we added the view router so view

router is there go back to our routes

and let's say

Imports

a method I'm not going to see what

method now like import a method from

view router and what is the method

let me press control and then

the space it will show me all the

properties enums and everything there if

I go down

okay so see here whatever with the cube

sign that means these are all uh

some of the methods so I have I need one

thing which is a create router method

because I already know this is the

method which creates and even the name

is also straightforward let's not do

anything let's just create something and

call as router and the create router and

process method export this method out

you cannot export directly to default

yeah declaration expected default export

a router from here and go to your main

application uh you are importing router

from this routes and you are using so

you are saying that hey I have a file

called outs.js and it is exporting and

named export called router and just

because we are exporting it as a router

you need to have the name so you're

exporting it as router and use it

everything is fine now let us

run npm run run through to see whether

we are able to work on this or not

press f2

there is an error which is that

in the view router JS options is

undefined so we know we have not defined

the options even though we have told the

view router to create a router he

doesn't know what it needs to do because

it has a couple of options you need to

provide those options to understand what

are the options I always do one thing if

in case I am dealing with anything

related view or react yes or whatever it

is just go to the definitions and see

definition what does it do it will open

up the source code and show what is

there go to the definitions and this is

expecting something called router

options and go to the router options and

the easiest way is you could see like

pressing F2 okay just select it and here

it is not exporting it is actually

extending also which means that let's do

it is extending and it is extending

something called path parser so

everything will be here it is expecting

a history it is expecting a route

what does it say ah you see they already

have an example

you can call the history and you can use

a router for example a route should be

blah blah blah blah blah something but

anyhow so history is nothing but web

history so when you press this forward

back button it will move that so for

this they already have a method called

creative history that's totally fine for

routes itself they are providing

an array of road record what is the

route record that's F2 is there and go

here route record is

exporting

different items so this is like Aura you

can use route record single view single

view children multiple view you can do

anything you want let's take multiple

view for example so you are exporting

again it is extending the router record

base which means that a router record

base will have all the properties

so you need to give your path something

like backslash and whatever is the path

and you need to you redirect okay you

see that there is a question mark which

means you can can or cannot do that like

it is up to you it's optional but this

path is mandatory

name is also not mandatory

okay only the path is mandatory here

nothing else is mandatory okay so this

is how you go inside and look into it

the other ways when you start writing

intelligence will kick in and show

everything so let's do this first and

foremost history we already saw

something called create history let's go

here import that method create a web

history or something

create web history because this was

mandatory that's the reason why we are

using it how do I know it is mandatory

go to F12 go to the options it does not

have a question mark which means it is

mandatory routes is mandatory what will

happen if we do not put like the scroll

Behavior parse query those are our like

with question marker so it are not

mandatory and there are what will happen

if we don't give a mandatory value let's

try to save this and see the error here

save this

see route is undefined because route is

mandatory a mandatory one should be

presenter router

routes what was it it was an array we

already saw that so we open up an array

and it was having some kind of uh

something called as a road record base

which had path is the only mandatory

value so let's go to routes and say

path

and let's keep it very simple like this

why the path has an error

okay so array should have

an object object or something like this

Dynamic object

save it do we have any other error

no error that's cool so we managed to

build our uh

router but we are not using the router

anywhere so this is fine

um

what if we want to use one more router

so we do the same here

and say path this instead of backslash

we say backslash demo

and that's it

let's see

refresh

perfect

now go to your uh Main Place we are

using the router we are importing the

router and we are using the router

so it's from route.js

okay so now that we have created the

router we have later but will it work if

I put like this

demo

now it's not working why because even

though I have put the route and even

though I have put

different routes and we updated a web

history we are not consuming it how do

we consume a router to consume a router

you need to use something called as a

router view so basically instead of the

app.js or like here in app.js we have

this Global icons here and where is this

getting saved it is getting saved in a

place called

index.j so instead of mounting uh

directly there you need to mount the

router view then router view will kick

in and do everything that you need

so what I am going to do I am going to

do something

here

instead of this device I will just see

your router View

just save

there are so many errors what is the

first error that we have just remove the

Demo First

we press this

file index.html

is not able to parse let's maximize it

to see

unable to parse invalid character of

tagline file in index HTM or line 11 and

the column eight

it is not able to just say we have to

profit

okay so even though you give a router

review it is still mounting because the

app view is not mounting onto the

foreign

so in the app you let us make it let us

create one more component or like just

cut them all out

okay save it

so they should be gone move it back to a

complete here

save it

okay so everything is now a part of

hello world we have two components

allowable components and demo components

in the app view instead of calling the

demo like this just close this one

and in the template just say router View

saved and the remote component let us

move it we are not using it anymore

what happened here

everything is fine but the router

doesn't know what what no match for

location with the Slash

backslash so let's say demo

no match phone for location with path

backslash demo so what does it say uh

location is there of course obviously

when we go to this main TS router we

have the location but what have we done

now did we specify any uh path the path

is there but we did we specify any

component if we specify any child that

we specify any

name nothing is there so let's give a

name name start mandatory let's just say

like the home and here let us just say

demo page

and I will add one more now it is

getting clumsy we are adding it again

and I just take them out constantly

route so it's equal to again cut them

all out

paste it here

and the routes is equal to

routes so now it's uh it's it's okay it

needs little arguments now

create router

and

export router now these are my

routes

I don't know whether you call it as root

or router you know

I'm being I'm calling this route

uh component we need a component what is

a component whether it is a hello world

where do we get it I need to import them

first so along with this import

import hello world from

components hello world

Dot View

and import demo from

components demo Dot View

okay now I'm importing hello world and

putting them so here we can easily say

that it says the component is not

defined defined course it is not defined

I have not home will be hello world

and here

component is

Dem

cool save

now we have whenever the backslash is

there we are going to hello world and

whenever the backslash demo is there we

are going to demo that's what we are

telling our application to do

but what it does instead

Whenever there is a backflow update

okay now this is working fine you know

why because whenever there is a

backslash what is the same

required a prop at a hello world amount

that's why the prop message is required

at present let us keep this simple uh

we need to spend the message

so there are different ways to handle

this like there are more than one ways

to handle this because hello world has

is exporting a property or defining a

property called the message and it is

also consuming it here as a double curly

braces inside the H1 so it is expecting

some above the account one so what we do

currently just for this demo purpose I

will show a different way that in

another video we'll look into it in

depth how we can maintain a different

Horizon

Dynamic values So currently along with

the component it is expecting some

property

we know what is the property even though

it is not shown in the intelligence I

know that it is a property called

uh

MSG

I will go back to my route

and say there is a property called MSG

it is expected I am saying give it hello

world 3.

press save

hello world three so this is how you

pass a property to an imported component

but there are other ways to dynamically

import as well but we will not focus on

it in our presenter we'll just keep it

simple so uh path is there and the

moment I press

demo I go into my demo page so how

because backslash demo gives me the demo

page with component dim and that gives

even this everything with the worker

minus will work and if I go directly to

this

now I want you to know something

it again went back to 8500 so whenever

the application is mounted it is reading

the values again let's go back to our

demo app what's happening is whenever I

change the value here from the URL it is

a refreshing the page it is not a single

way of course it is a single page

component but it is refreshing the page

again I don't need this to happen I need

to have some kind of navigation buttons

when I press those buttons I need to

change the page but without changing the

uh refreshing the view or refreshing the

Visa I'm going to app

above the router view I'm going to add

one more View

and let's say

save this and nothing should be seen

because we are not doing anything here

now

in the app

you do

first let us see uh which gives me to

google.com

and see if it works uh

Google

just see if you're there we are getting

this Google so it's coming up on the top

uh I need something I need this to be uh

I'm going to do an inline style and I'm

going to say the position is absolute

position is absolute

absolute absolute means it is not a

binder 2 anywhere so it should be now

hanging around

uh what happened the white space of

course white space

it's hanging around now it's not there

it is absolute and it has a top margin

of 0 amp so it always goes to the top

and it's not only that it will also have

a left margin of uh let's say one m on

the top on one name on the left so it

will be there like that

okay uh if I add one more

ah

am I seeing it uh one by one or in the

flex okay that's perfect though so now I

have three

I have three and when I press one I'm

going to

ah okay

oh what happens is that when I press

this since it is uh taking only relative

absolute value that's fine let's do like

this so let's give the protocol as well

and say uh no no this is not relative my

brother this is absolute

uh okay save it

refresh

so now this is not relative this is

absolute the last one is still relative

when I press that it says that it tries

to go to uh the page google.com and it's

not able to find anything that's totally

fine so when I press this and say home

and I give it a name called demo

and uh let's save backslash and let's

say backslash

but should I need a backslash itself

let's say let's see how it goes

50 degrees

refresh home demo

home demo

cool

okay increase salary home demo degree

salary

now again what it does

it does the same thing you could see

that my page is getting refreshed so

each time I change my pages completely

refresh I don't need this one I will do

something instead of giving a gear F now

I am going to use something called as

a router a link

so let LED be here let us just comment

it out and have something called

router link

and we have two

backslash and give a name home

let's just do it again one more time and

say

demo and give a name

demo

save this

home demo home demo increase salary home

demo

remote home demo you didn't notice the

tower this is not loading the page

itself what it does it is only uh it is

not loading the page but instead it is

uh changing the view alone like the page

along the component alone is Switched

but not the page itself is created again

how do we know that

you know are not going more technical

anymore like this is an introductory

video so the EA means that we are giving

a link to the browser we are telling the

browser to change it but using the

router link and just simply changing it

the page itself is not getting loaded up

so if you have some heavy dependencies

it will not be affected

maybe you want to wrap it around

something like this

I have a div and inside this I have

and this router view is no longer

so we are mounting it here

and uh

I have put one more div and say

H1 and call it as will come

uh let's um

let's learn oh

three pictures

and put uh

Style

background

color is white

or against

Greensboro

save

something like this and here

Style

color is

Gray

perfect and now this deal should not be

here it should be this remain div itself

should be having uh

should be on top somewhere above

everything and then we should have our

ID here because we are controlling the

body from somewhere in the CSS so go to

the body where we have we are saying it

is a display Flex a minimum width

maximum with Place item Center

okay go back to our

index and say

cut this out keep it on top

you cut this out

keep it here save

now it is one by one because it is a

flexor that's the reason why we have a

then one by one go to the CSS remove the

flux saw now this is no longer a flexor

so it will now come one by one and go

back to my app index this is no longer a

flex but still my position is going to

be absolute and uh I will have the same

concept as before uh

it will go to the top

and I will have a width of uh 100

percentage so that my this one goes to

the right

always and then Gainsborough is not

recognized let's do okay Gainsborough is

nice but just a lot of gray is not nice

to give blood pressure

okay and uh let's uh fix the height

that uh

forum

let's see how it looks

oh yeah it doesn't look good height is

fixed but this uh content itself is not

filter

so the content is rolling out here now

and why am I playing with all these

things

uh let's say this color is fine and

let's give again

uh font size of

um

30 pixels

okay and then this one will be floating

and uh

position is

sorry float writer float on the right

side

so it will go to the right side

let's learn View 3.js and this one is

fine let's go back to our application

now and uh where is where is it where is

so here now you have the link why did I

do this

I remembered why this

sometimes like

lose track of what I'm doing now let's

refresh we'll have a

hello

the drinks

now what happens here when I press the

demo just see what happens the whole

page is loaded even this let's view its

loaded up

the whole page is refreshed you could

see that for a splits again this is

getting loaded and then it is getting

applied now if I change this

to like this and

press this one save refresh first

let's load one more refresh

okay now when I change to demo you could

see that only the component which is

inside is getting rendered now are like

moved to one item to another

the other way around the whole page is

not getting louder that's the main idea

behind the using a router link instead

of a means that you are instructing the

address bar to change it and ask the

browser to reload it but router link

means that you are just telling the

component view to change the link page

from one page to another that's all fine

you can assign it

eraser what if you give something that

is not present

and something is not present it will

just say that it is not present that's

it quite simple but we need to show to

the users

this is not present data so to do that

go to your routes

now this one just bear with me because

it might look a little confusing now

we are going to use something called as

path matching

why do I use it and uh where do I use it

first thing uh just you know this is an

inbuilt or default of blue Js

way so I just say that I have a

uh what's called

anything so let's say auth match I

believe

I'm not able to find it but obviously it

is a path match so how do I know that

because I have

already seen it and uh

okay so what I'm saying is that the

whatever is after the

backslasher so it's basically

regular expression

whatever matches anything then

this is what we say

not found

not found

and the component you need to give a

component call you you need a component

to display So currently we don't need to

export or import a component we are

going to keep it very simple I am going

to create a component called

not found the component which will be an

inline JavaScript like view component

inline component

how do I do that not found a comp is

equal to

whatever you will put inside out so

whatever you will put inside you just

put it inside a curly basis and just

Define it there so whatever you have

like template you have script you have a

style you have so many other things but

we are not going to focus

on this we're just going to say very

simple uh we have like template

okay

and the template will be

a new item data

so what is the temperature

and let's say

do

why is it not working

am I doing some mistake

foreign

[Music]

probably

let's say

oh

it's not able to identify the space so

ready

let's just have a H2 just say that

now in reality

reflection what you would usually do

what I usually do is I will go here not

found a templates CSS I'll just try to

download like thousands of

templates

not found page not founded with there is

not form templates CSS there are several

templates available I will just take

whatever I find this interesting and I

will just open the code

and copy the HTML copy the CSS I always

try to stick to keeping something very

simple no JavaScript only the CSS and

only the values here that currently let

us not go there that that way we will

keep it like this I'm just saying that

the page not found straight forward page

not found and uh not phone component

whenever the page is not from display

the not form component

save this

it has another error component template

option but runtime is not supported

in this build of you configure your

bundler to his view to aha okay in this

Builder it is not able to access the

template only when you are using Direct

and JavaScript you are able to do this

perfect

no one wants you to be a

straightforward thing so let's say let's

create new file and say

not

found

is not wrong

page not found

and we are looking into this template

right like The View

I showed uh for for some reason I

remember there is a snippet

so this is an extension so let's go to

the extension

view

Snappers Maybe

ah sorry that's not this one

this has a we already have it then why

am I not have to see it though

they have some examples how to lose it

totally forgotten

we base vvv

E-class so they have something called V

base 3 setup okay let's use it

V base 3 setup

so where is the file that we created

it's there in not page not found

and uh

Ctrl V

base

very weird it's not working

anyhow

is it because I did not give it a name

okay

because I did not give it a real name I

just gave you this path so do you let's

try now V base of three okay press tab

I got a language scoped

and setup blah blah blah see this is the

difference in our demo we saw like um in

the script we are directly calling the

setup

uh but there is one more way which is to

export and set up here you need to

return when you are having a constant

when you're having a property method

whatever it is you need to export it to

avoid all those issues like uh you know

you directly remove like this that's it

so it will remove everything you can

directly have it

lying is equal to TS okay we're not

going to do its script instead as of now

but here let's say

H2

page not found

this is fine this is coming from page

not found View and go back to my route

and uh just like this I'm going to call

pitch not fun

this is called page not

found

and the imported PNF there is a problem

we are not able to find something so

imported PNF is this and template is

removed save

so it should now show me page not found

and uh for some weird reason it is going

up uh maybe not for some weird reason

maybe the way how we have set it up

go back here and this div is here this

div is here and uh

let's put them both inside Wonder

so

and I will do one thing instead of

observing I will say sticky

save it

cool

V so the page not found here when I go

to home I am having home

when I go to demo I have demo home demo

and we will have one more link now which

will say this is completely

so we will which will redirect us to

completely on unavailable value and this

is happening where is this happening

this is happening in Apple so another

link

with uh some arbitrary value and say

dummy

and let's put some space

you know you should not be doing like

this you should be adding some CSS to

handle it but that's okay when you try

dummy the page is not phone because if

you could see in the top of this page is

not found demo is found home is found by

dummy is not found

very straightforward right so that's the

way how you route it inside your app you

load your router View and provide some

different links somewhere this is not

the only way you can think of

creating another component maybe a

separate component called as a sidebar

component or navigation bar component

itself create a new view component

called navigation bar now design it very

nicely and then load that component here

so one component as a sidebar component

and then you have a router component

when you press that you directly ask

your view JS to change the route

so that's it we have now seen some of

the basic introductions interview JS how

we can deal with router the thing is

this is not the complete one or actually

I have so many so many things still

pending uh you can have a rendering

based on a list you have the Far East

rendering you have that two-way binding

you have uh fetching the element itself

using the template rough and much more

are there but this video was only to

give a basic introduction about how VJs

component API composition apis

I will prepare or see you all in another

video a detailed one where we will try

to build everything from scratcher

so thank you for watching so far I hope

you got at least some basic idea about

V3 thank you