What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Displaying, Looping, Searching, and Filtering Data

In Chapter 1, Getting Started with Vue.js, we covered the data, computed, and method objects within Vue and how to display static data values. In this chapter, were are going to cover:

Displaying lists and more complex data with Vue using v-if, v-else, and v-for
Filtering the lists using form elements
Applying conditional CSS classes based on the data

The data we are going to be using is going to be randomly generated by the JSON generator service (http://www.json-generator.com/). This website allows us to get dummy data to practice with. The following template was used to generate the data we will be using. Copy the following into the left-hand side to generate data of the same format so the attributes match with the code examples, as follows:

      [
        '{{repeat(5)}}',
        {
          index: '{{index...

Key benefits

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 Vue.js 2 through practical and interesting examples

Explore modern development tools and learn how to utilize them by building applications with Vue.js

Description

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.

What you will learn

Looping through data with Vue.js

Searching and filtering data

Using components to display data

Getting a list of files using the dropbox API

Navigating through a file tree and loading folders from a URL

Caching with Vuex

Pre-caching for faster navigation

Introducing vue-router and loading components

Using vue-router dynamic routes to load data

Using vue-router and Vuex to create an ecommerce store

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

£41.99

£36.99

£36.99

Total £ 115.97

Bogdan Balc Jan 19, 2018

I was a technical reviewer for this book and I would like to mention a couple of things that to me seem very important for any potential reader.This book will give you the very basics of Vue.js, the things you must know in order to develop the most impressive web apps. In my opinion the author managed to do something that is very rarely seen in a book like this, to capture the inner workings of the framework with the example projects which are explained quite well. This way you don't get only some basic understanding of major functionalities in Vue.js but also an in depth view of what makes Vue.js tick!

Amazon Verified review

Amazon Customer Jan 13, 2018

Mike Street wrote an awesome book. Each chapter you read will teach something useful and in the right way. Vue.js is a great javascript framework to work with and has a lot of feature. Most of those features can be found in this book while developing an app.It covers from the basic to some advanced concepts.

Vue.js 2.x by Example: Example-driven guide to build web apps with Vue.js for beginners

What do you get with Print?

Vue.js 2.x by Example

Displaying, Looping, Searching, and Filtering Data

HTML declarations

v-html

Conditional rendering

v-if

v-for and displaying our data

Filtering our data

Building the form

Showing and hiding Vue content

Changing CSS classes

Filtering and custom classes

Summary

Page 1 of 9

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs

Vue.js 2.x by Example: Example-driven guide to build web apps with Vue.js for beginners

What do you get with Print?

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs