Vue.js 2.x by Example · Example-driven guide to build web apps with Vue.js for beginners by Street, Mike -- Read -- Imperial Library of Trantor

Index

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

← Prev
Back
Next →

← Prev
Back
Next →