Author: Jeannie Evans
At the very tail end of our time at the Turing School of Software and Design, we are asked to learn about one more thing that interests us. I, being the front-ender I am, went with what I felt like was the obvious choice for me of Vue.js. Vue.js is becoming massively popular, and although is still component based, is quite different from React. I have gone into this assignment knowing that Vue.js is component based, but haven't found it to be quite as intuitive as React when I first began learning that.
Have you ever heard the SE Asian expression, "same same, but different"? I am reminded of this expression when comparing Vue.js to React. Essentially, it means that it's the same in many ways, but in almost an opposing way. Makes total sense! No? Stay with me... In React, when we render things, we have a very clean, neat, and tidy return() statement. All of our HTML is shoved in there and we can use pretty basic, regular, 'ol JS to render what we want on the page, kind of like interpolation. In Vue.js, we are still using HTML, but how we render our data is completely different.
My most important takeaway, as I begin exploring Vue.js, has been attribute binding. It's kinda crazy, but mostly very cool. We can write conditional logic as HTML attributes. Let's look at this very basic, yet nesty, if block.
<p v-if="inventory > 10">In Stock<span v-if="onSale"> and ON SALE</span></p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost out!</p>
<p v-else>Out of Stock</p>
The example above is referencing the vuemastery.com tutorials (highly recommended with links below). What's happening here? To begin, inventory exists within a data object in another file and is hard coded in at 8. These attributes have very basic JS comparison operators, rendering that middle element, showing "Almost out!" on the DOM.
While this, initially has blown my mind, it is very effective, and I can see why some people choose this route, rather than React. Well, I have a hunch anyway. One thing I have noticed in my research is that many Vue.js tutorials are targeted towards novice coders. Not just a novice with Vue.js, but coding all together. My experience jumping into React, there was almost always a suggestion to know vanilla JS and probably ES6 as well, before trying out React. While my knowledge on Vue.js is still quite limited, is this because there's a lot of logic built into the Vue.js framework already? Let's take a look at another example. The code below is a "for loop"...
<div v-for="puppy in puppies" :key="puppy.puppyId">
<p>{{ puppy.puppyName}}</p>
</div>
Again, another attribute, v-for with puppy representing a single element of puppies, an array in that data object, displaying each puppyName as a p tag. This is much easier to write than a for loop. For me personally, I am happy to have had the experience with for loops and array prototypes to really understand what's going on under the hood of this code.
As I apply for jobs and wrap up my time as a student at the Turing School, I am reminded more of how much I've learned in such a short time, rather than dwelling on the fact that I am the most junior of junior devs. I have a lot to learn about Vue.js, but all this crazy syntax that is quite new, really isn't too unfamiliar.
Thanks for reading!
Please note! This is a blog post in the making. Will soon be posted to my own personalized portfolio. Link available 01/25/2020
vuemastery.com
- Introductory Video Tutorials
- Vue-Essentials-Cheat-Sheet.pdf
YouTube
- https://www.youtube.com/watch?v=DsuTwV0jwaY&t=262s
- https://www.youtube.com/watch?v=_2_C9j-8CtM&t=75s
vuejs.org