Vue.js 101 - Event object, v-for and v-bind

Follow me on Twitter: Follow @justericchapman

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.

Event object

Take all those different events:

<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:

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:

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?

<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

<button @click="changeMessage($event, 'New message')">Change message</button>

Both will then be available in our Vue code

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

<div style="border-style: solid; padding:8px;">
    Box 
</div>

Then let's add a event that will show the mouse cursor position:

<div @mousemove="displayPosition" style="border-style: solid; padding:8px;">
    Box position {x} , {y}
</div>

Add those line in app.js:

data() {
    return {
        x: 0,
        y: 0
    }
},
methods: { 
    displayPosition(e) {
        this.x = e.offsetX
        this.y = e.offsetY
    } 
}

Display a list using v-for directive

First let's create a people list (array):

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.

<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.

Binding html attributes

Html as many possible attributes. For example an image tag have a src attribute, an a tag have a href attributes:

<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:

<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

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:

<div>
    <img :src="image_url">
    <a :href="link_url">Click here</a>
</div>

Conclusion

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: Follow @justericchapman