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

Installing and using the Vuex store in our applications

Now that we know what Vuex is, how to create a store, dispatch mutations, and how to use getters and actions, we can install the store in our applications and use it to finalize their data flow and communication chain.

You can find the applications to work on in the following folders:

Pomodoro: chapter5/pomodoro
Shopping list: chapter5/shopping-list2

Do not forget to run npm install on both applications.

Start by installing vuex and define the necessary directory and file structure in both applications.

To install vuex, just run the following:

npm install vuex --save

After installing vuex, create a subfolder vuex in each of the application's src folders. In this folder, create four files: store.js, mutation_types.js, actions.js, and getters.js.

Prepare the store.js structure:

//store.js 
import Vue from 'vue' 
import Vuex from 'vuex' 
import getters from './getters' 
import actions from './actions' 
import mutations...

Search

Your notes and bookmarks