Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Learning Vue.js 2

By : Olga Filipova

4.4 (10)

Learning Vue.js 2

4.4 (10)

By: Olga Filipova

Overview of this book

Vue.js is one of the latest new frameworks to have piqued the interest of web developers due to its reactivity, reusable components, and ease of use. This book shows developers how to leverage its features to build high-performing, reactive web interfaces with Vue.js. From the initial structuring to full deployment, this book provides step-by-step guidance to developing an interactive web interface from scratch with Vue.js. You will start by building a simple application in Vue.js which will let you observe its features in action. Delving into more complex concepts, you will learn about reactive data binding, reusable components, plugins, filters, and state management with Vuex. This book will also teach you how to bring reactivity to an existing static application using Vue.js. By the time you finish this book you will have built, tested, and deployed a complete reactive application in Vue.js from scratch.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Going Shopping with Vue.js

1. Going Shopping with Vue.js

Buzzwords

Vue.js history

The most important thing about Vue.js

Let's go shopping!

Using Vue.js in an existing project

Vue.js 2.0!

Projects using Vue.js

Book roadmap

Let's manage time!

Exercise

Summary

2. Fundamentals – Installing and Using

2. Fundamentals – Installing and Using

MVVM architectural pattern

DefineProperty, getters, and setters

Comparing with other frameworks

Vue.js fundamentals

Installing, using, and debugging a Vue.js application

Debugging your Vue application

Scaffolding our applications

Exercise

Summary

3. Components – Understanding and Using

3. Components – Understanding and Using

Revisiting components

Benefits of using components

Rewriting the shopping list with simple components

Exercise

Single-file components

Rewriting our shopping list application with single-file components

Exercise

Rewriting the Pomodoro application with single-file components

Reactive binding of CSS transitions

Summary

4. Reactivity – Binding Data to Your Application

4. Reactivity – Binding Data to Your Application

Revisiting data binding

Interpolating data

Using expressions and filters

Revisiting and applying directives

Kittens

Summary

5. Vuex – Managing State in Your Application

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

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

Summary

6. Plugins – Building Your House with Your Own Bricks

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 and using a plugin in the Pomodoro application

Summary

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

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

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!

8. Deploying – Time to Go Live!

Software deployment

Moving the application to the GitHub repository

Setting continuous integration with Travis

Deploying the Pomodoro application

Deploying the shopping list application

9. What Is Next?

9. What Is Next?

The journey so far

Vue 2.0

Revisiting our applications

Why is it just the beginning?

Summary

A. Solutions to Exercises

Exercise for chapter 1

Exercises for chapter 2

Exercises for chapter 3

Summary

Customer Reviews

4.4 (10)

5 star

60%

4 star

30%

3 star

0

2 star

10%

1 star

0

Writing unit tests for our Pomodoro application

Ok! Let's move to our Pomodoro application! By the way, when was the last time you took a break? Probably, it is time to open the application in your browser, wait a few minutes of the Pomodoro working period timer, and check for some kittens.

I just did it and it made me feel really nice and cute:

I'm not your clothes... please have some rest

Let's start with mutations. Open the code in the chapter7/pomodoro folder. Open the mutations.js file and check what is happening out there. There are four mutations happening: START, STOP, PAUSE, and TOGGLE_SOUND. Guess which one we will start with. Yes, you are right, we will start with the start method. Create a vuex subfolder inside the test/unit/specs folder and add the mutations.spec.js file. Let's bootstrap it to be ready for tests:

// mutations.spec.js 
import Vue from 'vue' 
import mutations from 'src/vuex/mutations' 
import * as types from 'src/vuex/mutation_types' 
 
...

Search

Your notes and bookmarks