Today we bring to your attention the translation of the first lesson of the Vue.js training course for beginners. After learning this lesson, you will learn about what a Vue instance is and how to start developing your own Vue applications.

ITKarma picture

Prerequisites


It is assumed that anyone who decides to master this course has knowledge in the field of basic web technologies: HTML, CSS and JavaScript.

In this course, we will develop a page that is a product card.

 image

Page that we will be developing

lesson goal


In this tutorial, we’ll show you how to use Vue to display data on a web page.

Initial version of the code


We will start with a very simple HTML and JavaScript code located in two files.

CDMY0CDMY File:

<!DOCTYPE html> <html> <head>     <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product App</title> </head> <body>          <div id="app">         <h1>Product Name</h1>     </div>          <script src="main.js"></script> </body> </html> 

File main.js:

var product="Socks"; 

In this course, the codepen.io platform is used as the environment in which you are invited to do homework. Corresponding blanks are designed as CodePen projects. Those who take this course are encouraged to run all the code they meet here on their own.

The CodePen interface has three areas for code. These are the HTML, CSS, and JS fields, respectively. The code entered in the CSS and JS fields is automatically connected to the web page described in the HTML field. That is, in order to recreate the above example in the CodePen environment, you need to enter the code contained in the CDMY1CDMY tag in the CDMY2CDMY file without the last line connecting CDMY3CDMY to the HTML area, and the code CDMY4CDMY in the JS area.

ITKarma picture

Start experimenting with CodePen

Using CodePen to run sample code is optional. You may well use some other online service, or you can get by with the local development environment by recreating the files described here.

Task


We need a mechanism that allows us to take the value contained in the JavaScript code, for example, what is now written in the CDMY5CDMY variable, and put it in the code of the web page, in the CDMY6CDMY tag.

The Vue.js. framework will help us solve this problem. Here is the official Russian-language manual on it.

The first step of our work with Vue will be to connect the framework to the page. To do this, make changes to the CDMY7CDMY file, adding to it, directly above the CDMY8CDMY file attachment code, the following:

<script src="https://unpkg.com/vue"></script> 

Next, in CDMY9CDMY, we enter the following code, removing the declaration of the variable CDMY10CDMY from it:

var app=new Vue({     el: '#app',     data: {         product: "Socks"     } }) 

Now you need to bind the DOM to the data of the Vue instance. This is done using a special HTML construct, using Mustache syntax, which uses double curly braces:

<div id="app">     <h1>{{ product }}</h1> </div> 

The JavaScript expression in braces will be replaced by the value of the CDMY11CDMY property of the CDMY12CDMY object.

Here's what the project will look like in CodePen if everything works as it should.

ITKarma picture

Data transferred from JavaScript to HTML page

As you can see, we were able to transfer data from JavaScript code to an HTML page. Now let's figure out what we just did.

Vue instance


Here is the code diagram with which to create an instance of Vue:

var app=new Vue({options}) 

The Vue instance is the root entity of the application. It is created by passing the object with options to the CDMY13CDMY constructor. This object contains various properties and methods that give the Vue instance the ability to store data and perform some action.

Connecting a Vue instance to a webpage element


Note the following property of the options object used to create the Vue instance:

el: '#app' 

Using this property, we connect an instance of Vue to an element of our page. Thanks to this, we create a connection between the Vue instance and the corresponding part of the DOM. In other words, we activate Vue in the CDMY14CDMY element with the identifier CDMY15CDMY, writing CDMY16CDMY to the CDMY17CDMY property of the options object that was used to create the Vue instance.

Placing data in a Vue instance


The Vue instance has data storage space. This data is described using the CDMY18CDMY property of an object with options:

data: {     product: "Socks" } 

Data stored in a Vue instance can be accessed from the webpage element to which the Vue instance is connected.

Using JavaScript expressions in HTML code


If we need the CDMY19CDMY property value to be displayed where the text of the first level header is displayed, the name of this property can be put in double curly brackets in the corresponding tag:

<h1>{{ product }}</h1> 

In fact, we are talking about the fact that in double curly brackets is a JavaScript expression, the calculation results of which the framework substitutes into the CDMY20CDMY tag as text.

Important term: expression


Expressions allow you to use the values ​​stored in the Vue instance, as well as JavaScript constructs, the use of which allows you to create some new values.

When Vue sees the expression CDMY21CDMY, he realizes that we are referencing the data associated with the Vue instance using the CDMY22CDMY key. The framework replaces the key name with the corresponding value. In this case, it is CDMY23CDMY.

Expression examples


As already mentioned, you can use various JavaScript constructs in double curly braces. Here are some examples:

{{ product + '?' }} {{ firstName + ' ' + lastName }} {{ message.split('').reverse().join('') }} 

Introducing reactivity


The reason Vue immediately displays a value corresponding to the CDMY24CDMY property in the CDMY25CDMY tag immediately after loading the page is because Vue is a reactive framework. In other words, Vue instance data is linked to all places on the web page that link to this data. As a result, Vue can not only display data in a certain place on the page, but also update the corresponding HTML code if the data to which it refers are changed.

In order to prove this, let's open the browser developer tools console and change the value recorded in the CDMY26CDMY property of the CDMY27CDMY object. When we do this, for example, by typing CDMY28CDMY in the console, the text displayed on the page will also change.

 image

Changing the value of the product property changes the text displayed on the web page

See how easy it is to do?

Workshop


Add the CDMY29CDMY key containing the text CDMY30CDMY to the data already in the Vue instance. Then print the value of this key in the element CDMY31CDMY, which should be below the element CDMY32CDMY.

Here a workpiece that you can use to solve this problem.

Here is a solution to the problem.

Summary


Let's talk about what we learned today:

  • We learned how to start developing a Vue application by creating an instance of Vue, and how to display data on a web page.
  • A Vue instance is the root of every Vue application.
  • The Vue instance connects to the DOM element selected when it was created.
  • The data stored in the Vue instance can be output to the page using Mustache syntax, which uses double curly braces, CDMY33CDMY, containing JavaScript expressions.
  • Vue is a reactive framework.

Do you plan to take this course?

ITKarma picture.

Source