Vue.js 2 Cookbook by Passaglia, Andrea -- Read -- Imperial Library of Trantor

Index

Title Page Credits About the Author About the Reviewer www.PacktPub.com Customer Feedback Dedication Preface

What this book covers What you need for this book Who this book is for Sections

Getting ready How to do it… How it works… There's more… See also

Conventions Reader feedback Customer support

Downloading the example code Errata Piracy Questions

Getting Started with Vue.js

Introduction Writing Hello World with Vue.js

Getting Ready How to do it... How it works... There's more

Writing lists

Getting Ready How to do it...

Range of numbers Arrays

Arrays with index notation

Objects

How it works...

Range of numbers Arrays Objects

Creating a dynamic and animated list

Getting Ready How to do it... How it works... There's more

Reacting to events such as clicks and keystrokes

Getting Ready How to do it... How it works...

Two-way data binding

There's more

Choosing a development environment

How to do it...

Just the browser

Adding dependencies with just the browser

TextEditor

Adding dependencies with a TextEditor

Node package manager (npm)

Adding dependencies with npm

IDE Wrap up

Formatting your text with filters

Getting Ready How to do it... How it works...

Debugging your application with mustaches (for example, a JSON filter)

How to do it... How it works...

X-raying your application with Vue developer tools

Getting Ready How to do it...

Upgrading to Vue.js 2

How to do it... How it works...

Deprecation of $broadcast, $dispatch, and the events option Deprecation of array filters Deprecation of Vue.config.delimiters Renaming of life cycle hooks

Basic Vue.js Features

Introduction Learning how to use computed properties

Getting ready How to do it... There's more...

Caching computed properties Computed setters

Filtering a list with a computed property

Getting ready How to do it... How it works... There's more...

Sorting a list with a computed property

Getting ready How to do it... How it works... There's more...

Formatting currencies with filters

Getting ready How to do it... How it works... There's more...

Formatting dates with filters

Getting ready How to do it...

Displaying and hiding an element conditionally

Getting ready How to do it... How it works...

Adding styles conditionally

How to do it... How it works...

Adding some fun to your app with CSS transitions

Getting ready How to do it... How it works... There's more...

Outputting raw HTML

Getting ready How to do it... How it works... There's more...

Creating a form with checkboxes

Getting ready How to do it... How it works... There's more...

Creating a form with radio buttons

Getting ready How to do it... How it works... There's more...

Creating a form with a select element

Getting ready How to do it... How it works... There's more...

Transitions and Animations

Introduction Integrating with third-party CSS animation libraries such as animate.css

Getting ready How to do it... How does it work...

Adding your own transition classes

Getting ready How to do it... How it works...

Animating with JavaScript instead of CSS

Getting ready How to do it... How it works... There's more...

Transitioning on the initial render

Getting ready How to do it... How it works...

Transitioning between elements

Getting ready How to do it... How it works... There's more...

Transitioning between more than two elements Setting the key attribute dynamically

Letting an element leave before the enter phase in a transition

Getting ready How to do it...

The two elements problem Transition modes

How it works...

Adding entering and leaving transitions for elements of a list

Getting ready How to do it... How it works...

Transitioning elements that move in a list

Getting ready How to do it... How it works...

Animating the state of your components

Getting ready How to do it... How it works...

Packaging reusable transitions into components

Getting ready How to do it...

Building the basic web page Building the reusable transition Using our transition with the elements in our page

How it works...

Dynamic transitions

Getting ready How to do it... How it works...

All About Components

Introduction Creating and registering a component

Getting ready How to do it... How it works...

Scope of components The render function

Passing data to your components with props

Getting ready How to do it... How it works...

Kebab case and camel case

There's more

Making components talk to each other

Getting ready How to do it... How it works...

Making components talk with Vuex

Getting ready How to do it... How it works... There’s more

Reading a child's state

Getting ready How to do it... How it works...

Using ref with v-for

Using components in your own components

Getting ready How to do it... How it works...

Using mixins in your components

Getting ready How to do it... How it works...

Mixin order

There’s more

Content distribution with slots

Getting ready How to do it... How it works... There’s more

Named slots Scoped slots

Single file components with Webpack

Getting ready How do do it... How it works... There’s more

Loading your components asynchronously

Getting ready How to do it... How it works...

Having recursive components

Getting ready How to do it... How it works...

Recursive component and local registration Avoiding a stack overflows!

Reusable component checklist

Getting ready How to do it... How it works...

Vue Communicates with the Internet

Introduction Sending basic AJAX requests with Axios

