实战Vue.js 2.x：Vuex、vue-router构建复杂SPA

Vue

1星需积分: 10 44 浏览量更新于2024-07-18 1 收藏 3.03MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"Vue.js 2.x by Example" 本书是一本以实践为导向的指南，旨在帮助初学者通过实际项目学习Vue.js 2的关键概念和技术。作者Mike Street通过一系列具体示例，教你如何构建复杂的单页应用（SPA），并利用Vuex进行状态管理，以及使用vue-router构建应用程序的路由。关键知识点包括： 1. **Vue.js基础**：了解Vue.js框架的基础，如数据绑定、指令、计算属性、事件处理等，这些是构建Vue应用的基础。 2. **数据循环与过滤**：学习如何使用Vue.js来循环遍历数据，并实现数据的搜索和过滤功能，这对于展示和操作动态数据至关重要。 3. **组件化开发**：掌握组件的创建和使用，组件是Vue.js中的核心特性，可以将复杂的应用拆分为可复用的部分。 4. **Dropbox API集成**：学习如何结合Dropbox API获取并显示文件列表，这展示了如何与远程API进行交互，获取并展示数据。 5. **文件树导航**：理解如何导航文件树并从URL加载文件夹，这对于构建具有深度导航功能的应用非常有用。 6. **Vuex状态管理**：介绍Vuex，它是Vue的一个官方插件，用于管理和缓存应用状态，学习如何使用Vuex进行数据存储和预加载，以提高性能。 7. **vue-router路由**：掌握vue-router的用法，它允许你创建应用的路由结构和URL，学习动态加载组件和基于URL的数据。 8. **电子商务应用**：通过构建产品目录和动态购物车，了解如何使用vue-router和Vuex构建电子商务商店，这涵盖了商品浏览、购物车添加以及结账流程。本书适合已经具备JavaScript基础知识的开发者，对JavaScript函数和变量有理解，且对CSS或CSS框架有一定了解的读者。书中内容循序渐进，从基本的Vue对象操作到高级的Vuex和vue-router应用，每个章节都围绕一个具体的项目展开，帮助读者在实践中提升技能。书中的章节安排如下： 1. Vue.js入门 2. 数据搜索和过滤 3. 使用组件展示数据 4. 通过Dropbox API获取文件列表 5. 文件树导航和加载 6. 使用Vuex缓存当前文件结构 7. 预加载其他文件夹以加速导航 8. 介绍vue-router和基于URL的组件加载 9. 使用vue-router动态路由加载数据 10. 构建电子商务商店-浏览商品 11. 构建电子商务商店-添加结账功能 12. 测试Vue应用程序这本书是Vue.js 2.x初学者的绝佳资源，通过实例驱动的方式，使读者能够快速掌握Vue.js的核心概念，并具备实际开发能力。

资源详情

资源推荐

Table of Contents

[ vi ]

Store the product price

321

Wiring up the ordering

323

Creating Vuex getters

325

Building the filtering component based on products

330

Dynamically creating filters

338

Resetting filters

340

Updating the URL on checkbox filter change

341

Preselecting filters on page load

342

Filtering the products

343

Summary

347

Chapter 11: Building an E-Commerce Store – Adding a Checkout

348

Creating the basket array placeholder

348

Adding product information to the store

350

Creating the store mutation to add products to the basket

350

Updating the Add to basket button when adding an item

353

Showing the product count in the header of the app

355

Calculating the basket quantity

356

Finalizing the Shop Vue-router URLs

357

Building the Order process and ListProducts component

359

Order Confirmation screen

360

Using Vue filters to format the price

362

Calculating a total price

363

Creating an Order Checkout page

365

Copying details between addresses

367

Creating an editable basket

370

Creating editable fields

371

Removing items from your cart

373

Completing the shop SPA

374

Summary

375

Chapter 12: Using Vue Dev Tools and Testing Your SPA

376

Using the Vue.js developer tools

377

Inspecting Vue components data and computed values

377

Viewing Vuex mutations and time-travel

378

Previewing event data

380

Testing your SPA

381

Command-line unit testing

381

Browser automation

382

Summary

383

Preface

This book will cover the use of Vue.js 2. Vue can be used as both a frontend framework by

including a JS file and also a backend framework with Node.js. The book was written using

the frontend version of the framework—although it will be pointed out that it could easily

be ported to using the node version if required, as the fundamentals of the framework

remain the same in the two versions.

Vue is a framework that can be used for simple data display and creating full-blown web

apps. This book will try and cover both ends of the spectrum while introducing plugins and

add-ons to help with the creation of the bigger apps.

The use of Vue components will also be covered, including the benefits of using them over

keeping all your data and methods contained within the main Vue instance. The book will

also cover using the two most popular plugins for Vue: Vuex and Vue-Router. This book

will not cover the process of styling the applications.

Vuex is a centralized state management pattern and library for Vue. It makes storing,

manipulating, and accessing data a lot more manageable and is great for use with an app

that requires a lot of data to be displayed. Vue-Router is used to handle navigation through

the app, allowing different components to load depending on the URL.

Starting with a JSON dataset, the first part of the book will cover 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.

Once complete, we will look at loading your data dynamically through an API—the

example being the Dropbox API. Once the data is loaded, the book will walk through

navigating through the folders while updating the URL and creating a download link for

the files. We will then load in Vuex, and look at storing the data of each folder moving onto

pre-caching the folders, making navigating through the app a lot quicker.

Lastly, we will look at creating an e-commerce frontend using the skills learned during

previous projects while introducing new ones. Firstly, the products will be displayed in a

list; using filters and search, you will be able to click on a product to find out more

information and to add it to your basket. When ready, the "customer" will be able to view

their basket and update items and quantities and finally check out.

Preface

[ 2 ]

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.

剩余404页未读，继续阅读

SorelCheung

粉丝: 61
资源: 120

实战Vue.js 2.x：Vuex、vue-router构建复杂SPA

Vue.Js2.2.4

vue.js-2.6.7

vuex的一个demo

Vue.js 2.x实战：前端与后台框架

Vue.js 2.x API：配置与错误处理

掌握Vue.js 2：一步步学习之旅

Vue.js 2.x组件详解：定义与注册实战

Vue.js 2实战：构建6个网页应用

Vue.js中的条件渲染与列表渲染

Vue.js中表格组件的应用和定制

Vue.js中的性能优化技巧：如何提升应用性能

使用TypeScript编写Vue.js应用：享受类型检查与快速开发

Vue.js JSON数据处理指南：提升开发效率的5个实用技巧

vue.runtime.esm.js:4605 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

vue is not defined

vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: "value"

vue2ScaleBox.umd.min.js You may need an appropriate loader to handle this file type.

solve component: MdEditor If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

vue如何使用Selenium

Duplicated key 'favoriteCount' vue/no-dupe-keys

最新资源