nach oben

2018 | Buch

Pro Vue.js 2

verfasst von: Adam Freeman

Verlag: Apress

Enthalten in: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Einloggen, um Zugang zu erhalten

Über dieses Buch

Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of the Model-View-Controller (MVC) pattern on the client, creating a strong foundation for complex and rich web apps.

Best-selling author Adam Freeman explains how to get the most from Vue.js 2. He begins by describing the MVC pattern and the benefits it can offer. He then shows you how to use Vue.js in your projects, starting from the nuts and bolts and building up to the most advanced and sophisticated features, going in-depth to give you the knowledge you need. Chapters include common problems and how to avoid them.

What You'll LearnGain a solid architectural understanding of the MVC pattern
Create rich and dynamic web app clients using Vue.js 2
Extend and customize Vue.js
Test your Vue.js projects

Who This Book Is For
JavaScript developers who want to use Vue.js to create dynamic client-side applications

Inhaltsverzeichnis

Frontmatter

Getting Started with Vue.js

Frontmatter

Chapter 1. Your First Vue.js Application

Abstract

The best way to get started with Vue.js is to dive in. In this chapter, I take you through a simple development process to create an application to keep track of to-do items. In Chapters 5–8, I show you how to create a more complex and realistic application, but for now, a simple example will be enough to demonstrate how Vue.js applications are created and how the basic features work. Don’t worry if you don’t understand everything in this chapter—the idea is to get an overall sense of how Vue.js works, and I explain everything in detail in later chapters.

Adam Freeman

Chapter 2. Understanding Vue.js

Abstract

Vue.js is a flexible and powerful open-source framework for developing client-side applications, taking design principles from the world of server-side development and applying them to HTML elements, creating a foundation that makes building rich web applications easier. In this book, I explain how Vue.js works and demonstrate the different features that it provides.

Adam Freeman

Chapter 3. HTML and CSS Primer

Abstract

Developers come to the world of web app development via many paths and are not always grounded in the basic technologies that web apps rely on. In this chapter, I provide a brief primer for HTML and introduce the Bootstrap CSS library, which I use to style the examples in this book. In Chapter 4, I introduce the basics of JavaScript and give you the information you need to understand the examples in the rest of the book. If you are an experienced developer, you can skip these primer chapters and jump right to Chapter 5, where I use Vue.js to create a more complex and realistic application.

Adam Freeman

Chapter 4. Essential JavaScript Primer

Abstract

In this chapter, I provide a quick tour of the most important features of the JavaScript language as they apply to Vue.js development. I don’t have the space to describe JavaScript completely, so I have focused on the essentials that you’ll need to get up to speed and follow the examples in this book. Table 4-1 summarizes the chapter.

Adam Freeman

Chapter 5. SportsStore: A Real Application

Abstract

Most of the chapters of this book contain small examples that are focused on a specific feature. This is a useful way to show you how different parts of Vue.js work, but there is sometimes a lack of context, and it can be hard to connect the features in one chapter with those in other chapters. To help overcome this problem, I am going to create a more complex application in this chapter and the chapters that follow.

Adam Freeman

Chapter 6. SportsStore: Checkout and Orders

Abstract

In this chapter, I continue adding features to the SportsStore application that I created in Chapter 5. I add support for a shopping cart and a checkout process that allows the user to submit orders to the web service.

Adam Freeman

Chapter 7. SportsStore: Scaling and Administration

Abstract

In this chapter, I continue adding features to the SportsStore application that I created in Chapter 5. I add support for dealing with larger amounts of data and begin to implement the features required to administer the application.

Adam Freeman

Chapter 8. SportsStore: Administration and Deployment

Abstract

In this chapter, I complete the SportsStore application by adding the remaining administration features and show you how to prepare and deploy the project. As you will see, the transition from development to production is relatively simple and easy to perform.

Adam Freeman

Vue.js in Detail

Frontmatter

Chapter 9. Understanding Vue.js

Abstract

When you get started with Vue.js, it can be easy to be overwhelmed because there is a lot going on and not all of it makes immediate sense. This chapter explains how Vue.js works and demonstrates that there is no magic involved—something that can be helpful to bear in mind as I dig into the detail of individual Vue.js features in the chapters that follow. Table 9-1 summarizes the chapter.

Adam Freeman

Chapter 10. Understanding Vue.js Projects and Tools

Abstract

In Chapter 9, I briefly described how a Vue.js application works in order to provide context for the rest of the book, and as part of that process, I created a project using the @vue-cli package and then used the tools it contained. In this chapter, I explain how this kind of Vue.js project is structured and what each of the tools does. Table 10-1 puts this chapter in context.

Adam Freeman

Chapter 11. Understanding Data Bindings

Abstract

In this chapter, I explain how to perform one of the most basic tasks required in web application development: using a data binding to display a data value. I explain how to add a basic data binding, known as the text interpolation binding, to a component’s template and how to create the data value for that binding. I explain how Vue.js evaluates a data binding’s expression and demonstrate different ways that values can be generated and formatted before they are displayed to the user. Table 11-1 puts the text interpolation data binding in context.

Adam Freeman

Chapter 12. Using the Basic Directives

Abstract

Directives are special attributes that apply Vue.js functionality to HTML elements in a component’s template. In this chapter, I explain how to use the basic built-in directives that Vue.js provides, which provide some of the most commonly required features in web application development. In Chapters 13–15, I describe more complex directives, and in Chapter 26, I explain how to create custom directives when the built-in ones don’t provide the features you require. Table 12-1 puts the built-in directives in context.

Adam Freeman

