Vue.js in action /
Saved in:
| Author / Creator: | Hanchett, Erik, author. |
|---|---|
| Imprint: | Shelter Island, NY : Manning Publications, [2018] ©2018 |
| Description: | 1 online resource (1 volume) : illustrations |
| Language: | English |
| Subject: | |
| Format: | E-Resource Book |
| URL for this record: | http://pi.lib.uchicago.edu/1001/cat/bib/13665679 |
Table of Contents:
- Foreword
- Preface
- Acknowledgments
- About this book
- About the author
- About the cover illustration
- Part 1. Getting to Know Vue.Js
- 1. Introducing Vue.js
- 1.1. On the shoulders of giants
- The Model-View-Controller pattern
- The Model-View-ViewModel pattern
- What's a reactive application?
- A JavaScript calculator
- A Vue calculator
- Comparison of JavaScript and Vue
- How does Vue facilitate MVVM and reactivity?
- 1.2. Why Vue.js?
- 1.3. Future thoughts
- 2. The Vue instance
- 2.1. Our first application
- The root Vue instance
- Making sure our application is running
- Displaying something inside our view
- Inspecting properties in Vue
- 2.2. The Vue lifecycle
- Adding lifecycle hooks
- Exploring the lifecycle code
- Keeping the lifecycle code, or not
- 2.3. Displaying a product
- Defining product data
- Marking up the product view
- 2.4. Applying output filters
- Write the filter Junction
- Adding the filter to our markup and testing different values
- Part 2. The View and ViewModel
- 3. Adding interactivity
- 3.1. Shopping cart data starts with adding an array
- 3.2. Binding to DOM events
- Event binding basics
- Bind an event to the Add to cart button
- 3.3. Adding a cart item button and count
- When to use a computed property
- Examining update events with computed properties
- Displaying a cart item count and testing
- 3.4. Adding user affordance to our button
- Keeping an eye on inventory
- Working with computed properties and inventory
- v-show directive basics
- Using v-if and v-else to display a disabled button
- Adding the cart item button as a toggle
- Using v-if to display a checkout page
- Comparing v-show with v-if/v-else
- 4. Forms and inputs
- 4.1. Using v-model binding
- 4.2. A look at value binding
- Binding values to our check box
- Working with value bindings and radio buttons
- Learning the v-for directive
- The v-for directive without the optional key
- 4.3. Learning modifiers with the application
- Using the number modifier
- Trimming the input values
- The lazy v-model modifier
- 5. Conditionals, looping, and lists
- 5.1. Show an available inventory message
- Adding how many are left with v-if
- Adding more messaging with v-else and v-else-if
- 5.2. Looping our products
- Adding a star rating with v-for range
- Binding an HTML class to our star rating
- Setting up our products
- Importing products from product.json
- Refactoring our app with the v-for directive
- 5.3. Sorting records
- 6. Working with components
- 6.1. What are components?
- Creating components
- Global registration
- Local registration
- 6.2. Relationships in components
- 6.3. Using props to pass data
- Literal props
- Dynamic props
- Prop validation
- 6.4. Defining a template component
- Using inline template strings
- Text/x-template script elements
- Using single-file components
- 6.5. Working with custom events
- Listening to events
- Modifying child props using .sync
- 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
- Creating a new application with Vue-CLI
- Setting up our routes
- Adding CSS, Bootstrap, and Axios to our application
- Setting up our components
- Creating the Form component
- Adding the Main component
- 7.7. Routing
- Adding a product route with parameters
- Setting up a router-link with tags
- Setting up a router-link with style
- Adding a child edit route
- Using redirection and wildcards
- 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
- Adding a transition to the pet store application
- Adding an animation to the pet store application
- 9. Extending Vue
- 9.1. Reusing functionality with mixins
- Global mixins
- 9.2. Learning custom directives with examples
- Global custom directives with modifiers, values, and orgs
- 9.3. Render functions and JSX
- Bender function example
- JSX example
- Part 3. Modeling Data, Consuming APIs, and Testing
- 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
- Vuex installation in Vue-CLI
- 10.5. Vuex helpers
- 10.6. A quick look at modules
- 11. Communicating with a server
- 11.1. Server-side rendering
- 11.2. Introducing Nuxt.js
- Creating a music search app
- Creating a project and installing dependencies
- Creating our building blocks and components
- Updating the default layout
- Adding a store using Vuex
- Using middleware
- Generating routes using Nuxt.js
- 11.3. Communicating with a server using Firebase and VuexFire
- Setting up Firebase
- Setting up our pet store app with Firebase
- Updating Vuex with authentication state
- Updating the header component with authentication
- Updating Main.vue to use Firebase Realtime database
- 12. Testing
- 12.1. Creating test cases
- 12.2. Continuous integration, delivery, and deployment
- Continuous integration
- Continuous delivery
- 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
- Testing props
- Testing text
- Testing CSS classes
- Testing with a mocked Vuex
- 12.7. Setting up the Chrome debugger
- Appendix A. Setting up your environment
- Appendix B. Solutions to chapter exercises
- Index