🎻 ❕ 🚓 Vue.js for beginners lesson 2: attribute binding 💃🏾 🤱🏽 🌇

This is the second lesson of the Vue.js tutorial for beginners, which is recommended by Natalia Teplukhina, Staff Engineer at Gitlab and Core Team Member of the Vue framework (Q / A session with Natasha took place on our instagram , and the transcript can be read here )

In the second lesson we will talk about attribute binding, about connecting data stored in a Vue instance to attributes of HTML elements. → First lesson

The purpose of the lesson

Here we will look at how to display an image and set the attribute text using attribute binding alt. We will take the relevant data from the Vue instance.

Initial code

Let's start with index.htmlthe <body>following HTML code, located in the file , in the tag :

<div id="app">

  <div class="product">

    <div class="product-image">
      <img src="" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>

  </div>
</div>

Pay attention to the tag <div>with the class product-image. It contains the element <img>to which we want to dynamically bind the data necessary to display the image.

An element <div>with a class is product-infoused to display the name of a product.

Here is the JavaScript contained in the file main.js:

var app = new Vue({
    el: '#app',
    data: {
        product: "Socks",
        image: "./assets/vmSocks-green.jpg"
    }
})

Note that the object datanow has a new property imagecontaining the path to the image.

→ The CSS used in this tutorial can be found here .

To connect the style to index.html, add the <head>following to the tag :

<link rel="stylesheet" type="text/css" href="style.css"

Here we proceed from the assumption that the style file has a name style.cssand is stored in the same folder as index.html.

Here is the image that we will display on the page.

A task

We need an image to be displayed on the page. In doing so, we want to dynamically manipulate this image. That is, we need the ability to change the path to the image stored in the Vue instance, and immediately see the results of these changes on the page. Since it is the srcelement attribute that <img>is responsible for which image the element will display, we need to bind some data to this attribute. This will allow us to dynamically change the image based on the data stored in the Vue instance.

An important term: data binding

When we talk about data binding in Vue, the point is that the place in the template in which the data is used or displayed is directly "connected" or "linked" to the data source, that is, to the corresponding object stored in the instance Vue.

In other words, the data source entity is associated with the entity in which this data is used, with the data sink. In our case, the data source is a Vue instance and the sink is an attribute of the srcelement <img>.

The solution of the problem

To bind a property value imagefrom a data object to a srctag property <img>, we'll use the Vue directive v-bind. Let's rewrite the tag code <img>from the file index.html:

<img v-bind:src="image" />

When Vue, while processing a page, sees such a construction, the framework replaces it with the following HTML code:

<img src="./assets/vmSocks-green.jpg" />

If everything is done correctly, then an image will be displayed on the page.

The image of the green socks is displayed on the page

And if you change the value of theimageobject propertydata, then the attribute value will change accordinglysrc, which will lead to the display of a new image on the page.

Let's say we want to replace the green socks with the blue ones. To do this, given that the path to the file with the new image looks like./assets/vmSocks-blue.jpg(the image file can be found here ), it is enough to bring the property description codeimagein the objectdatato this form:

image: "./assets/vmSocks-blue.jpg"

This will cause the image of blue socks to appear on the page.

The image of blue socks is displayed on the page

Additional use cases for v-bind

The directive v-bindcan be used not only with an attribute src. It can also help us dynamically adjust the image attribute alt.

Let's add a datanew property to the object with options altText:

altText: "A pair of socks"

Let's bind the corresponding data to the attribute alt, bringing the element code <img>to this form:

<img v-bind:src="image" v-bind:alt="altText" />

Here, as in the case of the attribute src, the construct is used, consisting of a v-bindcolon and the attribute name ( alt).

Now, if the properties of the Vue instance change imageor altText, the <img>updated data will appear in the corresponding element attributes . This will not break the link between the element's attributes and the data stored in the Vue instance.

This technique is constantly used when developing Vue applications. Because of this, there is an abbreviated version of the construction record v-bind:. It looks like :. If you use this technique when writing tag code <img>, you get the following:

<img :src="image" />

It's simple and convenient. This technique improves the cleanliness of the code.

Workshop

Add a link (element <a>) with text to the page More products like this. In the object, datacreate a property linkcontaining the link https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks. Bind, using a directive v-bind, a property linkto an attribute of an hrefelement <a>.

→ Here is a template that you can use to solve this problem.

→ Here is the solution to the problem.

Summary

Here's what we learned today:

The data stored in the Vue instance can be bound to HTML attributes.
The directive is used to bind data to attributes v-bind. The shorthand for this directive is colon ( :).
An attribute name that follows a colon indicates the attribute to which the data is bound.
As the value of the attribute specified in quotes, the name of the key is used, by which you can find the data connected to the attribute.

If you are taking this course, we ask you to tell us about what environment you use to do your homework.

→ Part 1: Instantiating Vue

→ Part 2: Attribute Binding in Vue

Vue.js for beginners lesson 2: attribute binding