Five Days into Vue.JS: My First Five(5) Takeaways

Are you thinking of diving into the world of Vue? Do you have a background in any other JavaScript frontend framework, especially React? If your answer to either question is yes, then this article is for you.

Coming from a React/Redux background, I’ve always wanted to explore the Vue.JS framework just to embrace its beauty and uniqueness. Although I know that there’ll be some similarities to the React library (like a reactive webpage, virtual DOM, etc). Yet, I need to see for myself the Vue way of implementing these features.

Having written a bit of Vue code, I will be discussing in this Article my first five(5) takeaways from my first few days writing Vue. I will not be digging deep, but I will try to be explanatory as much as possible. Let's dive in!

1. Atomic Component System:

One of the most important concepts in Vue is the component system. It’s a very behavior that allows large-scale applications to be decomposed into small re-usable components.

Let's say we have a webpage with the root component where the header, main, and aside components are nested. The section and aside sub-components can also have child components nested in them. This is the same as the component system in React.

2. It’s mostly about binding with directives:

Vue generally links (or

bind

) data and conditions to DOM elements (or attributes) using what is known as

directives

. Directives are special attributes provided by Vue, that apply special reactive behavior to the rendered DOM. There are lots of directives in Vue, all prefixed with

v-

. Common directives include

v-if

v-bind

v-on

v-for

, etc.

<button @click="toggleBook">
  <span v-if="showBooks">Hide Books</span>
  <span v-else>Show Books</span>
</button>

The snippet above shows directives in action. The
@click
attribute is a short form of the
v-on:click
directive that fires the
toggleBook
method when the
button
is clicked. Also, if the
showBooks
variable is true, the first
span
renders, else, the second one.

The directive concept is a big deal in Vue, as it can is used for Conditionals & Loops, handling user inputs, declarative rendering, etc.

3. The ‘emit’ feature

This is a relatively new (added in Vue 3) feature that allows a component to send an action (with or without data) to its parent. It’s more or less like a child sending a message to his parents when an event occurs. It can be compared similarly to the way components use lifting to pass the data to the parent component in React.

Let's say we have two components (say A & B):

// Component A

<template>
  <B @end="handleEnd" />
</template>

<script>
import B from "./components/B.vue";

export default {
  name: "A",
  components: { B },
  methods: {
    handleEnd(data) {
      console.log("Emit data: ", data)
    },
  }

</script>

// Component B

<template>
  <button @click="$emit('end', 100)">
    Click to Emit
  </button>
</template>

From the snippets above,
B
is nested in
A
. When the
button
is clicked, it emits and send a message named
end
to component
A
. The message is catched in
A
with the
@end="handleEnd"
attribute.
A
gets this message and fires the
handleEnd
method, which logs the emitted data.

You really want to watch out for this, I find it super cool!

4. Awesome Keyboard and other events modifiers

This is another feature I found to be amazing in Vue. Apart from the fact that I can listen for keyboard events using Event listener directives (

keyup

click

dblclick

, etc), Vue also permits chaining modifiers to the events.

For instance, the default behavior of a form submit button (i.e. page reload) can be prevented by simply chaining the ‘.prevent’ modifier to the event listener:

<form action="" @submit.prevent="handleSubmit">
  ...
</form>

<template>
  // fires handleClick event only when the div is clicked, and not the paragraphs.
  <div @click.self="handleClick">
    <p>Hello world</p>
  </div>

  // fires the toggleModal action only when the user holds the 'alt' key and click simultaneously
  <button @click.alt="toggleModal">Open Modal (alt + click)</button>
</template>

Other event modifiers are:

.stop, .prevent, .capture, .self, .once, .passive

5. Props still rock!

Yes, that’s right. In Vue, values can be passed down to the child components using a concept called ‘props’ (it’s no big deal though, just a short term for ‘properties’).

This is important for the dynamic rendering of data and also helps in the reusability of components. The behavior is the same for React, the only difference is that the Vue component must register the list of props it accepts using the ‘props’ option.

In conclusion, I personally find Vue.JS easy to learn and understand compared to some libraries. Also, Vue has a very large community and great documentation. Overall, it's a joy to learn.

If you've made it this far, you're a rock star!

Please share your view about some of these points and others, as I'm willing to learn from your comments and suggestions.

Let's connect!

@teekaytech on GitHub

Taofeek Olalere on LinkedIn

@ola_lere on Twitter

Portfolio

Happy hacking!

Resources: