Vue Basics

JavaScript is hard and makes me sad. Unfortunately, it is one of those languages that takes an incredibly long time to master, and time is something I barely have as a 20-something college student. BUT, I did manage to scrape by with the most basic understanding of how to create a Vue component that could interact with HTML and CSS.

Vue is a JavaScript library, and is described on their website, is a “progressive framework for building user interfaces”. It assists with front end development in web-based user applications. It is flexible because it can interface with many other JavaScript frameworks or libraries, which allows users to write powerful and diverse web applications. Vue interfaces with by using Vue field variables between curly braces {{variable}} and replacing those variables with the corresponding data from the Vue component.

For this project, I updated my resume to include a Vue component that would display the top bar of information. My goal was for the Vue component to provide all the dynamic data such as my name, picture, and links to my Codepen and YouTube channel. By creating a Vue component, the HTML can be modified without regard to the data, meaning it is easily adaptable. My thinking was, if someone wanted to design my heading differently, as long as they used the same variables that are in my Vue component they could make it their own. An example would be if you are getting the data from a database, the Vue component could gather all of the data and feed it to the HTML and CSS to display.

If you want to check out the page I made, Click Here!
If you want to check out the YouTube video I made on Vue, Click Here!