In Web Development
Add Vue.js To An HTML Page - read the full article about Vue Js update, Web Development and from Adam Miller on Qualified.One
HR Compliance Manager
hi thanks for watching this video today im going to show you how to incorporate vue.js into any html page im going to assume that you dont really know how to make an html page even if you do im going to go from basically from scratch and show you everything to be super simple were going to make a button thats going to change some text and to do that were going to need a couple sections in the view configuration including a method so lets go ahead and get started i have a directory open here it really doesnt matter what directory it is or what whether youre using windows or linux or mac uh you basically you want to open up visual studio code or whatever text editor youre using its really up to you how you want to do this but if you want to follow along one for one im going to use visual studio code so im going to right click on this folder and say open with code its going to open this directory or folder inside of visual studio code and up here if you click this button here its for a new file were going to create our first html file so first html page dot html click enter its going to create the html page now before we go on if youre not familiar with visual studio up here you can always get back to your files with this explore button but go down to extensions for a second i want to show you a couple extensions i think that will be helpful one would be the html snippets the other would be html boilerplate if you plan on styling getting any further i would also recommend the html css support so a few helpful extensions you dont have to do that by any means itll certainly speed speed up your production so all right so they go in here and i type html that boilerplate extension that i was talking about will allow us just to basically type html and then you have that option itll do that for us if we go down here lets put a header so an h1 tag uh the snippets is saying hey do you want that yeah thats what i well didnt let us there retype it the snippets is going to find that h1 you can do it that way you just feel like typing it out it doesnt take very long to type it out visual studio is smart enough to kind of auto complete that if you have the right extensions and everything so were not going to do anything with that quite yet lets go ahead and also create a button and in the button just type change text for now i guess in the in the header lets type something like hello world um and the cool thing about html if you havent done much programming or you dont know much about program or even if you do but the html you can just open up in any old browser if youre not using a whole bunch of stuff with it even if you are with like javascript or css it will still work and itll kind of show you where youre at so to open up that itll render that file for you in the browser which is really really nice so thats one way to do it uh visual studio has ways of opening it too but for now im not too worried about that so to actually incorporate view js were going to use a cdn which is basically a script tag and it is going to allow us to not have to use the view command line tool or any of that kind of stuff that gets more complicated were going to keep this nice and simple so im at the official vue.js.org website and i will put this in the description below but im going to copy this cd in here its under installation cdn if i come back here at the very bottom of the body go ahead and get rid of this script tag and you just paste the what we just put over it or just copied so if you go below create another script section just press enter to get some space there and then what we can do now is actually create the view section what were going to want to do is wrap the h1 and the button in whats known as a div and to do that simply like that to a quick quick cut i did ctrl x to paste i did ctrl v so lets set an id here view start thats just an identifier so we can tie into that element and say hey we want to target that element on the page and then were going to do a new view instance thats the syntax at least for what were going to be using today and thats going to create a new view instance for us then inside the view instance were going to type el and then were going to target that id so like if you know anything about css selectors or anything like that a target html element for an id specifically use the pound sign then type the name of that id this should target that specific element this will allow us to use vgs anywhere within this element that were targeting type data now the data is where we can kind of store variables to use throughout our html page so lets do header text and then save for now its just hello world and then instead of hello world up here they have this templating syntax um which visual studio code decided to fill some of it in for us but its essentially two brackets on this side and two two curly brackets on the left curly brackets on the right and inside we can actually type the actual name here that weve set this hello world to okay now before we go any further i want to open this back up and just take a second to render okay cool so now we can see that our view is indeed working the next step is going to be to actually tie an event or method to this button and its going to change the text thats our main goal to finish up basically this tutorial so were going to need whats known as a method section the vue.js provides for us and then lets create a method called change text thats the syntax for creating a method now we can tie into anything in the data section uh with the keyword this so we type this then header text its smart enough to say visual studio smart say hey is that what you want yes that is what we want to type it and then just i dont know changed right and essentially the other thing we have to do is when we click the button we have to tie it to this method and view provides this v hyphen on syntax here and you do v on colon click and then equal sign and then inside the double quotes were just going to type the name of the method that we created which is change text so save that file i do i use ctrl s we could always come up here to file save its always an option as well then now if we go back and we run this again well see yes it says hello world and then if we click change text it changes it it is that simple you can you literally use that cdn with any html page that you have its really really easy and its super nice if you have an existing web page that you dont want to have to totally rewrite because maybe its complicated or too time intensive and youre doing other things just dont have time for that this is a super good option to kind of make your web pages a little more modern maybe with a legacy app or technology maybe that you didnt start off thinking about using a library like vjs which is has so many nice features and does so much for us on the front end i hope you enjoyed the video stick around subscribe hoping to have some new videos out soon with content just like this if you have any suggestions on things you want to learn dont hesitate to put a comment im certainly open and hope you guys learned a lot thanks for joining me
Adam Miller: Add Vue.js To An HTML Page - Web Development