» All Posts «

Joy of Coding: Kevin takes a Vue Class

Kevin Croake April 16, 2018 Web Design & Development

Share Comment 0

As a developer, keeping up with the industry is a must. Whether you use the latest new tool or framework out there is another question, but you should know the landscape. This is why, when I saw that Udemy had a special for a Vue.js course for $10, I hit checkout. I want to share my first impressions of Vue.js and my thoughts on Udemy as a learning tool.

Udemy is a marketplace for learning and teaching. Teachers can create courses and sell them to students. One benefit of Udemy is being able to pay per class, unlike Lynda.com where you pay for a subscription. So if you want to learn about sound engineering, you can just buy that course–pretty simple. Classes on Udemy range from $10 to $200, with frequent crazy-discounted sale prices. The course I purchased was $199.99 marked down to $10.99. It’s worth practicing patience if there is a course you have your eye on, as it will likely go on sale at some point.

The course I did is called “Vue JS 2 – The Complete Guide (including Vue Router & Vuex)” by Maximilian Schwarzmüller. Max does a great job explaining the material and how/why stuff works. Thankfully, he isn’t super techie in the way he describes things, but also doesn’t dumb things down; it’s an appropriate level for my experience. The size and depth of the course is significant–I’m currently on 45 out 386 items. Items include things like videos and quizzes, along with example files. 

Now lets talk about the fun stuff, Vue. Vue.js is a progressive javascript framework that is reactive. You may be asking yourself “what in the world does that mean?”. Progressive means that it can be used on one part of the site that requires a more robust user interface experience, or on the entire site. Frameworks like React are meant to be used in large applications–like Facebook. Using React for one section of your website seems like overkill, and this is where Vue.js comes in. It’s meant to be used in smaller cases, or sprinkled in where needed, but that doesn’t mean it can’t be used to build larger applications. Reactive means it changes with the data. If your app is changing data as the user is using it (which is likely) it reflects those changes. Same with connecting to a live API–if data changes while in use, it adjusts accordingly.

The dynamic and progressive aspects of Vue is what I enjoy the most. It’s fun to play with and build inputs that link up with another section of the site. Since Vue.js is built with this purpose in mind, the amount of code needed for basic things is minimal. Here’s a quick, extremely basic scenario: Let’s say we have an input field with a name, and we want to show the value in an h1. Here’s that example using jquery (which is what I normally use).

See the Pen Input Heading jQuery by Jackrabbit Design (@jackrabbitdesign) on CodePen.

Here I wrote a function to populate the h1 with the value of the input and made an event listener to change it on change and keyup. But this is a simple example, whereas if we add more elements and inputs it gets complicated and harder to manage. It works, but how would you build something this simple in Vue?

Easy!

See the Pen Input Heading Vue.js by Jackrabbit Design (@jackrabbitdesign) on CodePen.

First, build the app in a javascript file or script tag. In this case, the div id’d as #app is the element where we will load view. We’ll add some data to the Vue app, in this case I made a variable called “name,” where I’ll store the name. The value on the data can be a boolean, string, or object. That’s it for javascript (seriously, loading Vue.js does the rest of the work). Now, in the html, add a {{ name }} inside the h1 to populate with the variable and then add v-model=“name” to the input field. v-model is a directives that binds elements. So in this case, I’m binding the input to my name variable and because my h1 is being populated with my name variable it’s also binded. And that’s it.

The beauty of Vue is that is what it is meant for. Complicated, yet manageable, dynamic and progressive web apps.

Like other frameworks and programming languages, Vue.js gives us the ability to break things into their own into separate components that could be pulled into separate pages. But unlike something like php, you can write html, javascript, and css (or scss) all in one file. I haven’t explored this feature yet, but it’s good to know and gives tons of options. For example, with the dynamic element of Vue.js you can call in a separate file if a certain criteria is met. This helps make the code within the application or website easier to manage. Here’s an example from vuejs.org.

After taking part in this course, I think Vue.js is pretty fun and I’m excited to learn more and find places to sprinkle it in to projects.

0 Comments

There aren't currently any comments for this entry.

Leave a Comment