![](https://habrastorage.org/webt/oh/dl/qa/ohdlqapwejgoqdsl4nt7y4amsrc.jpeg)
→ Vue.js beginners lesson 1: instance Vue
→ Vue.js for beginners, lesson 2: binding attributes
→ Vue.js beginners lesson 3: conditional rendering
→ Vue.js beginners lesson 4: lists rendering
→ Vue .js for beginners lesson 5: event processing
→ Vue.js beginners lesson 6: binding classes and styles
→ Vue.js beginners lesson 7: calculated properties
→ Vue.js beginners lesson 8: components
The purpose of the lesson
The first goal of the lesson is to have a button on the product card, clicking on which will increase the number of products in the cart.
The second goal is to make the product image change when you hover the mouse over the color names of the product variants.
Initial code
The project file
index.html
will contain the following code:
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In stock</p>
<p v-else>Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div v-for="variant in variants" :key="variant.variantId">
<p>{{ variant.variantColor }}</p>
</div>
</div>
</div>
</div>
Here is the content
main.js
:
var app = new Vue({
el: '#app',
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true,
details: ['80% cotton', '20% polyester', 'Gender-neutral'],
variants: [
{
variantId: 2234,
variantColor: "green"
},
{
variantId: 2235,
variantColor: "blue"
}
]
}
})
Task
We need a button to assign an event listener to when it is clicked. On click, a method should be launched that performs an increase in the number of items in the cart.
Decision
To begin with, add, to the
main.js
object data
, a new property that will symbolize the number of items in the cart:
cart: 0
Now, in
index.html
, add an element <div>
that describes the shopping cart. This element will use a tag <p>
that will display the number stored in the property on the page cart
:
<div class="cart">
<p>Cart({{ cart }})</p>
</div>
We will also create a
index.html
button in the code that allows you to add a product to the cart:
<button v-on:click="cart += 1">Add to cart</button>
Note here
cart
that we are using the directive to increment the value stored in v-on
.
![](https://habrastorage.org/getpro/habr/post_images/723/864/75b/72386475b51117c1a9ac7d8c48b68d72.png)
A page with a shopping cart and a button for adding an item to the cart
If you click on the button now, the number of items in the cart will increase by 1.
How does it all work?
Let's take a look at the construction presented here. Using a directive
v-on
tells Vue that we want to listen for events on the button. Then comes a colon, after which the specific event we are interested in is indicated. In this case, it is an eventclick
. The quotes contain an expression that adds 1 to the value stored incart
. This happens every time the button is clicked.
This is a simple but not entirely realistic example. Instead of enclosing the expression
cart += 1
, let's make it so that clicking the button calls a method that will increment the value stored in cart
. This is how it looks:
<button v-on:click="addToCart">Add to cart</button>
As you can see, here
addToCart
is the name of the method that will be called when the event occurs click
. But we haven't declared the method itself yet, so let's do it right now by equipping our Vue instance with it.
It uses a mechanism very similar to the one that we already use to store data. Namely, we are talking about the fact that the object with options used when creating an instance of Vue, may have an optional property named after
methods
, which contains the object with methods. In our case, this will be just one method - addToCart
:
methods: {
addToCart() {
this.cart += 1
}
}
Now, when we click on the button, a method is called
addToCart
, which increments the value cart
displayed in the tag <p>
.
Let's continue with the analysis of what is happening here.
The button listens for events
click
thanks to the directive v-on
that calls the method addToCart
. This method is in the property of the methods
Vue instance. The function body contains an instruction that adds 1 to the value this.cart
. Since it this
stores a reference to where the data of the Vue instance we are in is stored, the function adds 1 to the value cart
. A this.cart
is the same as a property cart
declared in a property of an data
object with options.
If we just wrote something like
cart += 1
then we would have encountered an error message cart is not defined
. This is why we use construct this.cart
and access cart
from a Vue instance using this
.
Perhaps you are now wondering that now we are simply increasing the number of items in the cart, but we are not adding the item itself to the cart. Maybe we are doing something wrong? This is the right question. We will implement this functionality later in one of the following tutorials.
So now that we've learned the basics of event handling in Vue, let's take a look at a more complex example.
To begin with, let's expand the array objects
variants
from the object data
by adding there a property variantImage
that stores the path to the image of the desired product variant. Let's give the corresponding section of the filemain.js
to this form:
variants: [
{
variantId: 2234,
variantColor: "green",
variantImage: "./assets/vmSocks-green.jpg"
},
{
variantId: 2235,
variantColor: "blue",
variantImage: "./assets/vmSocks-blue.jpg"
}
],
Now each product variant, green and blue socks, has its own image assigned.
Task
It is necessary that, on hovering the mouse over the name of the color of the variant of socks, in the field where the image of the product is displayed, the image
variantImage
for the corresponding color would be displayed .
Decision
This is where the directive comes in handy again
v-on
. But this time we will use an abbreviated version of its notation, which looks like @
. And we will listen to the event mouseover
.
Here is the relevant code in
index.html
:
<div v-for="variant in variants" :key="variant.variantId">
<p @mouseover="updateProduct(variant.variantImage)">
{{ variant.variantColor }}
</p>
</div>
Note that we pass the method
updateProduct
, in the form of an argument variant.variantImage
.
Let's create this method in
main.js
:
updateProduct(variantImage) {
this.image = variantImage
}
This method is very similar to the one we recently created to increase the value
cart
.
But here we are updating the value stored in
image
. Namely image
, what is stored in variantImage
the variant of the product on which the mouse pointer is hovered is recorded in . The corresponding value is passed to the function updateProduct
from the event handler itself, located in index.html
:
<p @mouseover="updateProduct(variant.variantImage)">
In other words, the method
updateProduct
is now ready to be variantImage
called with a parameter .
When this method is called, it is
variant.variantImage
passed to it as a view variantImage
and used to update the value stored in this.image
. We, by analogy with the previously considered construction this.cart
, we can say that this.image
- is the same as image
. As a result, the value stored in image
is now dynamically updated in accordance with the data of the product variant that is being hovered over.
ES6 syntax
Here, when creating methods, we used the following constructions:
updateProduct(variantImage) {
this.image = variantImage
}
This is an abbreviated version of the method description that appeared in ES6. An older version of writing such constructions looks like this:
updateProduct: function(variantImage) {
this.image = variantImage
}
Workshop
Create a button and corresponding method that will decrease the value stored in
cart
.
→ Here is a template that you can use to solve this problem.
→ Here is the solution to the problem.
Outcome
Let's summarize the results of today's lesson:
- The directive is used to organize the response of an element to events
v-on
. - An abbreviated version of the directive
v-on
looks like@
. - When used,
v-on
you can specify the type of event to listen to:
- click
- mouseover
- any DOM event
- The directive
v-on
can call methods. - The method called with
v-on
can take arguments. -
this
, Vue. , , .
Did you complete your homework for this lesson?
→ Vue.js beginners lesson 1: instance Vue
→ Vue.js for beginners, lesson 2: binding attributes
→ Vue.js beginners lesson 3: conditional rendering
→ Vue.js beginners lesson 4: lists rendering
→ Vue .js for beginners lesson 5: event processing
→ Vue.js beginners lesson 6: binding classes and styles
→ Vue.js beginners lesson 7: calculated properties
→ Vue.js beginners lesson 8: components
![](https://habrastorage.org/webt/de/0y/l-/de0yl-6ppopvisr_a80b4yuhjj8.png)