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

directives

v-

v-if

v-bind

v-on

v-for

<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

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:

• https://v3.vuejs.org/guide/
• https://images.app.goo.gl/HJk4bQiczPvVBof38