Documenting my VueJS journey pt. 1!
So I am expecting an offer for an internship role with a company I have connections to. I spoke with the team leader and in anticipation of starting the role, he recommended I start getting up to speed on VueJS! I’m so happy I’m starting to get the ball rolling and will be starting this internship soon! To prepare myself for the role I am going to learn VueJS with the help of a few resources. In this blog post series I will break down what I am learning and how I am going about learning a brand new framework! Let’s dive in!
How Does One Self Teach a New Language Framework?
There are many ways to go about this. One of the biggest things I would like to highlight would be to try your best to not use StackOverflow. We all use SO but when it comes to trying to understand the basics and fundamentals, I think more official documentation is going to be your best friend and building from the ground up. I’ve spoken about this in the past but for me it breaks down into 3 main things.
Official Documentation
This is going to be your best friend. The creators of the framework are going to try their absolute best to write down how to use the framework. They want you to use it and have it become popular so they will document and help as much as they can. Here is the official documentation for Vue. Most of the time there will even be a get started guide so make sure to do your reading and pair this up with the 2nd resource…
Videos!
There are so many great coding creators now! A lot of people will make YouTube tutorials on how to go about learning anything, especially in software! Using videos will help you see what the person is doing, they will explain what they are doing and you can follow along with their work to gain an understanding. Here is the tutorial playlist I am following.
Making Small Projects
Just like driving, you can fully understand the rules and fundamentals but you’re not going to be good at using a certain technology until you practice applying it in real applications. So do mini tasks or projects! This can be whatever you like but make sure you are trying to build functions that have real life applications. This is going to help you really understand how to use the framework!
Now that we went over how I tackle learning new frameworks, let’s get into what I’ve learned so far in Vue.JS!
Click Events!
So far I’ve done how to cause a change using a button click!
Here is my index.html and my app.js files…
We can see here that in the index.html on the first 2 buttons we use VueJS code in the html file to toggle the state of age to increase or decrease it. Which is cool! Then we got to the more practical side and wrote a method in the app.js to change the book title.
We can see in the button that when we click, we call the changeTitle method and pass in the argument of ‘Twilight’ to the function. The function then changes the book title to ‘Twilight’ and the DOMreflects that change! Easy right!?
I know this is only scratching the surface but I’m excited to learn more! I hope this helped or was fun/interesting and happy coding! :D
