You're reading from JavaScript from Frontend to Backend

Product typeBook

Published inJul 2022

Reading LevelBeginner

PublisherPackt

ISBN-139781801070317

Edition1st Edition

Languages

JavaScript

Tools

Vue

Concepts

Full Stack Web Development

Author (1)

Eric Sarrion

Chapter 3: Getting Started with Vue.js

The JavaScript world is constantly changing. In recent years, a new concept has emerged: that of developing applications by creating components.

New JavaScript libraries for developing component-based apps have emerged, the main ones being Angular, React, Svelte, and Vue.js. Among all these libraries, which are quite similar to each other, we have chosen to present Vue.js to you because it is widely used and quite simple to implement. The other libraries mentioned operate according to the same principles.

Why Use Vue.js?

The main advantage of Vue.js is the possibility of developing an application using components. We cut the web application into a set of components (actually JavaScript files) and then assemble them to form the final application. Vue.js can test each component independently of the others and can also reuse them in other applications.

In this chapter, we will study how to build our first application with Vue.js, by creating...

Technical requirements

You can find the code files for this chapter on GitHub at: https://github.com/PacktPublishing/JavaScript-from-Frontend-to-Backend/blob/main/Chapter%203.zip.

Using Vue.js in an HTML page

To use Vue.js in an HTML page, simply insert the library file into it using the <script> tag.

To check that Vue.js is correctly integrated into the page, let’s display the version number of the library in the Vue.version variable:

Displaying Vue.js version number (index.html file)

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
  </body>
  
  <script>
    alert(`Vue.version = ${Vue.version}`);
  </script>
</html>

If Vue.js is accessible in the page, the Vue object provides access to the version number in its version property as we can see in the following figure:

Figure 3.1 – Displaying the Vue.js version number

Now that...

Creating our first Vue.js application

Once Vue.js has been inserted into the HTML page, you must define the HTML elements of the page in which Vue.js will be used.

In general, you want to use Vue.js on the whole HTML page, but it is possible to use it only on certain elements of the page as well. This would allow us, for example, to manage an HTML page with jQuery, except for a particular <div> element, which would be managed with Vue.js.

To illustrate this, let us create an HTML page with two <div> elements, only the first of which will be managed by Vue.js:

Creating an HTML page partially managed by Vue.js

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">First div</div>
    <div...

Using reactivity

One of the objectives of Vue.js is to separate the management of the display (the view) and that of the data (the model). This is the concept that is frequently found in what is called the Model View Controller (MVC) model.

To illustrate, suppose we want to display a counter that increments from 0. A good separation of view and model would be for the view to constantly display the value of the counter, even if that value is changed elsewhere. This concept makes it possible not to link the display with the management of the data displayed. For this, we use the reactivity offered by Vue.js, by creating so-called reactive variables.

Reactive Variables

A variable will be said to be reactive if its modification in memory causes it to be modified automatically wherever the variable is displayed.

Reactive variables are defined in the options object of the Vue.createApp(options) method. For this, we add in the options object, and the definition of the data() method...

Creating our first component

Let’s see how to use Vue.js to create our own components.

A Vue.js component will be similar to a new HTML element. It will be used in the form of HTML tags to which new attributes can be associated if necessary. To use the component, all you have to do is use the corresponding tag.

The components are therefore a means of enriching the HTML code by creating our own tags.

How to Discover the Components to Use to Build Our Application

All you have to do is visually cut the HTML page you want to display into the simplest possible elements (which will be the basic components of your application), then group several elements together to form a component that will group them, and so on until you have the main component, which will be your complete application.

For example, if a list of elements is displayed on the HTML page, each element’s line of the list corresponds to a basic component, while the global list that groups these...

Adding methods in components

We have seen how to create reactive variables in a component, using the data section of the component. It is also possible to create methods in a component that can be used in the component template.

There are two ways to add methods to a component:

The first is to define the method in the methods section of the component.
The second is to create a so-called computed property that will be defined in the computed section of the component.

Let’s look at these two ways to do it.

Defining methods in the methods section

For each incrementation of the counter, it should be necessary to display the time at which it occurs. A time() function would be very useful in the component, allowing us to display the time in the form HH:MM:SS. This time() function will be defined in the methods section of the component.

The <counter> component is modified to integrate the display of the time at the beginning of the line. We can...

Using attributes in components

