Vue.js 2.x by Example电子书

Title Page

Copyright

Vue.js 2.x by Example

Credits

About the Author

About the Reviewers

Acknowledgments

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

Getting Started with Vue.js

Creating the workspace

Application space

Vue library

Initializing Vue and displaying the first message

Computed values

Methods and reusable functions

Summary

Displaying, Looping, Searching, and Filtering Data

HTML declarations

v-html

Declarative rendering

Conditional rendering

v-if

v-else

v-for and displaying our data

Creating links using v-html

Format balance

Format registered date

Filtering our data

Building the form

Binding the inputs

Showing and hiding Vue content

Filtering our content

Filtering our filters

Changing CSS classes

Filtering and custom classes

Summary

Optimizing your App and Using Components to Display Data

Optimizing the code

Reducing the number of filter variables and grouping logically

Combining the format functions

Autodetection formatting

Passing in a second variable

Creating the method

Reducing the number of hard-coded variables and properties, and reducing redundancy

Creating Vue components

Creating and initializing your component

Using your component

Using component data and methods

Passing data to your component – props

Passing data to your component – slots

Creating a repeatable component

Creating component methods and computed functions

CSS class functions

Formatted value functions

Making the filtering work again with props

Making the filters a component

Creating the component

Resolving JavaScript errors

Using custom events to change the filter field

Updating the filter query

Summary

Getting a List of Files Using the Dropbox API

Getting started—loading the libraries

Creating a Dropbox app and initializing the SDK

Displaying your data and using Vue to get it

Create the component

Retrieve the Dropbox data

The Vue life cycle hooks

Displaying the Dropbox data

More file meta information

Formatting the file sizes

Adding a loading screen

Animating between states

Summary

Navigating through the File Tree and Loading Folders from the URL

Separating out files and folders

Making file and folder components

Linking folders and updating the structure

Creating a breadcrumb from the current path

Adding the ability to download files

Updating the URL hash and using it to navigate through the folders

Showing the folder based on the URL

Displaying an error message

Using the back and forward buttons in your browser

Removing unneeded code

Updating the structure with a URL change and setting Vue data outside of the instance

Final Code

Summary

Caching the Current Folder Structure Using Vuex

Including and initializing Vuex

Utilizing the store

Retrieving the message

Updating the message

Using the Vuex store for the folder path

Updating the path methods to use store commits

Using the path variable

Updating the breadcrumb component

Updating the dropbox-viewer component to work with Vuex

Caching the folder contents

Loading data from the store if it exists

Loading the data from the store

Only storing new data

Summary

Pre-Caching Other Folders and Files for Faster Navigation

Caching subfolders

Planning app methods

Creating the getFolderStructure method

Showing the data with the displayFolderStructure method

Set the loading state to true and create an empty structure object

Load the contents of the getFolderStructure method

Loop through the result and add each item to either the folders or files array

Update the global structure object and remove the loading state

Instigating the method

Caching the subfolders

Alternative caching method

Caching parent folders

Caching parent folders once

Caching download links on files

The complete code—with added documentation

Summary

Introducing Vue-Router and Loading URL-Based Components

Installing and initializing Vue-router

Changing the folder for Vue-router

Linking to the different routes

Linking to sub-routes

Dynamic routes with parameters

GET parameters

Using props

Setting prop defaults

Using static props

Nested routes

Creating a 404 page

Naming components, routes, and views

Naming components

Naming routes

Named views

Programmatically navigating with, redirecting, and adding an alias

Navigating programmatically

Redirecting

Alias routes

Summary

Using Vue-Router Dynamic Routes to Load Data

Outline and plan your app

Components

Route components

HTML components

Paths

Create initial files

Server setup

Storing the file locally

Using a remote server

Setting up local server

Loading CSV

Loading a CSV with d3

Loading a CSV with CSV Parser

Unifying Shopify CSV data

Storing the products

Displaying a single product

Page Not Found

Selecting the right product

Catching products not found

Displaying product information

Product images

Product variations

Variations display table

Using a key with loops

Displaying the variations in a table

Displaying variations in a select box

Updating the product details when switching URLs

Summary

Building an E-Commerce Store – Browsing Products

Listing the products

Adding a new route

Looping through products

Creating pagination

Calculating the values

Displaying a paginated list

Creating paginating buttons

Updating the URL on navigation

Creating pagination links

Updating the items per page

Creating the ListProducts component

Creating a curated list for the home page

Showing more information

Creating categories

Creating a category list

Creating an "miscellaneous" category

Displaying the categories

Displaying products in a category

Code optimization

Ordering products in a category

Store the product price

Wiring up the ordering

Creating Vuex getters

Building the filtering component based on products

Dynamically creating filters

Resetting filters

Updating the URL on checkbox filter change

Preselecting filters on page load

Filtering the products

Summary

Building an E-Commerce Store – Adding a Checkout

Creating the basket array placeholder

Adding product information to the store

Creating the store mutation to add products to the basket

Updating the Add to basket button when adding an item

Showing the product count in the header of the app

Calculating the basket quantity

Finalizing the Shop Vue-router URLs

Building the Order process and ListProducts component

Order Confirmation screen

Using Vue filters to format the price

Calculating a total price

Creating an Order Checkout page

Copying details between addresses

Creating an editable basket

Creating editable fields

Removing items from your cart

Completing the shop SPA

Summary

Using Vue Dev Tools and Testing Your SPA

Using the Vue.js developer tools

Inspecting Vue components data and computed values

Viewing Vuex mutations and time-travel

Previewing event data

Testing your SPA

Command-line unit testing

Browser automation

Summary