Vue.js 2 Cookbook电子书

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...