Sign In Start Free Trial

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

Interpolating data

Let's imagine the following piece of HTML code:

<div id="hello"></div>

Also, imagine the following JavaScript object:

var data = { 
  msg: 'Hello' 
};

How can we render the values of data entries on the page? How can we access them so that we can use them inside our HTML? Actually, we have been doing this a lot with Vue.js during the last two chapters. There is no problem in understanding and doing it again and again.

"Repetitio est mater studiorum"

If you are already a professional of data interpolation, just skip this section and proceed to the expressions and filters.

So, what should we do to populate the <div> with the value of msg? If we go the old-fashioned jQuery way, we would probably do something like the following:

$("#hello").text(data.msg);

But then, during runtime, if you change the value of msg and if you want this change to be propagated to the DOM, you must do it manually. By simply changing the data.msg value,...

Search

Your notes and bookmarks