Attributes in a component allow it to pass parameters for its use. For example, we could use in the <counter> component a start attribute indicating at what value we start counting. If this attribute is not indicated, it is considered to be 0 (that is, counting starts at 0 as in the preceding code example).

For a component to be able to employ attributes during its use, it suffices to indicate the name of the attributes in the props section of the component. The component can access the attribute value using the this keyword (for example, this.start to access the start attribute in the component). We can see this in action in the following code:

Using the start attribute in the component (index.html file)

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  ...

Using directives

Vue.js improves the writing of HTML code by offering to write its own components, as we have seen in the preceding section. The framework also makes it easier to write basic HTML code by adding new attributes to the HTML elements or to the components created. These new attributes are called directives.

Note

Directives are used exclusively in HTML elements or created components, that is, in the template section of components.

Their name begins with v-, so as not to be confused with other existing HTML attributes. The main directives are v-if, v-else, v-show, v-for, and v-model. They will be explained now.

The v-if and v-else directives

The v-if directive is used to specify a condition. If true, the HTML element (or component) will be inserted into the HTML page. Otherwise, it will not be present.

Let’s use the v-if directive to indicate that we want to display the value of the counter only for values less than or equal to 20. As soon as the...

Summary

In this chapter, we have mainly studied how to create a component and methods or attributes associated with it.

It is now necessary to study how to manage the actions of the user in a component, then how to assemble the components to form an application.

The rest of the chapter is locked

You have been reading a chapter from

JavaScript from Frontend to Backend

Published in: Jul 2022Publisher: PacktISBN-13: 9781801070317

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime

Author (1)

Eric Sarrion

Eric Sarrion is a trainer and a developer as an independent consultant. He has been involved in all kinds of IT projects for over 30 years. He is also a long time author in web development technologies and is renowned for the clarity of his explanations and examples.
Read more about Eric Sarrion

Personalised recommendations for you

Based on your interests and search pattern

Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development covers everything a frontend developer or a Drupal developer needs to know about the Drupal 10 theme layer. Using real-world examples, this book will help you to build up from an empty theme to a fast, responsive, maintainable, and accessible Drupal website in both monolithic and decoupled ways.

BookAug 2023360 pages4

Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack development. The step-by-step exploration of everything from dependency injection, ORM with Hibernate, and JWTs to RESTful APIs, UI styling, and TypeScript will help you to develop the Spring Boot and React skills you need.

BookOct 2023454 pages5

Modern API Development with Spring 6 and Spring Boot 3

This practical guide teaches inexperienced Java programmers and web developers how to design, develop, test, and deploy highly scalable and maintainable APIs using REST, gRPC, GraphQL, and reactive programming paradigms with Java and Spring Boot. Complete with real-world examples, it will guide you to build enterprise-level APIs and services.

BookSep 2023494 pages1

Hands-On Web Scraping with Python

This book guides you to discover and extract quality data from the web using Python libraries such as requests, lxml, pyquery, scrapy, and to use effective scraping techniques. It’ll help you master the fundamentals and advanced concepts of web scraping and apply your skills to real-world data extraction tasks, with analysis and visualization.

BookOct 2023324 pages

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages4

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages3

Full Stack Web Development with Remix

Unlock the power of the web platform and cutting-edge technologies for your React applications using Remix to take advantage of the full stack to create a great user experience. This book is a complete resource covering the conventions, levers, and primitives of Remix and illustrates concepts through a real-world project.

BookNov 2023318 pages

Real-World Svelte

This book is a must-have guide to unlocking Svelte's true potential. You’ll learn about advanced component development, efficient coding, and powerful UI patterns using actions. With a focus on state management, custom stores, and renderless components, this book equips you to build exceptional web apps with lightning-fast performance.

BookDec 2023282 pages3

Building Micro Frontends with React 18

This book is a step-by-step guide to building production-grade, highly scalable, and performant web apps using multi-SPA and micro apps patterns, where you’ll learn to deal with complexities related to micro frontends. The book is a full life cycle guide to building, deploying, and managing micro frontends in a cloud-native environment.

BookOct 2023218 pages

Drupal 10 Masterclass

This all-in-one guide helps you get up and running with building Drupal applications using the latest Drupal 10 features. You’ll develop a complete practical understanding of Drupal frontend, backend, architecture, content management, themes, and modules to deliver a rich user experience by creating custom Drupal apps.

BookDec 2023310 pages

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages5

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages2