
Vue.js 2.x by Example
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
More details
Other editions
Additional editions

Person
Mike Street (aka mikestreety) is a frontend developer from Brighton, UK. Specializing in Gulp, SCSS, HTML, and Vue, he has been developing websites professionally since 2010. After making his first Vue app as an experimental side project, he's been hooked ever since. When not developing on the web, Mike likes to explore the Sussex countryside on his bike, start a new side-project without finishing the last, or heading to the cinema.
Content
- Cover
- Copyright
- Credits
- About the Author
- Acknowledgments
- About the Reviewers
- www.PacktPub.com
- Customer Feedback
- Table of Contents
- Preface
- Chapter 1: 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
- Chapter 2: 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
- Chapter 3: 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
- Chapter 4: 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
- Chapter 5: 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
- Chapter 6: 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
- Chapter 7: 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
- Chapter 8: 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
- Chapter 9: 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
- Chapter 10: 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
- Chapter 11: 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
- Chapter 12: 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
- Index
System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.