Getting ready How to do it... How it works...

Validating user data before sending it

Getting ready How to do it... How it works...

Creating a form and sending data to your server

Getting ready How to do it... How it works... There's more...

Recovering from an error during a request

Getting ready How to do it... How it works...

Creating a REST client (and server!)

Getting ready How to do it... How it works...

Implementing infinite scrolling

Getting ready How to do it... How it works...

Processing a request before sending it out

Getting ready How to do it... How it works...

Preventing XSS attacks to your app

Getting ready How to do it... How it works...

Single Page Applications

Introduction Creating an SPA with vue-router

Getting ready How to do it… How it works… There's more…

Fetching data before switching route

Getting ready How to do it… How it works…

Using named dynamic routes

Getting ready How to do it… How it works…

Having more than one router-view in your page

Getting ready How to do it… How it works…

Compose your routes hierarchically

Getting ready How to do it... How it works…

Using route aliases

Getting ready How to do it… How it works…

Adding transitions between your routes

Getting ready How to do it… How it works…

Managing errors for your routes

Getting ready How to do it… How it works…

Adding a progress bar to load pages

Getting ready How to do it… How it works…

How to redirect to another route

Getting ready How to do it… How it works… There's more…

Redirecting to 404s Named redirecting Redirecting with parameters Dynamic redirecting

Saving scrolling position when hitting back

Getting ready How to do it… How it works…

Unit Testing and End-to-End Testing

Introduction Using Jasmine for testing Vue

Getting ready How to do it... How it works... There's more...

Adding some Karma to your workflow

Getting ready How to do it... How it works... There's more...

Testing your application state and methods

Getting ready How to do it... How it works...

Testing the DOM

Getting ready How to do it... How it works...

Testing DOM asynchronous updates

Getting ready How to do it... How it works...

End-to-end testing with nightwatch

Getting ready How to do it... How it works...

Simulating a double-click in nightwatch

Getting ready How it works... How it works...

Different styles of unit testing

Getting ready How to do it... How it works...

Stubbing external API calls with Sinon.JS

Getting ready How to do it... How it works...

Measuring the coverage of your code

Getting ready How to do it... How it works...

Organize + Automate + Deploy = Webpack

Introduction Extracting logic from your components to keep the code tidy

Getting ready How to do it...

Creating a clean Webpack project Building the compound interest calculator

How it works...

Bundling your component with Webpack

Getting ready How to do it... How it works... There's more...

Organizing your dependencies with Webpack

Getting ready How to do it... How it works...

Using external components in your Webpack project

Getting ready How to do it... How it works...

Developing with continuous feedback with hot reloading

Getting ready How to do it... How it works...

Using Babel to compile from ES6

Getting ready How to do it... How it works...

Running a code linter while developing

Getting ready How to do it... How it works...

Using only one command to build both a minified and a development .js file

Getting ready How to do it… How it works...

Releasing your components to the public

Getting ready How to do it... How it works...

Advanced Vue.js – Directives, Plugins, and Render Functions

Introduction Creating a new directive

Getting ready How to do it... How it works…

Using WebSockets in Vue

Getting ready How to do it... How it works...

Writing a plugin for Vue

Getting ready How to do it... How it works...

Rendering a simple component manually

Getting ready How to do it... How it works...

Rendering a component with children

Getting ready How to do it... How it works...

Using JSX to render a component

Getting ready How to do it... How it works... There's more...

Creating a functional component

Getting ready How to do it... How it works...

Building a responsive table with higher-order components

Getting ready How to do it... How it works...

Large Application Patterns with Vuex

Introduction Dynamically loading pages in your vue-router

Getting ready How to do it... How it works... There's more...

Building a simple storage for the application state

Getting ready How to do it... How it works...

Understanding Vuex mutations

Getting ready How to do it... How it works... There's more...

Listing your actions in Vuex

Getting ready How to do it... How it works...

Separating concerns with modules

Getting ready How to do it... How it works...

Building getters to help retrieve your data

Getting ready How to do it... How it works...

Accessing other getters Passing an argument

Testing your store

Getting ready How to do it...

Software requirements Testing mutations Testing actions

How it works...

Integrating with Other Frameworks

Introduction Building universal applications with Electron

Getting ready How to do it... How it works...

Using Vue with Firebase

Getting ready How to do it... How it works...

Creating a real-time app with Feathers

Getting ready How to do it... How it works...

Creating a reactive app with Horizon

Getting ready How to do it... How it works...

← Prev
Back
Next →

← Prev
Back
Next →