最新章節

• Summary
• Browser automation
• Command-line unit testing
• Testing your SPA
• Previewing event data
• Viewing Vuex mutations and time-travel

• Summary 更新時間：2021-07-02 20:01:03
• Browser automation
• Command-line unit testing
• Testing your SPA
• Previewing event data
• Viewing Vuex mutations and time-travel
• Inspecting Vue components data and computed values
• Using the Vue.js developer tools
• Using Vue Dev Tools and Testing Your SPA
• Summary
• Completing the shop SPA
• Removing items from your cart
• Creating editable fields
• Creating an editable basket
• Copying details between addresses
• Creating an Order Checkout page
• Calculating a total price
• Using Vue filters to format the price
• Order Confirmation screen
• Building the Order process and ListProducts component
• Finalizing the Shop Vue-router URLs
• Calculating the basket quantity
• Showing the product count in the header of the app
• Updating the Add to basket button when adding an item
• Creating the store mutation to add products to the basket
• Adding product information to the store
• Creating the basket array placeholder
• Building an E-Commerce Store – Adding a Checkout
• Summary
• Filtering the products
• Preselecting filters on page load
• Updating the URL on checkbox filter change
• Resetting filters
• Dynamically creating filters
• Building the filtering component based on products
• Creating Vuex getters
• Wiring up the ordering
• Store the product price
• Ordering products in a category
• Code optimization
• Displaying products in a category
• Displaying the categories
• Creating an "miscellaneous" category
• Creating a category list
• Creating categories
• Showing more information
• Creating a curated list for the home page
• Creating the ListProducts component
• Updating the items per page
• Creating pagination links
• Updating the URL on navigation
• Creating paginating buttons
• Displaying a paginated list
• Calculating the values
• Creating pagination
• Looping through products
• Adding a new route
• Listing the products
• Building an E-Commerce Store – Browsing Products
• Summary
• Updating the product details when switching URLs
• Displaying variations in a select box
• Displaying the variations in a table
• Using a key with loops
• Variations display table
• Product variations
• Product images
• Displaying product information
• Catching products not found
• Selecting the right product
• Page Not Found
• Displaying a single product
• Storing the products
• Unifying Shopify CSV data
• Loading a CSV with CSV Parser
• Loading a CSV with d3
• Loading CSV
• Setting up local server
• Using a remote server
• Storing the file locally
• Server setup
• Create initial files
• Paths
• HTML components
• Route components
• Components
• Outline and plan your app
• Using Vue-Router Dynamic Routes to Load Data
• Summary
• Alias routes
• Redirecting
• Navigating programmatically
• Programmatically navigating with redirecting and adding an alias
• Named views
• Naming routes
• Naming components
• Naming components routes and views
• Creating a 404 page
• Nested routes
• Using static props
• Setting prop defaults
• Using props
• GET parameters
• Dynamic routes with parameters
• Linking to sub-routes
• Linking to the different routes
• Changing the folder for Vue-router
• Installing and initializing Vue-router
• Introducing Vue-Router and Loading URL-Based Components
• Summary
• The complete code—with added documentation
• Caching download links on files
• Caching parent folders once
• Caching parent folders
• Alternative caching method
• Caching the subfolders
• Instigating the method
• Update the global structure object and remove the loading state
• Loop through the result and add each item to either the folders or files array
• Load the contents of the getFolderStructure method
• Set the loading state to true and create an empty structure object
• Showing the data with the displayFolderStructure method
• Creating the getFolderStructure method
• Planning app methods
• Caching subfolders
• Pre-Caching Other Folders and Files for Faster Navigation
• Summary
• Only storing new data
• Loading the data from the store
• Loading data from the store if it exists
• Caching the folder contents
• Updating the dropbox-viewer component to work with Vuex
• Updating the breadcrumb component
• Using the path variable
• Updating the path methods to use store commits
• Using the Vuex store for the folder path
• Updating the message
• Retrieving the message
• Utilizing the store
• Including and initializing Vuex
• Caching the Current Folder Structure Using Vuex
• Summary
• Final Code
• Updating the structure with a URL change and setting Vue data outside of the instance
• Removing unneeded code
• Using the back and forward buttons in your browser
• Displaying an error message
• Showing the folder based on the URL
• Updating the URL hash and using it to navigate through the folders
• Adding the ability to download files
• Creating a breadcrumb from the current path
• Linking folders and updating the structure
• Making file and folder components
• Separating out files and folders
• Navigating through the File Tree and Loading Folders from the URL
• Summary
• Animating between states
• Adding a loading screen
• Formatting the file sizes
• More file meta information
• Displaying the Dropbox data
• The Vue life cycle hooks
• Retrieve the Dropbox data
• Create the component
• Displaying your data and using Vue to get it
• Creating a Dropbox app and initializing the SDK
• Getting started—loading the libraries
• Getting a List of Files Using the Dropbox API
• Summary
• Updating the filter query
• Using custom events to change the filter field
• Resolving JavaScript errors
• Creating the component
• Making the filters a component
• Making the filtering work again with props
• Formatted value functions
• CSS class functions
• Creating component methods and computed functions
• Creating a repeatable component
• Passing data to your component – slots
• Passing data to your component – props
• Using component data and methods
• Using your component
• Creating and initializing your component
• Creating Vue components
• Reducing the number of hard-coded variables and properties and reducing redundancy
• Creating the method
• Passing in a second variable
• Autodetection formatting
• Combining the format functions
• Reducing the number of filter variables and grouping logically
• Optimizing the code
• Optimizing your App and Using Components to Display Data
• Summary
• Filtering and custom classes
• Changing CSS classes
• Filtering our filters
• Filtering our content
• Showing and hiding Vue content
• Binding the inputs
• Building the form
• Filtering our data
• Format registered date
• Format balance
• Creating links using v-html
• v-for and displaying our data
• v-else
• v-if
• Conditional rendering
• Declarative rendering
• v-html
• HTML declarations
• Displaying Looping Searching and Filtering Data
• Summary
• Methods and reusable functions
• Computed values
• Initializing Vue and displaying the first message
• Vue library
• Application space
• Creating the workspace
• Getting Started with Vue.js
• Questions
• Piracy
• Errata
• Downloading the color images of this book
• Downloading the example code
• Customer support
• Reader feedback
• Conventions
• Who this book is for
• What you need for this book
• What this book covers
• Preface
• Customer Feedback
• Why subscribe?
• www.PacktPub.com
• Acknowledgments
• About the Reviewers
• About the Author
• Credits
• 版權信息
• 封面

• 封面
• 版權信息
• 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 更新時間：2021-07-02 20:01:03