Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Foreword

Preface

Acknowledgments

About this book

About the author

About the cover illustration

1. Getting to know Vue.js

Chapter 1. Introducing Vue.js

1.1. On the shoulders of giants

1.1.1. The Model–View–Controller pattern

1.1.2. The Model–View–ViewModel pattern

1.1.3. What’s a reactive application?

1.1.4. A JavaScript calculator

1.1.5. A Vue calculator

1.1.6. Comparison of JavaScript and Vue

1.1.7. How does Vue facilitate MVVM and reactivity?

1.2. Why Vue.js?

1.3. Future thoughts

Summary

Chapter 2. The Vue instance

2.1. Our first application

2.1.1. The root Vue instance

2.1.2. Making sure our application is running

2.1.3. Displaying something inside our view

2.1.4. Inspecting properties in Vue

2.2. The Vue lifecycle

2.2.1. Adding lifecycle hooks

2.2.2. Exploring the lifecycle code

2.2.3. Keeping the lifecycle code, or not

2.3. Displaying a product

2.3.1. Defining product data

2.3.2. Marking up the product view

2.4. Applying output filters

2.4.1. Write the filter function

2.4.2. Adding the filter to our markup and testing different values

Exercise

Summary

2. The View and ViewModel

Chapter 3. Adding interactivity

3.1. Shopping cart data starts with adding an array

3.2. Binding to DOM events

3.2.1. Event binding basics

3.2.2. Bind an event to the Add to cart button

3.3. Adding a cart item button and count

3.3.1. When to use a computed property

3.3.2. Examining update events with computed properties

3.3.3. Displaying a cart item count and testing

3.4. Adding user affordance to our button

3.4.1. Keeping an eye on inventory

3.4.2. Working with computed properties and inventory

3.4.3. v-show directive basics

3.4.4. Using v-if and v-else to display a disabled button

3.4.5. Adding the cart item button as a toggle

3.4.6. Using v-if to display a checkout page

3.4.7. Comparing v-show with v-if/v-else

Exercise

Summary

Chapter 4. Forms and inputs

4.1. Using v-model binding

4.2. A look at value binding

4.2.1. Binding values to our check box

4.2.2. Working with value bindings and radio buttons

4.2.3. Learning the v-for directive

4.2.4. The v-for directive without the optional key

4.3. Learning modifiers with the application

4.3.1. Using the .number modifier

4.3.2. Trimming the input values

4.3.3. The .lazy v-model modifier

Exercise

Summary

Chapter 5. Conditionals, looping, and lists

5.1. Show an available inventory message

5.1.1. Adding how many are left with v-if

5.1.2. Adding more messaging with v-else and v-else-if

5.2. Looping our products

5.2.1. Adding a star rating with v-for range

5.2.2. Binding an HTML class to our star rating

5.2.3. Setting up our products

5.2.4. Importing products from product.json

5.2.5. Refactoring our app with the v-for directive

5.3. Sorting records

Exercise

Summary

Chapter 6. Working with components

6.1. What are components?

6.1.1. Creating components

6.1.2. Global registration

6.1.3. Local registration

6.2. Relationships in components

6.3. Using props to pass data

6.3.1. Literal props

6.3.2. Dynamic props

6.3.3. Prop validation

6.4. Defining a template component

6.4.1. Using inline template strings

6.4.2. Text/x-template script elements

6.4.3. Using single-file components

6.5. Working with custom events

6.5.1. Listening to events

6.5.2. Modifying child props using .sync

Exercise

Summary

Chapter 7. Advanced components and routing

7.1. Working with slots

7.2. A look at named slots

7.3. Scoped slots

7.4. Creating a dynamic components app

7.5. Setting up async components

7.6. Converting the pet store app using Vue-CLI

7.6.1. Creating a new application with Vue-CLI

7.6.2. Setting up our routes

7.6.3. Adding CSS, Bootstrap, and Axios to our application

7.6.4. Setting up our components

7.6.5. Creating the Form component

7.6.6. Adding the Main component

7.7. Routing

7.7.1. Adding a product route with parameters

7.7.2. Setting up a router-link with tags

7.7.3. Setting up a router-link with style

7.7.4. Adding a child edit route

7.7.5. Using redirection and wildcards

Exercise

Summary

Chapter 8. Transitions and animations

8.1. Transitions basics

8.2. Animations basics

8.3. JavaScript hooks

8.4. Transitioning components

8.5. Updating the pet store application

8.5.1. Adding a transition to the pet store application

8.5.2. Adding an animation to the pet store application

Exercise

Summary

Chapter 9. Extending Vue

9.1. Reusing functionality with mixins

9.1.1. Global mixins

9.2. Learning custom directives with examples

9.2.1. Global custom directives with modifiers, values, and args

9.3. Render functions and JSX

9.3.1. Render function example

9.3.2. JSX example

Exercise

Summary

3. Modeling data, consuming APIs, and testing

Chapter 10. Vuex

10.1. Vuex, what is it good for?

10.2. Vuex state and mutations

10.3. Getters and actions

10.4. Adding Vuex to Vue-CLI with the pet store app

10.4.1. Vuex installation in Vue-CLI

10.5. Vuex helpers

10.6. A quick look at modules

Exercise

Summary

Chapter 11. Communicating with a server

11.1. Server-side rendering

11.2. Introducing Nuxt.js

11.2.1. Creating a music search app

11.2.2. Creating a project and installing dependencies

11.2.3. Creating our building blocks and components

11.2.4. Updating the default layout

11.2.5. Adding a store using Vuex

11.2.6. Using middleware

11.2.7. Generating routes using Nuxt.js

11.3. Communicating with a server using Firebase and VuexFire

11.3.1. Setting up Firebase

11.3.2. Setting up our pet store app with Firebase

11.3.3. Updating Vuex with authentication state

11.3.4. Updating the header component with authentication

11.3.5. Updating Main.vue to use Firebase Realtime database

Exercise

Summary

Chapter 12. Testing

12.1. Creating test cases

12.2. Continuous integration, delivery, and deployment

12.2.1. Continuous integration

12.2.2. Continuous delivery

12.2.3. Continuous deployment

12.3. Types of tests

12.4. Setting up our environment

12.5. Creating our first test case with vue-test-utils

12.6. Testing components

12.6.1. Testing props

12.6.2. Testing text

12.6.3. Testing CSS classes

12.6.4. Testing with a mocked Vuex

12.7. Setting up the Chrome debugger

Exercise

Summary

A. Setting up your environment

A.1. Chrome Developer Tools

A.2. vue-devtools for Chrome

A.3. Obtaining a chapter’s companion code

A.4. Installing Node.js and npm

A.4.1. Installing Node.js using one-click installers

A.4.2. Install Node.js using NVM

A.4.3. Install Node.js via Linux package management system

A.4.4. Install Node.js using MacPorts or Homebrew

A.4.5. Verifying that Node is installed

A.5. Installing Vue-CLI

B. Solutions to chapter exercises

Chapter 2

Chapter 3

Chapter 4

Chapter 5

Chapter 6

Chapter 7

Chapter 8

Chapter 9

Chapter 10

Chapter 11

Chapter 12

  

Cheat sheet

Component information

Custom events

Lifecycle hooks

Using a single slot

Multiple slots

  

Cheat sheet

Expressions

Directives

List rendering

Binding

Actions/events

Index

List of Figures

List of Tables

List of Listings