Hi guys, in this lesson we will talk about we j s and we j s basic operations with uj. s works with via command line interface. With using this interface, we can create projects and we can test them easily. To create a project in command line interface we can use will create plus project name. This will create a project with node module dependencies. node module is a library folder for Vue js.

This library libraries come from NPM repository. For example, for Java, we can use Maven repository to pull jar libraries. Similarly, for vj s, we can use NPM repository to pull JavaScript libraries in here. You can think that for Java, we can use POM XML or build Gradle files to configure libraries. So, how can we provide it on Vue JS to do it in view j s, we can use package JSON file, there is no component type in vj s all types can be handled with functions. There is no MVC structure in uJs.

So, there is component and all structure can be handled in compound. In view j s, there is one way data flow, but this is not like react, so, we don't need to create a function to handle it. One way data flow works like we can change data or instance from only HTML or only code. So, the code can be manipulated from only money. So, the skill provided easy to follow it and easy to develop. The other thing is we can do it from command line interface is to add new NPM library, we can do it easily with using NPM.

Install library name and save parameter. We should use a parameter add library installation because say parameter provides the Save dependency to package JSON file. So we do this if we lose our node module folder, we can regenerate it using the npm install command. You can think at like refreshing Gradle, or updating Maven file in Java. Additionally, in VGS, there is just one main HTML page. This is index HTML.

The other components are related And with these HTML files in vj s to provide it app tech is used index HTML this f tag is taken by Document Object Model, then everything goes on with JavaScript files. So everything goes on with that command object model. Main JavaScript file is main j s, the other components are related to it, these your simplified in view j s to call other components, the components should be imported, then component can be called with the name of it. For example, in main j s, the app component is provided with App tech. Later. f component is called with view render function in Vue js, each company opponent has three main parts.

These are template, secret, and style. template is used for HTML rendering, secret is used for controller part of compound style is used for stylesheet. Each component can be described with Wi Fi. So you can write every component and every sub component as the front page in vj s, there is one main configuration file. This is main j s, we can describe external plugins here. For example, we can describe bootstrap or jQuery from here also, here is the gate for other components and routers in VGS, the lifecycle of components goes on with four main parts.

These are treatise mounted, updated and destroyed and all of them has before and after states, first one is created and before created, it is related with data. In vj s, we can create instances or objects with data capsulation. So, if you want to catch the state of component before data initialization, we can catch it from before created function. Or if we want to test the state of component after data creation, we can catch it from created function. Second lifecycle component of VGS is mounted or before mounted the before mount Hook nice right before the initial render happens, the mounted hook is called after component was created on down, it is called after brandish. Third lifecycle component of VGS is updated or before updated.

The updated and before updated hooks run after data changes on our component and the DOM re renders. Last life cycle component of Vue js is destruction hooks. This reaction hooks are invoked immediately before a component is unmounted and destroyed. Before this ROI is fired right before teardown destroyed hook is fired after everything is unmounted on our compound There are two main extensions in uj s these are view and j s. js can be used for everything, but in generally in view is used for render HTML components. So, we will use view for HTML render compounds and for others we will use standard j s extension. There are five important functions of the J s component.

First one is data, it is instance store of current component, it cannot be accessed by other components. Second one is props. Props is short for properties. It is used for communication between child and parent components. We can pass data or event handler with props from To child or child to parent, third one is computer to function. It is used to render operated aggregators or computer data.

For example, we have first name and last name as data. Later, we want to see them like first name plus last name in our HTML for So, I mean, we want to see it like full name. So to do it, we can also do it like we can create a full name computed function. Then we can directly call it like an instance from HTML for it will be recomputed on reactive dependency chains. For important function is methods. This function is a capsulation of the other functions of the JS code.

Comment. So if you want to write a new function, we should describe it in methods block. The last important function is watch. It is used for listener function. For example, we want to listen routers. To do it, we can write a function in butcher block, then we can catch location pet chains.

And the important thing about it, we can get old value and neat video from watch function in vj s. The other important thing is exporting and importing two important components from other components or sources. We should export it. There are two export types. First one is we can export it in default mode to do it, visual ad export default prefix to compound in this case We can import it from other components without using braces. Second one is we can export it in normal mode or with braces. In this case, we can import it from other components with using braces.

Okay, now we will talk about important syntaxes in wages. First one is we can display HTML with template tag in vj s. Second one is we can show component video in HTML like with double braces. Third one is we can add if expression with the if tack in HTML. The other one is we can add follow in HTML with a V for that. And the other syntaxes goes on like that. That's all for beginning.

Thank you