Chapter 13. Using the Repeater Directive

Abstract

In this chapter, I continue to describe the built-in Vue.js directives and focus on the v-for directive, which is commonly used to populate lists and generate rows for tables and grid layouts. Table 13-1 puts the v-for directive in context.

Adam Freeman

Chapter 14. Handling Events

Abstract

In this chapter, I continue describing the built-in Vue.js directives, focusing on the v-on directive, which is used for event handling and which Table 14-1 puts in context.

Adam Freeman

Chapter 15. Working with Form Elements

Abstract

In this chapter, I describe v-model, which is the built-in directive used for HTML form elements. The v-model directive creates a two-way data binding between a form element and a data value and ensures that the application remains consistent, regardless of how the data is changed. I also show you how to combine the v-model directive with some of the built-in directives described in earlier chapters to validate the data entered into a form by the user. Table 15-1 puts the v-model directive in context.

Adam Freeman

Chapter 16. Using Components

Abstract

In this chapter, I explain how components form the building blocks in a Vue.js application and allow related content and code to be grouped together to make development easier. I show you how to add components to a project, how to communicate between components, and how components can work together to present content to the user. Table 16-1 puts components in context.

Adam Freeman

Advanced Vue.js Features

Frontmatter

Chapter 17. Understanding the Component Lifecycle

Abstract

When Vue.js creates a component, it begins a well-defined lifecycle that includes preparing the data values, rendering the HTML content in the Document Object Model (DOM), and dealing with any updates. In this chapter, I describe the different stages in the component lifecycle and demonstrate the various ways a component can respond to them.

Adam Freeman

Chapter 18. Loosely Coupled Components

Abstract

As a Vue.js application grows, the need to pass data and events between parent and child components becomes harder to arrange, especially when components in different parts of the application need to communicate. The result can be components whose own functionality is overtaken by the need to pass on props for their descendants and relay events to their antecedents. In this chapter, I describe an alternative approach, known as dependency injection, which allows components to communicate without being tightly coupled to one another. I show you the different ways in which dependency injection can be used and demonstrate how it frees up the structure of an application. I also show you how to use an event bus, which combines dependency injection with the ability to register interest in custom events programmatically, allowing a component to send a custom event to any interested receiver, rather than just its parent. Table 18-1 puts dependency injection and event buses in context.

Adam Freeman

Chapter 19. Using RESTful Web Services

Abstract

In this chapter, I demonstrate how to consume a RESTful web service in a Vue.js application. I explain the different ways that HTTP requests can be made and extend the example application so that it reads and stores its data from a server. Table 19-1 puts using web services n context.

Adam Freeman

Chapter 20. Using a Data Store

Abstract

In this chapter, I show you how to use the Vuex package to create a data store, which provides an alternative approach to sharing data in an application and arranging coordination between components. Table 20-1 puts the Vuex data store in context.

Adam Freeman

Chapter 21. Dynamic Components

Abstract

Simple applications can present all their content to the user at once, but more complex projects will need to be more selective and display different components to the user at different times. In this chapter, I explain the built-in Vue.js features that allow components to be displayed dynamically based on user interaction and to load components only when they are required, which can help reduce the amount of data users consume. Table 21-1 puts dynamic components in context.

Adam Freeman

Chapter 22. URL Routing

Abstract

In this chapter, I start to describe the URL routing feature, which builds on the dynamic components that I described in Chapter 21 but uses the current URL to select the components that are displayed to the user. URL routing is a complex topic, and I continue to describe different aspects of this feature in Chapters 23 and 24. Table 22-1 puts URL routing in context.

Adam Freeman

Chapter 23. URL Routing Element Features

Abstract

In this chapter, I describe some of the features provided by the router-link and router-view elements. I will show you how to change the way that router-link elements are processed, how to use different events for navigation, and how to respond to route activation by changing the styles applied to navigation elements. I’ll also show you how to use more than one router-view element in an application and how to manage two or more router-view elements when they appear in the same template. Table 23-1 puts this chapter into context.

Adam Freeman

Chapter 24. Advanced URL Routing

Abstract

In this chapter, I describe the more advanced URL routing features. I start by showing you how to structure a complex routing configuration using multiple files, how to use router guards to control navigation, and how to lazily load components when they are selected by a route. I finish this chapter by showing you how to work with components that have not been written to work with the Vue Router package. Table 24-1 summarizes the chapter.

Adam Freeman

Chapter 25. Transitions

Abstract

The Vue.js transition feature allows you to respond when an HTML element is added or removed or changes position. When combined with the features provided by modern browsers, transitions can be used to draw the user’s attention to the part of the application that has been affected by their actions. In this chapter, I show you the different ways that transitions can be used, demonstrate how to use third-party CSS and JavaScript animation packages, and show you how to draw the user’s attention to other types of change, such as when a data value is modified. Table 25-1 puts this chapter in context.

Adam Freeman

Chapter 26. Extending Vue.js

Abstract

Vue.js provides all the features that are required for most web application projects. But if you find that you need to extend Vue.js, then there are several different techniques available, and they are the topic of this chapter. I show you how to supplement the built-in directives with your own custom code, how to define common features for components using mixins, and how to group a wider range of related features using a plugin. Table 26-1 puts this chapter in context.

Adam Freeman

Backmatter

Titel: Pro Vue.js 2
verfasst von: Adam Freeman
Verlag: Apress
Electronic ISBN: 978-1-4842-3805-9
Print ISBN: 978-1-4842-3804-2
DOI: https://doi.org/10.1007/978-1-4842-3805-9