For the first time in ages, I attempted to teach myself something. That "something" being Vue.js.
If you know me (nice to meet you if you don't), it takes me forever, and I mean forever, to learn anything by myself. Just like coding, people say you can sit down and just learn how to do any sort of craft or art. This is of course easier said than done, but here is my attempt after googling my way through.
After watching a bunch of introductory videos (yes I did re-watch some of them) and fiddling around with code trial and error style, I got it to an acceptable point.
Here are some of the sites and videos I used, which I admit are pretty helpful for overall beginners:
- https://vimeo.com/247494684
- https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance
- https://vuejs.org/v2/guide/
Going into this, I wouldn't say I was very knowledgeable, but there's a first for everyone! I still can't say I'm an expert, but I'm for sure intrigued.
Going off a previous resume CodePen I forked, I tried replicating a part of the only HTML-CSS resume into a Vue Component. While doing so I have learned a few things:
- you can't exactly stick Vue into an already existing project (sadly)
- Vue is pretty handy for compartmentalizing your code (or making code in chunks or components)
- it's also good for more variable data or data that may have to be implemented multiple times keeping consistency and saving time from copying and pasting
- I really don't know what I'm doing (but what's new?)
Starting off, when I first tried incorporating Vue into the already existing resume, it became rather cluttered (but that might have been my bad writing it in the CodePen HTML tab way underneath rather than the JS tab to the right). It was a chore in itself, not hard just a tad tedious, for a small project to copy and paste the existing data and changing it into a Vue constant. After importing via a script tag, replacing all the once HTML tags with placeholder Vue Tags felt a little weird to me at first but it's pretty self intuitive. It was like converting an existing essay into a MadLibs game.
The part I mostly struggled with is translating the same styling to the Vue version of the resume component just because I wasn't too sure why it did what it did. With the attribute binding, the formatting for everything but the photo was the same. All I had to do was add a class to the existing img tag. At first I laughed a little because the photo reformatted to default at 100% since it was no longer in reference to the CSS stylesheet.
Overall it's pretty handy for compartmentalization and variable data. While I don't know much about it, I can see it being good with big amounts of data integrity and consistency if utilized properly with JSON. I wouldn't say this was an entirely failed attempt at teaching myself about something new, but hey it's something! Hope to learn more about Vue.js and its abilities in the future!
Recent Video on This Experience: https://www.youtube.com/watch?v=yOpx7WkXMds
Youtube: https://www.youtube.com/channel/UCjR8IqMXgs6H69ZQqrsS1Vw
Top comments (1)
Hey. Nice article. I'm learning Vue too. I'm planning to do all my new projects in Vue, and I think it's useful that I can add components to existing projects, written in plain javascript. I've been doing Vue Mastery as well, and I did a video on some other useful ways I found to learn Vue if you're interested: youtu.be/OPiMJ787-c0