Vue.js in Action
Erik Hanchett with Benjamin Listwon
  • MEAP began June 2017
  • Publication in Spring 2018 (estimated)
  • ISBN 9781617294624
  • 375 pages (estimated)
  • printed in black & white

Web pages are rich with data and graphics, and it's challenging to maintain a smooth, quick user experience. Vue.js in Action teaches you to build fast, flowing web UI with the Vue.js framework. This practical book starts with a mental model of the reactive UI pattern and an overview of Vue.js. Then, by exploring hands-on examples, you'll learn how to interact directly with the DOM, work with events, loops, and build the View and ViewModel. You'll also learn how to extend your Vue.js app, add transitions, test for bugs, and more. As you move through the book, you'll put your skills to practice by building a complete web store application with product listings, a checkout process, and an administrative interface!

Table of Contents detailed table of contents

Part 1: Getting To Know Vue.js

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-view-model pattern

1.1.3. What is a reactive application anyway?

1.1.4. A JavaScript calculator

1.1.5. A Vue calculator

1.1.6. Comparison

1.1.7. How does Vue facilitate MVVM and reactivity?

1.2. So, why Vue.js?

1.3. Summary

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 the sitename property

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. Formatting the product price with an output filter

2.4.1. Write the filter function

2.4.2. Add the filter to our markup

2.4.3. Testing different values

2.5. Summary

Part 2: The View And ViewModel

3. Adding interactivity

3.1. Shopping cart data

3.2. Binding to DOM events

3.2.1. Event binding basics

3.2.2. Our "Add to cart" button

3.2.3. Testing our 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

3.3.4. Adding the cart item button

3.3.5. Testing the Add to cart button

3.4. Adding user affordance to our button

3.4.1. Keeping an eye on inventory

3.4.2. Determining if a product can be added to the cart

3.4.3. Using v-show to hide the button

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

3.4.5. Using v-if to display a checkout page

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

3.5. Summary

4. Forms and input

5. Conditionals and Lists, Looping

6. Events

7. Components

8. Advanced components

9. Transitions

10. Extending Vue

Part 3: Modeling Data And Consuming APIs

11. Vuex

12. Vue-router

13. Vue-resource

14. Communicating with a server

Part 4: Keeping Things Professional

15. Testing

About the Technology

Vue.js is a front-end framework that builds on many of the reactive UI ideas introduced in React.js. As a second-generation reactive UI framework, Vue was designed from the ground up with developer usability in mind. It's far more intuitive than React, featuring a clean event lifecycle, easy two-way data binding, and a common-sense project structure. By interacting directly with the DOM and not having to script all user interactions, anyone with basic HTML, JavaScript, and CSS skills can build fast interactive UIs. Compared to Angular and React, Vue is faster, and its lightweight design requires a smaller footprint.

What's inside

  • Adding View and ViewModel interactivity
  • Working with components
  • Extending Vue.js with custom plugins and directives
  • Modeling data and consuming APIs

About the reader

Written for web developers with beginning to intermediate in JavaScript, HTML, and CSS.

About the authors

Erik Hanchett is a software developer who loves all things JavaScript. Benjamin Listwon is an experienced designer and developer living in Seattle.


Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
Buy
MEAP combo $44.99 pBook + eBook
MEAP eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks