3. Components – Understanding and Using | Learning Vue.js 2

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

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

Revisiting components

As you surely remember from the previous chapters, components are special parts of the Vue application that have their own scope of data and methods. Components can be used and reused throughout the application. In the previous chapter, you learned that a component is created by using the Vue.extend({...}) method and registered using the Vue.component() syntax. So, in order to create and use a component, we would write the following JavaScript code:

//creating component 
var HelloComponent = Vue.extend({ 
  template: '<h1>Hello</h1>' 
}); 
//registering component 
Vue.component('hello-component', HelloComponent); 
 
//initializing the Vue application 
new Vue({ 
  el: '#app' 
});

Then, we will use hello-component inside the HTML:

<div id='app'> 
  <hello-component></hello-component> 
</div>

Tip

Both initialization and registration can be written as a single Vue...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning Vue.js 2

Search

Your notes and bookmarks