Vue.js 2.x by example example-driven guide to build web apps with Vue.js for beginners
Learn the fundamentals of vue.js by creating complex SPAs with Vuex, vue-router and more About This Book We bridge the gap between "learning" and "doing" by providing real-world examples that will improve your web development skills with Vue.js Explore the exciting features of Vu...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt
2017.
|
| Edición: | 1st edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009630717606719 |
Tabla de Contenidos:
- 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.
