Learn the basics of VueJS (Part 3)

Tram Ho

Preamble:

Next in this section, we continue to learn about:

  • Event handling
  • Component basics
  • How to use axios to call api.

Let’s start to find out.

Event handling:

In this section, we will learn how to handle events when the user interacts like clicking or pressing keys in VueJS .

1.Listen to events:

We can use directive v-on to listen to events DOM and execute JavaScript when these events are triggered. Or you can shorten it to @. Eg:

In the above example, every time you click the plus button below the value of number increased by 1 unit.

Or we can also call a method on click:

Next, let’s find out about the event @click.stop is one of the most commonly used event modifiers..

Let’s start with an example to make it easier to understand:

Above you can see I have nested 3 events click into each other. If you keep it as is and click the Click button, the result will be displayed as follows:

If you change the event @click by event @click.stop what about at the Click button? Here are the results:

So when we replace it with @click.stop then it will only occur the event up to the time you mark  stop. External events have been prevented from occurring.

Outside event modifier .stop out there are a few event modifier that are commonly used as:

  • .prevent
  • .capture
  • .self
  • .once

2. Key event:

Key event used to listen for events from our keyboard. Eg:

There are also other key modifiers such as:

  • .tab
  • .delete (used for both “Delete” and . keys “←”)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

3. System modifier keys:

We can use the following modifiers to trigger event listeners only when the corresponding modifier keys are pressed:

  • .ctrl
  • .alt
  • .shift
  • .meta Here the meta modifier on windows will be the window button, and on the Macbook, the meta is the command key.

Modifier .exact (exact) can be used in combination with other modifiers to specify that the event handler function should only be executed when that exact key/mouse combination is pressed.

4. Modifier for mouse keys:

Here we have the following modifiers:

  • .left
  • .right
  • .middle

Component basics:

1. What are components?

Component is one of the most powerful features of Vuejs. Component in vuejs helps us to group HTML codes like modules, such modularization helps us to reuse many times, helps our  project to be clean and tidy and optimizes easier to maintain maintain when there is a problem.

2. Declare and use Component:

Here is a basic example of declaring a Component:

Inside button-number is the name of the component that we just declared. To use this component, just declare as follows:

<button-number></button-number> And we get the result:

If you want to use this component more than once, you can do the following:

And as a result, we have 3 buttons as shown below:

We can also pass data to our components   using props Please:

The result for us will be:

Or we can create a separate file component as follows. First, create a file in folder components, here I create a file named DemoComponent.vue. In this file, I can write arbitrary module code, for example:

Then to use this component we can use the following statement:

  • Way 1:

Vue.component('hello-component', require('./DemoComponent.vue').default)

  • Way 2:

Next is to use it as the component  above I have introduced, and this component is called hello-component.

How to use axios to call api:

Perhaps you are too familiar with axios when it is often used to call api from the client side. In Vue, axios is also very easy to integrate and use because it uses Promise, we can combine it with async/await.

Here we install it with this command: npm install axios --save After that, we import axios and let’s demo try to call an api method GET:

Here I have 1 api list of provinces in Vietnam and the returned results have been displayed in the list above. And here is the result displayed:

Now, let’s move on to method POST please.

Here I have an example of an api to register an account using method POST, other methods eg PUTPATCH and DELETE also similar. Let’s check the results:

Summary:

So in this article, I introduced you to Event handling, basic understanding of component and how to use axios to call api in Vue to help you understand the basics of Vue. I look forward to receiving your comments. Thank you for listening to my sharing. Good luck!

References:

https://vi.vuejs.org/v2/guide/

Share the news now