Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Vue.js 2.x by Example
  • Table Of Contents Toc
  • Feedback & Rating feedback
Vue.js 2.x by Example

Vue.js 2.x by Example

By : Street
5 (2)
close
close
Vue.js 2.x by Example

Vue.js 2.x by Example

5 (2)
By: Street

Overview of this book

Vue.js is a frontend web framework which makes it easy to do just about anything, from displaying data up to creating full-blown web apps, and has become a leading tool for web developers. This book puts Vue.js into a real-world context, guiding you through example projects that helps you build Vue.js applications from scratch. With this book, you will learn how to use Vue.js by creating three Single Page web applications. Throughout this book, we will cover the usage of Vue, for building web interfaces, Vuex, an official Vue plugin which makes caching and storing data easier, and Vue-router, a plugin for creating routes and URLs for your application. Starting with a JSON dataset, the first part of the book covers Vue objects and how to utilize each one. This will be covered by exploring different ways of displaying data from a JSON dataset. We will then move on to manipulating the data with filters and search and creating dynamic values. Next, you will see how easy it is to integrate remote data into an application by learning how to use the Dropbox API to display your Dropbox contents in an application In the final section, you will see how to build a product catalog and dynamic shopping cart using the Vue-router, giving you the building blocks of an e-commerce store.
Table of Contents (13 chapters)
close
close

What this book covers

Chapter 1, Getting Started with Vue.js, shows how to get started with Vue by including the JavaScript file. We then move onto initializing your first Vue instance and looking at the data object along with examining computed functions and properties and finally learning about Vue methods.

Chapter 2, Displaying, Looping, Searching, and Filtering Data, describes how to display lists and more complex data with Vue using v-if , v-else and v-for. It then looks at how to filter the lists using form elements, followed by applying conditional CSS classes based on the data.

Chapter 3, Optimizing Our App and Using Components to Display Data, is about optimizing our Vue.js code by reducing the repetition and logically organizing our code. Once complete, it looks at how to create Vue components and use them with Vue, how to use props and slots with components, and utilizing events to transfer data between components.

Chapter 4, Getting a List of Files Using the Dropbox API, presents loading and querying the Dropbox API and listing the directories and files from your Dropbox account. It then looks at adding a load state to your app along with using Vue animations.

Chapter 5, Navigating through the File Tree and Loading Folders from the URL, explains how to create a component for both files and folders, and add links to the folder component to update the directory listing. it also covers how to add a download button to the file component and create a breadcrumb component so the user can easily navigate back up the tree and dynamically update the browser URL, so if a folder is bookmarked or a link is shared, the correct folder loads.

Chapter 6, Caching the Current Folder Structure Using Vuex, shows how to get started with Vuex along with storing and retrieving data from the Vuex Store. It then looks at how to integrate Vuex with our Dropbox app, how to cache the current Dropbox folder's contents, and loading data from the store if required.

Chapter 7, Pre-Caching Other Folders and Files for Faster Navigation, describes the process fof pre-caching folders, storing the parent folder's contents, and how to cache the download links for the files.

Chapter 8, Introducing Vue-Router and Loading URL-Based Components, explores Vue-Router initialization and its options and how to create links with Vue-Router. It then looks at how to make dynamic routes to update the View based on the URL. From there, it describes how to use props with URLs, nest and name routes,and navigate programmatically.

Chapter 9, Using Vue-Router Dynamic Routes to Load Data, is about outlining our components and routes, loading a product CSV file and creating an individual product page with images and product variations.

Chapter 10, Building an E-Commerce Store, Browsing Products, describes how to create a homepage listing page with specific products, create a category page with a reusable component, create an ordering mechanism, create filters dynamically, and allow the user to filter the products.

Chapter 11, Building an E-Commerce Store, Adding a Checkout, is about building the functionality to allow the user to add and remove products to their basket, allow a user to check out and add an order confirmation page.

Chapter 12, Using Vue Dev Tools and Testing Your SPA, covers the usage of the Vue developer tools with the applications we've developed and has an overview of testing tools and applications.

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech

Create a Note

Modal Close icon
You need to login to use this feature.
notes
bookmark search playlist download font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Delete Note

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY