Using Vue JS with HTML and CSS

What is Vue JS???

Vue JS is an open source view model for JavaScript. After creating a resume using HTML and CSS, I wanted to dive deeper into the language and incorporate some JavaScript also. Although all I created was the simple header for my resume, it was still very interesting to see how JavaScript works with HTML. To first get started, one must copy a script tag into their HTML source code. This is so the HTML and CSS knows that they are working with Vue JS.

Now What?

For the header I created, I used the component to change my H1 tag, H2 tag, occupation tag, and photo tag. I added the new Vue to have these data values. Once created, all I had to do was add new div id and div classes to my HTML code. Once in the HTML source, for example, I used the h1 class "name" and used my JavaScript code to change the header to name.first and name.last. This would print out whatever value first and last are in the JavaScript. That way, there was more than one place for a name, than instead of typing your name out every time, you can just use the JS tags.

I next did the exact same thing for the H2 class. Now every time there needs to be a job printed out, you can change the code in the JS source and use the occupation.job. This way, it will print out anything in the job source.

Finally, for HTML to print out my photo, I needed to include the source where it was coming from. Once I had the link, I created a photo class in the JS code. Back in the HTML code, I had to add the img v-bind: src = "" so that the HTML can properly read the photo tag from the JavaScript.

What About the HTML and CSS?

When writing the new JS code, all of the CSS stayed the same. Other than some formatting, there was no extra code added. Now in the HTML code, it had to be modified so it could accept the JavaScript. After it was modified, everything worked as a team to print out a basic header from my resume.

Here is the Codepen source so you can play around with it:
Codepen Example

Here is a video explaining what I did in more detail:
YouTube Explanation