Vue.js 3 Crash Course 2020 Part 1 | Learn Vue.js

so what is going on youtube my name is mehul and welcome back to another video another crash video crash course video in which we'll be covering about view 3 which has just been released and we'll be covering the breaking changes what's new what's happening not an exhaustive list but we'll be going through some of the most common things which you will encounter as you transition from view 2 to v3 and if you're just a new person to view in general this is fine as well if you are aware about a little bit of html css javascript stick along and we'll be having a lot of fun with vue.js in this whole crash course so that's all for this video let's start with a full one all right so why should you go ahead and start with vue.js well the website lists the top three reasons that is it is approachable it's versatile and it's performant but my personal view about vue is that you should start it because it's easy on eyes right so if you're new to html css javascript world if you have just completed it you're just getting hang of things then vue.js can be really easy twice so that's that's a big factor in pushing you especially if you are somebody who might just give up if you are not uh understanding a lot of things right so view can help you with that particular aspect but yeah it's it's a good framework it's performant just like it says so definitely it's easy to start so definitely you should give it a try so let's go on and start with the installation the setup which we need on our local machines to get started with vue.js alright so let's just go ahead and set up the vue cli first of all which is going to be a powerhouse for your vue.js projects even though you might not use it a lot right away but it comes with a lot and lot of things even a whole full-fledged ui for managing all your projects but we'll be using cli uh because cli is cool but anyway let's start first of all what you have to do is install the view cli globally so just to view cli like this this is gonna install view cli globally for you if you already have ucli then go ahead and append the latest to this as well why because you need at least view cli version 4.5 in order to start a view 3 project and if you're running anything below that it won't really start your view 3 project and the versioning is a little messed up on the vue cli because it's on version 4 the view project is on the view libraries on version three so anyway so just go ahead and just write this command anyway um you can install it globally it's fine and let's wait for the npm installation to complete and once it would be done we will be able to use the view command which would be starting off our view project all right so once you do that what you're gonna see is that now you have access to a view command in terminal right so what you just have to do is say view create and the name of your project in our case let's just go ahead and say it hello world and it's gonna scaffold it's gonna start the project based on what options you choose so you can see that we have now the view 3 preview so let's just go ahead and start with that if you are watching this in future near future you might just see view 3 so that's fine as well and let it just run a little bit while you can see that we are running on view 4.5.6 anything above 4.5 is fine so if you're below that just go ahead and update your cli version so let it run and once it's done we would be able to start our project in vs code again i'll be using vs code for the series you can go ahead and use any text editor you want and it would be fine all right so you can see that we have some instructions from the cli so i just cd into the folder and i started my vs code instance by the code command and this is how it looks like right so we have a basic file structure for vue.js we have a little bit of assets and components that's fine we'll just take a look at how this looks like and this is basically a component for view right so if you're new to this whole thing do not worry but the first thing i want you to do is actually go ahead into the extensions and right here v e t u r right so this extension is basically uh providing you the autocomplete and intellisense for vue.js so go ahead and install it right and once you do that you're going to be able to have all those vue.js auto completions and you know linting in your project ready so once we have this let's just go ahead and now let's just go ahead and start our terminal and i'm going to say npm run the command which it says the serve which is gonna in effect run this command view cli service now if you're coming from a react world this would look very familiar to react scripts which is exactly what it is right so under the hood it shares pretty much the same logic so it's gonna take very less time within a couple of seconds to compile and start the server so it's it's pretty cool right and here's our application right so let's just go ahead and merge these two things because we'll be using them together for the most part so here's our interface and you can see that view actually comes with all the good things baked in automatically right so if i go ahead and open this component and if i try to say yo and save it you can see that it automatically just hot reloads not really it does not really refresh or anything so that's that's pretty cool you can minimize this if you want and i can remove this and it will work as well so we have done our setup for the project so that would be all let's move on to the next one where we will be exploring more about vue.js hey everyone welcome back let's just take a quick look at what's happening right now so you can see that inside a public folder we have our index.html file which has nothing fancy but just a single div id app tag which is going to be important so just remember this then in the source folder we have this main.js file right and by the looks of it it looks like oops it looks like that this is the entry point right so this is view three now if you're new to view this won't really matter to you a lot but if you're coming from view 2 you know that in view 2 what used to be the bootstrapping process was something like new view and then you go ahead and start working with the application but from view three this is basically changed now we have a new function called create app which is then called and then the view app is started so let's just go ahead and create something like this create app right and then what i'm gonna do is just say app.mount app like this now it does not really made a lot of difference but we're going to be customizing this this basic application right away in just a second but i just wanted to give you a quick look at what's breaking in view three this is the first breaking change and if you're coming from view two your application would absolutely would not work unless you make this change so there you have it there's the bootstrapping of the application has been changed in view three and once you do that we'll be good to go so that's all for this video quickly see you in the next one for actually our hello world program with vue.js all right guys welcome back and let's just go ahead and start with our hello world so first things first for hello world i'm just gonna blow away the app.view file which we have at the moment so src app.view there we go and we also have a hello world view inside component so let me just go ahead and blow off the whole components folder so now we are on our own right let's just remove this line actually let me just go ahead and create another file helloworld.view now in vue.js the things are divided into three main sections the first one is your template right so the template is gonna be what the user sees the view of the component right and this is a component you can consider this file as a component the next one is going to be a script that is the logic where everything happens in vue.js the binding the data binding you know your business logic of things goes in the script and thirdly you can have a style um not really skip but a style which is going to be it can be a scope style that means these styles would only be applied to this particular component but you know you get the idea across so we have a logic section here we have our view section of the view here and then we have the style section right pretty straight forward nothing fancy you know if you have if you're coming from a react background you know about these stuff um in react you're gonna get a single component where this would be inside the this would be inside the render function this would be your actual function and this could be technically a separate file or you know you can have a bunch of ways you can go with jsx styles and what do you call them i uh actually forgot the styles yeah style jsx right so you can have pretty much anything you want but here we are so let's just go ahead and write a very simple hello world right and uh once we do that what we need to do is actually get this app right here so i'm gonna import app from hello world dot view obviously so this is there and let's just go ahead and start our view server now so i'm going to say npm run serve which is going to start a development server and once we have that you can basically minimize it and refresh it right here for the first time and hello world is what we see so you can go ahead and write your all your static html right here it will not really matter one quick thing is that you know this is working just fine even though i have two root elements inside template h1 and p this is a view 3 feature it used to not work in view 2 so in view 2 you would have to give you know something like this in order to make it work this is also fine but now because we are running view three this would just work out of the box so there's that our hello world not so difficult i guess right so that's all for this video in the next one we're going to be starting off with this part that is the logic part which is where view actually shines so see you then in the next one really quick hey everyone welcome back and in this video let's just go ahead and take a look at the data in vue.js now what do i mean by that well first of all let me just go ahead and remove that sidebar what happens is the the ultimate goal of using these frameworks like react view angular why we are using them well we are using them because we want to plug in dynamic stuff into our html right that is one of the big big reasons that you want dynamic things to happen in your static html content html by itself is not very powerful that's why javascript extends that thing using the dom api now vue.js allows you to plug in variables directly into your html code using something known as the data now the data is basically a function which you're going to export default from your logic part this is a function which consists of all the variables which would be available in your view that is this this view for you to plug in right now there are multiple ways to plug in things but whatever you return from here would be available for your template so let me just go ahead and plug in let's say my name and i'm going to say this is mehul mohan and channel let's say codemap right simple enough nothing complicated let's just change this now and i'm going to say my name is mohan and i run go down right so you can see it reflects just fine but i'm not using any variables so let's just go ahead and replace this with double brackets like these double curly braces and my name and if i save this you see that we still have the same output and if i go ahead and do the same thing with this with channel we do that and we still have the same output now if i go ahead and run this rename the system code num2 you can see it directly updates in the view itself now this means that this particular variable or this particular expression is bounded to this particular value right so yeah that's basically how the data thing would work in vue.js which allows you to store a bunch of data in your component it's basically a local sort of state for your components so as to say and this is how you're going to inject those particular values inside your template you might not always need to do that and there are other ways to have you know computed properties and everything but this is a start so that's all for this video i'm gonna see you in the next one really quick hey everyone welcome back and in this video let's just take a look at the mounted method in view which actually is fired when your component like this is mounted right so it can just help us to you know initialize a bunch of stuff where we actually need the component and the data to be available before we do any action so it's as simple as just writing mounted right here with a you know as an default exported object we just have to write mounted and this function would fire i am mounted whenever the object whenever our component is basically mounted right and i believe i have to fix the prettier rules because i hate this double quotes and everything but it's fine so you can see if i go ahead and refresh this page we get a bunch of consoles first of all and then we get i am mounted right so if i write a debugger statement right here and save it and if i refresh right here you can see that we get the component mounted first of all and then we get the debugger being called right so this is just being called after the template data and everything has been mounted successfully so let's ignore the eslint warning whatever so here we have it and once we have this mounted let's just do a console log of this right now what's gonna happen is that view whenever it calls these methods you know because at the end of the day this is just a regular object just a regular javascript object right so it's basically just you know something like const something is like this and then we are just doing export default of something right so if i go ahead and call something dot mounted that this right here should refer to this particular object right that is how this works in javascript and i have a full dedicated video on how this works in javascript you can check that out but for the most part what's gonna happen is that the value inside this is not really just gonna be this particular object why because view actually adds a lot of magic to this particular object it populates a lot of new fields it sets up listeners events everything so let's just see what happens if we let me just go ahead and quickly revert it back if we go ahead and do console log this you see that we get a proxy object first of all so a proxy object basically means that view is actually intercepting whatever call if we write on this particular thing so the first thing which i can notice is that if i write this dot my name i get mehul mohan being console locked now the reason for this is in an ideal world this should not really work because i should access this dot my name by something like this dot data dot my name right but it works anyway because view exposes all of your properties returned from the data function to the this particular object so that is why you are able to get and that is why you are able to set these values as well so if i go ahead and say this dot my name is something else and if i save this you're gonna see that it gets updated to something else and let me just go ahead and show you one quick thing if i put a debugger right here and refresh this page you're gonna see that when the component actually mounts my name is in fact mehul mohan right here then in the next line when i change this it's going to fire up some event listeners which is going to update the view in the next dom tick or whatever scheduler view is using under the hood so if i play this again now x ignore the eslint warning but we get something else right here after me mohan was done so you see this value when it was changed in the javascript world it got automatically synchronized in the html world as well so that's pretty cool right so it's it's basically called data binding we'll get more into that but uh yeah for this video i just wanted to show you the mounted function it's work that it is run after the component is found in and let's just go ahead and look at all this stuff later on so that's all for this video i'm gonna see you in the next one really quick hey everyone welcome back and in this video let's just take a look at all the other different methods in the view lifecycle so i'm going to start off with before create and i'm just going to put a console.log statement here real quick with every method i'm going to say before create was called this method is the first method which view would call when you call the app.mount code right so this is the first method in the list of all these methods which would be called next we have the created method which which is technically called when the injections the template injections on everything are done but the template is still not ready so let's let's just take a look at that later on i'm just gonna put a debugger point and show you everything then we have before mount where this method is called when the component is about to be mounted on the screen and then we have the mounted call and then we have a bunch of more methods that is before unmount which you can imagine that if you are on a if you are having a route based navigation or something like that then these methods are called right so i'm just going to leave them blank because we will not be navigating away from this page so right now you can see that before create was the first method that was called then this created was called then before mount was called and then mount is mounted was called right so it's basically an order um in which we defined as well as what i explained so let's just put a debugger point in before create and let's just refresh this so you see that before create when before create debugger is paused we have nothing on the screen that means the template is not available because the template is always available after the thing is mounted but let's just go ahead and try to actually console.log this dot my name here as well in every field right and this one and this one all right let's try this one more time refresh so if you go to the console let me just go ahead and open it right here if i can there we go or probably not let's just go ahead and take a look at here so you see that this dot my name right now is undefined the reason for that is that before create is called before all the template injections and everything is completed right so this is the first method which is being called just after you call the app.mount then let's just go ahead and shift this debugger point to create it and refresh the page so now we are halted at created and if we go to console you can see now we get mehul mohan ready but we still do not see html within our home page that is within our whatever it is the browser page that is because created is called when the template injections are done that is this data is available the data is called but our view is not available then finally before mount is just called before your template is mounted and the reason this method is there is because you can have these templates compiled on the runtime as well so right now we are using all the good tools but you can just basically throw away a view application inside a script src and load it from unpackage and get along with it right so if you do something like that view has to compile your template on the fly so that is why before mount is called before it starts compiling all that stuff right and the next thing is mounted basically when the whole thing is done the html has been mounted you can see on the screen we have the html available still in the debugger and obviously we still have the mehul mohan available so this is a quick demonstration on the lifecycle method before unmount and unmounted are pretty similar you know when you're about to be unmounted this would be called and then you're finally when you're unmounted this would be called so yeah that's all pretty much for this video i'm gonna see you in the next one really quick hey everyone welcome back and in this video let's just take a look at methods in vue.js which is basically the methods available to your component to be called to be fired to be said as event listeners whatever right so we're going to start off with methods but just like you see data is a function not a regular object methods however is just a simple plain object why because you have to define your methods inside this object and those would be functions right so let's start with a method called hello world like it could be pretty much anything you want and let's just say this is just alert i am available right now what we can do is we can have obviously have a mounted method and i'm going to say that once we are mounted i'm going to say this dot i hello world right not this dot i am available and you can see again this is exposed to this object thanks to the proxy which vs not really vs code the view js brings in so that we can just statically access it under this thing so now if i refresh you can see that i get an alert i am available i have to ok it and that's it right again if i refresh it on mounted i get an alert and that's fine so this is a simple method right what you can do is you can define these methods and link them with the data right here so that for example if your data is changing you can fire up a method on every keystroke or every click or every mouse over on that particular button and do some particular actions right so we're gonna see that in the event handling but this is how you're gonna use methods and link them with your data that's that's the idea overall right so that's all for this video i'm gonna see you in the next one really quick hey everyone welcome back and in this video we're gonna be taking a look at expressions in vue.js and basically what's happening is that these expressions not only just allow us to spit out the data values inside the component but actually consider them as the javascript placeholders for performing basically anything and i'm going to show you a little neat trick to actually remember what you can do here at least that's what really happens in the react world i'm not very sure about how view works internally on the expressions part but the only thing which you can write in these expressions are the values which you can pass when calling a function what do i mean by that consider that we have let's say a generic function something right and let's say we have a b right here so when you're calling something what can you call it with the with the arguments being right you can give it a number right 10 20 you can maybe give it a string you can maybe give it an expression like this 30 or 40 where you basically are giving either one of those right but you cannot really give if something then you know you know just run the code and you cannot really also give for i equal to zero i less than right it does not really make sense when you're calling a function can you really give this but you can have an array like one two three you can give that or you can just say something like this just square that every element in that array and it will just respond with one four nine right so in a similar way like how you are calling a function consider this whatever you are writing inside this as the argument being passed to a function right that's how it works in react just like i said i'm not sure about view but this pretty much applies this rule pretty much applies to view as well you cannot have if else right here but you can have conditional operators like one is equal to one and then i'm gonna say hello right and if it is 2 then hello otherwise oh no right and we get oh no because obviously 1 is not equal to 2. so i can say save math.random is greater than 0.5 and we'll start getting random results right because obviously sometimes it is and i'm just refreshing the page sometimes it is and sometimes it's not so this is basically it about the expressions now you can think of pretty much anything you want to write so i don't know you can probably do a math dot sqrt of 100 as well and it'll just work fine just like i said it's just javascript placeholder for you to play around and yeah that's pretty much it for this video i'm gonna see you in the next one really soon hey everyone welcome back and in this video let's just take a look at view directives so directives are basically attributes which are built by view and have a special functionality inbuilt so what do i mean by that is that uh is that basically for example if we have you know back in the days we used to have h1 align left right center which is gonna just put your text in left or right or center so this is an attribute right although it's dedicated but still it works similarly view has its certain attributes which are actually directives which extend the functionality of a particular component now what do i mean by that is let's just go ahead and take a look at the example which we looked earlier i'm gonna throw in mounted here and i'm gonna say this dot my name is equal to random right and you see that when you refresh this page the only thing you see that it's random right although i have shown you by putting a debugger here that it actually renders mehul mohan first and then it switches to random because of the dom update now how does that happen well it updates the dom right it updates this particular expression right here right but what about if i do not want that particular thing to happen what about that well you can make sure of that that your variables are injected only once when they when the component is loaded by using a directive called v dash once right so this is a special directive and now if i refresh this page you're gonna see that we only get my name is mehul mohan and i run code dam even though we were supposed to to see my name is random right now the reason for that is not that this call was never made but the reason is that it had this directive v once and it got updated only the first time when it was rendered we can actually just go ahead and see that in action if i go ahead and write something like this and right here you can see i get random but if i refresh this obviously we are getting uh the hot reloading was bugging in but right now if you see if i refresh this we get random right here but we get mehul mohan right here which is you know because of the v1s directive so this is how directives play a little bit of part in the next few videos we're going to be looking at more directives which make your html much more interesting without really involving a lot of javascript right away so yeah that's pretty much it for this video i'm gonna see you in the next one really quick hey everyone welcome back and in this one let's just go ahead and take a look at another directive the next one is basically called the v html right so i'm not gonna go and cover all the exhaustive list of directives trust me but we're gonna be just covering these few so that you know you get that hang of using directives so this directive right here means that whatever variable i write in here for example raw html vue.js is going to take this variable from our data set right here and it's going to parse it as an actual html right and actually not a p tag because that won't be really visible let's add a b tag so if i save this now you can see that our html is in fact bold right if i go ahead and just go ahead and remove this and i say raw html is and i'll just go ahead and echo that out within with the help of an expression you can see that our raw html is in fact like a string if i just use a simple expression but if i use vhtml then we get an actual evaluation of that particular html thing right and it's basically the exact html which i passed you can see in the debugger on in the inspector so this is again uh it could be a use case if you are getting some sort of trusted data from back-end server and you want to display html right away but again be very careful with displaying user-based data with vhtml because that would be susceptible to cross-site scripting attacks and all sorts of trouble would land on your head so never do this thing with a user input but you should know about that this functionality exists right so yeah this is another directive and again you cannot really do anything when once you have this particular thing defined because you can see that we also get an error but the reason for that is that vue.js would actually overwrite stuff inside this particular p tag so you cannot really do any sort of html or anything right here if you want it has to be an empty tag once you have defined a vhtml directive so that's all for this video i'm gonna see you in the next one really soon hey everyone welcome back and in this video we're gonna be taking a look at how to loop variables with the help of vue.js that is how do i trade over data that is a very very common use case when i'm going to be taking a look at json payloads which you get over from rest apis you're going to probably be getting some arrays or you know objects so as to say so let me just go ahead and first of all remove this and i'm going to save this as uh i don't know programming languages right and we're going to start off with javascript which is the favorite language of everybody here and let's just move on to c c plus plus java right all right so now let's just get rid of these things i'm going to say my favorite languages now what we want to do is we want to display these languages inside a list now how do we do that well first of all we'll define the you know the ul tag the next thing is you want to define the container which should be repeated right so in this case we want li to be repeated over and over again right you can see it works just fine now what i want to do is i want to say we dash for so you can even see that if i try this it saves me the renders the element or template block multiple times based on the source data so it's gonna render this particular li multiple times based on the data and what is the data the data is programming languages but how do we want to iterate over this data right we want to i trade over this data with the help of getting each and every you know this element as an individual element so i'm going to say for language in programming language that is the first thing and then we output using the typical expression syntax in view and we just say this language right here and don't just ignore the error which we are seeing right now and if i hit save we're gonna still get a bunch of errors so our linter is not gonna let us live with that so anyway what this error is about is specifying a key to this particular to every particular li which is which is basically if you're coming from a react background would seem very very familiar right so how do we do that well we say we bind key and then we specify a particular field that could be used as a key right and the scope of the variables inside this v bind is basically whatever you define here plus whatever is available in your in the environment and for the most part you're going to have some sort of association which is unique to every particular element in our case it's the name of the language so there we have it right so now you can see you can refresh it's basically your list now what happens here is that this syntax right here it is not strictly speaking javascript it would sort of appear to be like javascript when you're working with objects but this particular syntax works both with arrays and objects what do i mean by that let's just change this to an individual object right so i'm going to go ahead and start off with you know name javascript then this let me just go ahead and define this again because that would be easier name as javascript right the next one is also going to be named as c the next one would be name as c plus and finally name as what was it java i guess i'm not really sure but anyway so here we have it and you can see right now it tries its best to just just stringify the whole thing but what we really want to happen is the lang.name right so there we get it and then again for the keypad we're going to just update it using lang.name because that is the key now that is the unique key now right you can also get index out of uh the particular iteration so there's a second sort of you can say argument or anything which is passed when view calls this particular directive and that is the index thing and how you can access it it's just like a regular variable and something like this right so you can say zero is javascript one is cc plus and you know it just typically works just like this and because this is a javascript based evaluation we can just have something like this in the place right so this is how v4 would typically work you would always always want to have a v bind with the looping things so that vue.js knows that which element is associated with which dom node because when we start adding and removing dom nodes quickly on the basis of clicks and everything view needs to keep a track of which node has been removed and added uniquely so that it can have performant dom updates right the purpose of this key is to uniquely bind a particular li to a particular uh let's say item so that if in any case it is not updated we do not just unnecessarily update that dom and recreate that particular node for performance reasons right so this is how basically you're going to start off with looping you can see that in syntax was followed both for objects as well as for simple arrays and in fact the fun fact is you can actually just follow this on a single object as well so that's that's what i really meant when i was just starting so i can say language is javascript and creator is i don't know right so now what we can do is we have language with us in programming language which is going to be iterating over this object now with the help of object.keys or whatever it uses under the hood so what we want to do is we want to say this is going to be lag just like this and let me just go ahead and remove this and let me just go ahead and remove this as well so you can see now that it actually i trades over you know the actual values of the keys right here of the object of the keys right so it starts with language and then creator so that's how it all works right so that's all for this video i'm going to see you in the next one with more things in vue.js which we want to cover and uh yeah let's get started with a lot cool stuff in view so i'm going to see you in the next one really quick hey everyone welcome back and in this video we're going to be taking a look at event handling in vue.js very basics starting off with the click thing which is the most common use case so let's just go ahead and put another p tag and i'm gonna say rand number and i'm just gonna say number something like this right and we can obviously return it and start it with a math.random property right so this is what we get initially now what i want is when i click on this this number should change and how do we do that well we have to attach an event listener first of all to this particular button and how we do that is you might have guessed it now with the help of another directive which is v on right so v on means that you know something which will happen on this button and what should happen is on clicking we want this particular button to run a method right and this a method is actually the name of the method which you can define right here so i can say console.log i was called and we'll actually see that particular thing happening uh no this is not a function this is just a regular object and we're going to see that particular thing happening in the console as we do that so if i click on this you can see we get i was called in the console so from this point onwards it's pretty straightforward actually you just have to do this.rand number is equal to math.random and that's basically it right so if i click on this you can see the number is changing and we also get the console logs so pretty neat stuff nothing fancy going on here or nothing magical going on here except for the fact that view actually takes care of everything for you so that's pretty magical right and uh just just a short version of what view provides it so that it's even nice on the eyes is that you can replace that v on with an atherate character right and it's basically gonna work the same way so it's basically just denotes that it's uh you know an event listener which is attached now on this button with the other eight character and it just looks nice so yeah that's pretty much it for this video i'm gonna see you in the next one really quick with some more action hey everyone welcome back and in this video let's just take a look at how we can use we bind as a directive to actually bind certain expressions to particular attributes right so just like we took a look at how we can make use of v on as a event sort of listener on elements sometimes well sure enough we can use expression like this but sometimes we want to bind that particular expression to a dom property right for example let's just take a look at input and i'm going to say input value 1 2 3 and if i save this this is what happens right this is uh one two three is here now let me just go ahead and start writing an expression here instead of one two three rand number and let's go ahead and just say rand number is one right so right now you can see that instead of actually this being appearing as a number it appears as a plain text expression which is not exactly what we want so what i really want is whatever is available here should be updated as a value here so for that what we can do is we can make use of we bind off value instead of you know just go ahead and making use of regular value and then we can just drop these curly braces because view already knows that this is going to be an expression sure enough you can write a number here as well it would work just fine but it's going to work with variables as well now right similarly if you have value with random number obviously it will not work because it's just a regular html attribute but v bind makes the magic work right so once we have that in place v bind allows us to drop this whole thing completely just like we had uh the drop meant of v on and replacing it with an ampersand with the other eight sign for v bind we can pretty much just go ahead and remove this thing completely and just leave this column right here so as to dictate that it is a special attribute because if you do not do that you can see we immediately turn into a regular html attribute but if you do it you have the v bind on now right so this is basically how gonna do that but what's what's really happening is that if you try to change it it will not really reflect above because it is not two-way data binded it is one-way data binded right now if i go ahead and right here let's say inside mounted if i go ahead and say i don't know or maybe not really in mounted let's just create a method called change num and if i say this dot random is hundred now and if i define a button on click i want to call change num click me right if i do that if i click on this you can see that this and this gets updated but if i try to do something like this this value inside the text area is not binded to this particular expression which we see above because this value in fact is not really updated right if i click on this again you can see the value is the same that is this change number is same so we do not really re-render the whole thing again so as to just space save some computation but you you know you get the idea that now our input field and our expression are out of synchronization so how do we make it two-way data binding we're gonna see that in the next video with a much simpler method as well at the end so that's all for this one i'm gonna see you in the next video hey everyone welcome back and in this video let's just take a look at how we can synchronize the input field changes with our actual variable as well so to do that it's pretty simple what we have to do is right here we already have a v bind the only thing we need to do is add a v on change and whenever that happens what i want to do is i want to set the current value of this particular input field to the particular value of the rand number so firstly what we want to do is we want to call the change number value and in view if you want to pass an argument you can basically just go ahead this is this is basically a regular call to a function right we know that if i go ahead and actually let me just go ahead and replace it with an at the rate first of all so if i go ahead and create a function here this function is going to be called right we know that but what if i want to call it with extra data about this input field to get that data we call it with the function with a special object that is the event object right here right and now i can receive this event object and if i console log this event object we're gonna be seeing something like this so if i go to console and now if i start typing what we're gonna see is and if i obviously move out of the out of the way is we see this particular event being dispatched right so right here you can see that even the target gives us this input field and the dot value is going to give us this actual value and in fact instead of change let's just make use of input because we want this event to be fired every single time when we type in so now you can see that now we are talking so what we want now is that if i write e dot target dot value right here then if i clear the console if i start typing you can actually see the updated value now it's easy the only thing which we have to do is say this dot ran number is e.target.value right and when we start typing you can see they are in sync even if i click on this they are in complete sync right so this is two-way data binding now and you can obviously see this becoming cumbersome that we have to you know actually just define something like value and then input then we have to give it a function then we'd have to define a function and it's a very common use case as well so vue.js already thought out of it and it actually they actually provide something known as v model to us and i can just go ahead and pass rand number right here and once we do make use of v model like this what's gonna happen is that it's gonna bind this value two way that means whenever a change is made right here let me just go ahead and refresh this first whenever a change is made right here you can see it is automatically reflecting without us having all those function definitions and everything right so it's pretty handy it's pretty handy directive for a lot of use cases so there we have it so yeah that's how you're gonna achieve two-way data binding in vue.js it's a very important thing to know about so that's all for this video i'm gonna see you in the next one really quick hey everyone welcome back and in this video let's see how we can extend our event listeners which is personally one of my most favorite features of vue.js it's not a very big deal but it's a great little add-on to think about so to actually make it work what i'm gonna do first of all is i'm gonna just get rid of a bunch of stuff right here and we're going to be creating an array called keyword or keywords actually and an index field would starting with 0 right now what i want is that i'm going to be removing this v model right here because we need a customized addition that means i really need to fire a function so i'm going to be reverting back to our the value thing that is our let's say input value right and our this is input value and then we also need to have an input function which is process input right now if i go ahead and start this process input right here what i want to do is obviously let's just go ahead and receive the event object just like we did in the last video our value is event.target.value right now what i want to do is i want to append this particular value inside my keywords array so how do we do that i'm gonna say that this dot keywords and this dot index is gonna be this dot value right now if i go ahead and save this not really this.value just simple value if i go ahead and save this and let me just go ahead and actually spit this uh keywords array out as well i'm going to say just keywords dot join a pipe symbol right so now if i go ahead and start writing you're gonna see that we don't really do a lot of things because we have not updated the input value with our value right here right so now if i start typing you can see nothing fancy just regular stuff and this pipe symbol is also not appearing because we only have a single event now what i really want to do is whenever i have a space i want to separate out this token completely and i want it to appear as a different keyword or as a different token you know if you have been on websites which supports stack based things so you might have seen like you know if you write html comma css comma js then these tags are automatically separated somehow magically right now what i have to detect is that first of all i have to write complex logic that if the key that is if my value dot ends with a space then i want to do all sorts of things or what i can do is i can attach a modifier now what a modifier is it's that it's basically gonna be fired with a particular role in mind already now we do not really have a space modifier on input but what we do have is a space modifier on key up so i can say keyup dot space equal to process event what does it mean well it means that this event is going to be fired only and only when i press a space so if i start writing now you can see that there is no input but the moment i press a space you can see the input appears why because process input was immediately called and then we can start writing again we hit a space that thing appears then we can start writing again when i hit a space that thing appears right so this is one thing the next thing is that i want to clear this thing out so whenever i call this function when i'm done with this instead of updating it with the with the whole value let's just update it like this right with an empty value and finally let's just increment the index as well so as to you know get a pipe right here so now if i try to write html nothing happens but if i give it a space html appears magically i don't know how but it magically appears then css space we also have a pipe javascript space jquery space you know basically you can just go ahead and write everything and whenever you hit a space it automatically disappears you know just magically appends it right here so you see that it's it's basically a very very cool thing to have now even more cooler part of this is that you can actually link them that means you can have one after another so instead of space if i write alt and enter alt dot enter it means that first of all i have to press alt and then i have to press enter in order to fire this event so now if i start writing if i even write space nothing's happening but the moment i tried to do alt enter on my mac it appears again nothing's happening alt enter there we go again nothing happening alt enter there we go so yeah i hope you get the idea that how it works so it's a pretty pretty cool thing right so yeah that's that's pretty much it for this video i'm gonna see you in the next one with a real small little project which we'll be doing in vue.js now so what is going on everybody welcome back and in this video we're going to be taking a look at a small project in vue.js which is going to be a speed typer now the speed typer is going to be a simple project in which we'll be using whatever whatever we have learned so far for the most part so let's just go ahead and start building this thing so first things first if you want to speed test sort of thing the first thing we need is a bunch of keywords for the user to be visible right and let me just go ahead and just fill it randomly with whatever is coming in my mind right now jquery view mayhew go down pizzas movies whatever right ideally you wouldn't have a long list of keywords here but i'm just going to keep it really short main vs code github facebook uh react.js why not angular so here's a bunch of keywords for us right so once we have that in place let's just go ahead and display them in our ui so what i'm gonna do is right here let's just say this is inside a p tag just for keeping it separate and i want to repeat a span tag again and again and what the key would be for this is going to be a keyword keyword actually right and what i want is a v4 keyword in keywords and then finally i'm going to display this keyword right here so i'm going to say keyword right so you can see that we have a long string so let's just go ahead and throw a no break space here that might help us not really because well no break space literally means no big break space right so let's see if we can have an empty thing like that and there we go all right so once we have that in place what we want to do next is to define an input field where the user would actually enter the text so input type text and we would not be giving it a v model because we have a custom use case we want the input to be updated when we get a space right so i'm going to be saying that our value is going to be an input value right and i'm going to say key up and whenever i press a space i want to fire a function called process input which we're going to just create and with the event obviously so once we have that in place let's go ahead and create this method really quick event and let's see well i hate this linter to be honest but anyway we can see that the input field is working fine we have this value to be defined so here we go we need to always define values right so this is one thing you have to keep in mind because if you do not define view cannot really set the object listeners on this particular field and you will not get that data binding so always define values even with null or undefined or whatever so that it's actually working right all right so once we have that in place what we want to do is just do a bunch of processing just like we did earlier so what we want to do is just get the value first of all from this particular input field so that would be even target dot value and let's just trim this as well while we are at it so i want to say if value is in fact an empty string we don't really want to do anything at all right otherwise let's proceed so the next thing is that we're going to have value as a token and we want it to match to our particular keyword so let's just make sure our index is where our keyword currently is that is the word which the user has to type and i'm going to say if this dot keywords of this dot index is in fact equal to our value which is what the user wrote then that means this is a correct answer right otherwise this is a wrong answer and that's it that's basically what we have to do and finally i want to reset my input value to an empty string as well and we want to increment the index to move on to the next item right so what should happen on correct answer well ideally we want to have a visual feedback right so what we're gonna do is instead of having just an object like this we're gonna be doing something like or we can we can really do it right here but let's just move it out so i'm gonna say cons default keywords are these keywords dot map keyword and then i just want to say that every keyword should have should be and actually an object with the text as the keyword the fields should be correct as false because no keyword is correct upfront wrong as false as well because no keyword is wrong as well and pending as true right so that means these fields our fields are right now actually pending so let's just let's just make this as the default keywords right here and once we do that well we have a whole bunch of json object right here so let's just go ahead and fix that so i'm going to say this is going to be for keyword and keywords is fine i'm going to say this is keyword dot text right and our key would be again keyword dot text for us now what i want to do however is that right here if our answer is correct i want to say this dot keywords this dot index dot correct should be true the wrong value should be false well it's already false so it does not really matter and our pending value should be false as well right that's fine similarly for the wrong answer i want the wrong value to be true the correct value to be false and pending is false that's fine and yep that's that's basically it that should get us working the only thing is that we want to have a visual effect so what i'm going to do is i'm going to say v bind class that means i'm dynamically binding the class of this particular span tag of every particular span tag so as to speak and i'm going to give it an object and i'm going to say and actually let's just drop the v bind because this would just work fine so this is going to be an object now this is not an expression right remember that this is an object i want to say correct is going to be keyword dot correct wrong is going to be keyword not wrong and pending is going to be keyword not pending so what this really means is that correct class is going to be applied to this particular span if this is of true value which is not in case when it's starting off wrong is going to apply it if this is a true value which is again not when it's starting and pending is going to apply to if this is a true value which is true for every keyword when we start right so you can see that every keyword right here has a pending class and no correct or wrong class so once you have done that what i want to do is go back in the style section that is the css section and add some styles so i'm going to say for pending i want to say font weight bold and that's it right for correct i want font weight to be bold as well as color to be green and for wrong similarly we're gonna have this thing but the color should be red all right so once we have that in place if i go ahead and start typing template let's see so you see that did i write it wrong probably so let's see what's happening so if we go to the top we are passing the event object correctly and if we console log the value try to console log the value here and if i refresh go to the console and start writing template space so we have template with us and let's add the this dot keywords this dot index oops yep this is because this should be text now right we are comparing the wrong value yeah i guess this should work now let's just give it a refresh and template data yup and if i try the wrong keyword yep wrong keyword view mayhew wrong keyword wrong keyword movies speed all right so it looks nice right so here we are the next thing i think is that we can just go ahead and put a score we can say your score is going to be a score like this now what we can do here is you can either compute it right here or we can add a computed value now computed values basically just like uh the data values the only difference is that they would be available only if the data source changes now we can get to that later on so i'm just gonna add it right here so i'm gonna say keywords dot filter keyword and keyword dot correct that is we only want to get the correct keywords not length so if we do something like this now you can see that i have a keyword count which is correct right and what we can do is we can basically have a keywords dot length here as well so that you can actually have a final score as well for the person so yeah i mean this is this is very straightforward and it lacks a lot of functionality right now you know you ideally want to put in a throw in a timer here as well so that this input field is disabled when it's done so it's there's al there are a lot of things which can be done here which i want you to do as an assignment and once you do that publish it on you know codepen or wherever and leave a link below of your project right once you do that that is your assignment adding a timer and when the timer expires that this input field right here should freeze right so yeah go ahead try this out that's all for this video hope you enjoyed it

Channel: codedamn

Views: 22,408

Keywords:

Id: g4g2TlTMXXQ

Length: 67min 35sec (4055 seconds)

Published: Sat Sep 19 2020