Vue.js 101 - Event object, v-for and v-bind
Tags: javascript, vue, beginners, tutorial
Published: 2021-04-01 21:01:00

---
title: Vue.js 101 - Event object, v-for and v-bind
published: true
description: 
tags: javascript, vue, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll22z8mea106b4vjdjy7.jpeg
series: Vue 101
---
Follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Everyday I publish what I learn the day before from my Vue.js course.

Click follow if you want to miss nothing.

Without further ado here is a summary of my notes for that day.

<h2>Event object</h2>
Take all those different events:
```html
<button @click="changeMessage">Change message</button>
<button @dblclick="changeMessage">Change message</button>
<button @mousemove="changeMessage">Change message</button>
```
Each of those events have an attach event object attach to the method.

The event object can be retrieve in Vue code by adding a referencing parameter. That parameter can be name "event" or just "e" or anything else:
```js
methods: { 
    changeMessage(e) {
        console.log(e, e.type) 
    } 
}
```
In that case it's a click event so the e.type will be equal to 'click' and the e object will contains many properties like: 
![e object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ccszewnaidcon8syl3d.png)

We can then use this object and all his properties to change the component behaviour. 

But want if we want to pass a custom parameter to our event?
```html
<button @click="changeMessage('New message'">Change message</button>
```
In that case Vue will not pass the event as default. If we want both, we have to tell Vue to pass the event as a parameter and that need to be specified with a special dollar sign name ex.: $event
```html
<button @click="changeMessage($event, 'New message')">Change message</button>
```
Both will then be available in our Vue code
```js
methods: { 
    changeMessage($event, message) {
        this.message = message
        console.log($event) 
    } 
}
```
Let's do an example that will contains those concept put all together.

First in index.html let's create a box with border and padding
```html
<div style="border-style: solid; padding:8px;">
    Box 
</div>
```

Then let's add a event that will show the mouse cursor position:
```html
<div @mousemove="displayPosition" style="border-style: solid; padding:8px;">
    Box position {x} , {y}
</div>
```
Add those line in app.js:
```js
data() {
    return {
        x: 0,
        y: 0
    }
},
methods: { 
    displayPosition(e) {
        this.x = e.offsetX
        this.y = e.offsetY
    } 
}
```

<h2>Display a list using v-for directive</h2>
First let's create a people list (array):
```js
data() {
    return {
        people: [
            { name: 'Mike Taylor', email: 'mike@example.com'},
            { name: 'John Carson', email: 'john@example.com'},
            { name: 'Peter Sanders', email: 'peter@exemple.com'}
        ],
    }
},
```
To display that list we can use the v-for directive. This directive will loop through each element of the array. 
```html
<div id="app">
    <div v-for="person in people" :key="person.name">
        {{ person.name }} : {{ person.email }}  
    </div>
</div>
``` 
The "person" variable can be any name. The :key binding is a unique identifier for Vue internal processing. We will learn more about attribute binding next.

<h2>Binding html attributes</h2>
Html as many possible attributes. For example an image tag have a src attribute, an a tag have a href attributes:
```html
<div>
    <img src="http://example.com/test.jpg">
    <a href="http://example.com">Click here</a>
</div>
```
It is possible to make those attributes dynamic by binding those attributes to a javascript expression.

The syntax is to use the v-bind directive:
```html
<div>
    <img v-bind:src="image_url">
    <a v-bind:href="link_url">Click here</a>
</div>
```
Those attributes are now dynamicaly bind to vue.js data or expression
```js
data() {
    return {
        image_url: 'http://example.com/testjpg',
        link_url: 'http://example.com'      
    }
```

We can also use the shortcut (only colon :) syntax for v-bind directive:
```html
<div>
    <img :src="image_url">
    <a :href="link_url">Click here</a>
</div>
```

<h2>Conclusion</h2>
That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>