Learning Vue.js 2电子书

Learning Vue.js 2

Learning Vue.js 2

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

Why subscribe?

Dedication

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Going Shopping with Vue.js

Buzzwords

Vue.js history

The most important thing about Vue.js

Let's go shopping!

Implementing a shopping list using jQuery

Implementing a shopping list using Vue.js

Analyzing data binding using developer tools

Bringing user input to the data with two-way binding

Rendering the list of items using the v-for directive

Check and uncheck shopping list items

Adding new shopping list items using the v-on directive

Using Vue.js in an existing project

Vue.js 2.0!

Projects using Vue.js

Grammarly

Optimizely

FilterBlend

PushSilver

Book roadmap

Let's manage time!

Toggle the title by using computed properties

Left-pad time values using computed properties

Keep state with start, pause, and stop buttons

Exercise

Summary

2. Fundamentals – Installing and Using

MVVM architectural pattern

DefineProperty, getters, and setters

Comparing with other frameworks

React

Angular

Vue

Vue.js fundamentals

Reusable components

Vue.js directives

Plugins in Vue.js

Exercise

Application state and Vuex

vue-cli

Vue plugins for IDEs

Installing, using, and debugging a Vue.js application

Installing Vue.js

Standalone

CDN

Bower

CSP-compliant

npm

vue-cli

Dev build

Debugging your Vue application

Scaffolding our applications

Scaffolding the shopping list application

Bootstraping your Pomodoro application

Exercise

Summary

3. Components – Understanding and Using

Revisiting components

Benefits of using components

Declaring templates in HTML

Handling data and el properties inside a component

Scope of the components

Components inside other components

Rewriting the shopping list with simple components

Defining templates for all the components

Defining and registering all the components

Exercise

Single-file components

Plugins for IDEs

Style and scope

Hot-reloading

Preprocessors

HTML preprocessors

CSS preprocessors

JavaScript preprocessors

Rewriting our shopping list application with single-file components

AddItemComponent

Configuring ItemComponent and ItemsComponent

Exercise

Rewriting the Pomodoro application with single-file components

Reactive binding of CSS transitions

Summary

4. Reactivity – Binding Data to Your Application

Revisiting data binding

Interpolating data

Adding title of the Pomodoro state

Exercise

Using expressions and filters

Expressions

Filters

Exercise

Revisiting and applying directives

Two-way binding using the v-model directive

Two-way binding between components

Binding attributes using the v-bind directive

Conditional rendering using v-if and v-show directives

Array iteration using the v-for directive

Creating ShoppingListComponent and modifying ItemsComponent

Modifying App.vue

Event listeners using the v-on directive

Shorthands

Exercise

Kittens

Summary

5. Vuex – Managing State in Your Application

Parent-child components' communication, events, and brain teaser

Why do we need a global state store?

What is Vuex?

How does the store work and what is so special about it?

Greetings with store

Store state and getters

Mutations

Actions

Installing and using the Vuex store in our applications

Using the Vuex store in the shopping list application

Using Vuex store in the Pomodoro application

Bringing life to start, pause, and stop buttons

Binding Pomodoro minutes and seconds

Creating the Pomodoro timer

Changing the kitten

Summary

6. Plugins – Building Your House with Your Own Bricks

The nature of Vue plugins

Using the vue-resource plugin in the shopping list application

Creating a simple server

Installing vue-resource, creating resources, and its methods

Fetching all the shopping lists the application starts

Updating server status on changes

Creating a new shopping list

Deleting existing shopping lists

Exercise

Creating and using a plugin in the Pomodoro application

Creating the NoiseGenerator plugin

Using the plugin in the Pomodoro application

Creating a button to toggle the sound

Exercise

Summary

7. Testing – Time to Test What We Have Done So Far!

Why unit tests?

Unit tests for Vue application

Writing unit tests for the shopping list application

Testing actions, getters, and mutations

Good test criteria

Code coverage

Faking server responses and writing asynchronous tests

Testing components

Writing unit tests for our Pomodoro application

What is end- to-end testing?

Nightwatch for e2e

Writing e2e tests for the Pomodoro application

Summary

8. Deploying – Time to Go Live!

Software deployment

What is GitHub?

What is Travis?

What is Heroku?

Moving the application to the GitHub repository

Setting continuous integration with Travis

Deploying the Pomodoro application

Checking logs

Preparing the application to run on Heroku

Deploying the shopping list application

Trying Heroku locally

9. What Is Next?

The journey so far

Vue 2.0

Revisiting our applications

Shopping list application

The Pomodoro application

Why is it just the beginning?

Adding features to our applications

Shopping list application

The Pomodoro application

Beautifying our applications

Logotype

Identity and design

Animations and transitions

Extending our applications to other devices

Summary

A. Solutions to Exercises

Exercise for chapter 1

Exercises for chapter 2

Enhancing MathPlugin

Creating a Chrome application of the Pomodoro timer

Exercises for chapter 3

Exercise 1

Exercise 2

Summary