Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Vue.js Quick Start Guide
Vue.js Quick Start Guide

Vue.js Quick Start Guide: Learn how to build amazing and complex reactive web applications easily using Vue.js

eBook
€13.98 €19.99
Paperback
€24.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Vue.js Quick Start Guide

Basic Concepts of Vue 2

In this chapter, we will discuss data-driven views in Vue. We will also examine how DOM is manipulated with the help of directives. Next, we'll learn what components are and how to create them, and we'll cover concepts related to templates, methods, data, computed properties, and watchers.

All components have a life cycle, and we have special methods to access a component at certain points of its life. These methods are called lifecycle hooks, and we'll examine them in this chapter too.

In this chapter, we will learn about the following:

  • Data-driven views in Vue
  • Computed properties and methods and how to use them
  • Understanding components, templates, and props
  • Ways of building component templates in Vue
  • Quickly prototyping websites with the help of Vue components and v-* directives
  • Utilizing watchers in Vue
  • The importance of lifecycle hooks...

Data-driven views in Vue

Data-driven views in Vue are achieved with the help of reactivity.

What is reactivity?

To grasp the concept better, let's look at an example code in which there is no reactivity. We will use an example that is very similar to the one we had in the previous chapter, when we were comparing Vue and vanilla JS. In the original example, using JavaScript, we created an unordered list and three list items inside of it. The values of the three list items were added from an array we declared, and the unordered list was populated with these list items using a for loop.

This time, we will do something slightly different. To see the example as a pen, visit https://codepen.io/AjdinImsirovic/pen/JZOZdR...

Computed properties and methods

The usefulness of reactivity in Vue can be described in terms of the difference between computed properties and methods.

As we mentioned earlier, a Vue instance can have either computed properties, methods, or both computed properties and methods. So, what is the difference between the two?

Methods are simply run every time they are called. On the other hand, computed properties are cached, meaning they are only run when the underlying data model changes. This is often described in terms of computed property dependencies. Also, methods can have parameters, whereas computed properties cannot.

What exactly are these dependencies?

Consider this simple Vue app, available as a pen at this link...

Understanding components, templates, and props

To begin, let's look at how to make a component in Vue. First, we specify the component, like this:

Vue.component('custom-article', {
template: `
<article>
Our own custom article component!<span></span>
</article>`
})
new Vue({
el: '#app'
})

A component is a block of code that we give a custom name. This custom name can be anything we come up with, and it's a single label for that entire block of code in the form of a custom HTML tag. In the previous example, we grouped the article and span tags and gave that custom tag the name of custom-article

Components are named using kebab-case.

The code for this component is available as a Codepen at https://codepen.io/AjdinImsirovic/pen/xzpOaJ.

Now, to create an instance of our component...

Watchers in Vue

Every component in Vue has a watcher. 

To understand how this works, let's begin with an earlier example from this chapter. The example is from the Computed properties section, at this link: https://codepen.io/AjdinImsirovic/pen/qKVyry. That is our starting code. As we know from the previous section, we have two input fields here and we are printing out the values entered into these input fields in some span tags under the form.

Let's extend our example. The initial code is the same; we will only be adding a watcher to it. The updated code can be found at this Codepen URL: https://codepen.io/AjdinImsirovic/pen/jprwKe.

As can be observed, the only update we made to the original pen is the addition of the watchers option, as follows:

  watch: {
ownerName(previousValue,currentValue) {
console.log(`The value in the first input has changed...

Lifecycle hooks

Life cycle hooks are methods that let us alter the behavior of components at various stages of their life cycle. 

What is a component's lifecycle?

It's just the natural progression of the life of a component.

Thus, we can say that lifecycle hooks are points along this journey that each component needs to go through. At these specific points in a component's life, we can use these methods to alter a component's behavior.

The Vue team has chosen very descriptive names for these lifecycle methods. What follows is the list of lifecycle hooks organized in the order of the natural progression of a component's life:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated...

Summary

In this chapter, we looked at some basic concepts in Vue. We described why these concepts are important and how they can be used. We also looked at several simple examples of using these concepts in practice.

We learned about data-driven views in Vue and reactivity as a way to keep track of the changes to the data model. We looked at using computed properties and methods, directives, and their modifiers. We have seen some practical examples of components, templates, and props, as well as different approaches to building component templates in Vue.

We learned how to prototype websites using Vue components and directives, and we wrapped up the chapter with a look at watchers and lifecycle hooks as a powerful way to alter the behavior of components at any point of their lifecycle.

In the next chapter, we will further delve into reactive programming in Vue with a focus on...

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Uses latest features such as Vue-cli 3, Vuex, and Nuxt
  • Practical examples to understand Vue 2 quickly
  • Step-by-step approach to reinforce concepts covered

Description

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and ?exibility are some of the key benefits that Vue offers to developers. This book will help you learn everything you need to know to build stunning reactive web apps with Vue.js 2 quickly and easily. This book will take you through the Vue 2 framework. You will start by learning the different Vue installation options: CDN, NPM, and Vue CLI. Then we will look at the core concepts of Vue: templates and components – ways to modularize Vue code. You will learn how to utilize directives, which are Vue-specific HTML attributes with additional features. Also, you will see how Vue uses a streamlined approach to development, with reusable methods, computed properties, and watchers, and how it controls state with the help of its data option. You will learn about the concepts of reactive programming in Vue, and how to understand communication between parent and child components. We will take a look at props and slots, working with CSS, filters, and mixins. We will also look at ways to add transitions and animations to Vue apps. Then you will extend Vue by building custom directives and your own plugins. Finally, you will learn about Vuex – a Vue plugin that allows us to centralize state, and also introduce Nuxt, which is a framework that builds on top of Vue and solves some issues of single-page applications. After learning about these components, you will be ready to build your own reactive web apps with Vue.js 2.

Who is this book for?

This book is for people who want to learn and experience developing with Vue.js. Familiarity with HTML, CSS, and JavaScript will help you get the most from this book.

What you will learn

  • Develop apps with Vue.js
  • Reuse components using slots
  • Use filters, mixins, and global mixins in Vue
  • Build custom directives in Vue
  • Work with CSS animations
  • Work with templates, directives, methods, data, computed properties, and watchers
  • Use Nuxt and Vue-Router
  • Build and deploy an SSR Vue app
Estimated delivery fee Deliver to Bulgaria

Premium delivery 7 - 10 business days

€25.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Oct 25, 2018
Length: 186 pages
Edition : 1st
Language : English
ISBN-13 : 9781789344103
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Estimated delivery fee Deliver to Bulgaria

Premium delivery 7 - 10 business days

€25.95
(Includes tracking information)

Product Details

Publication date : Oct 25, 2018
Length: 186 pages
Edition : 1st
Language : English
ISBN-13 : 9781789344103
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 98.97
Vue.js 2 Web Development Projects
€36.99
Vue.js Quick Start Guide
€24.99
Vue.js 2 Design Patterns and Best Practices
€36.99
Total 98.97 Stars icon

Table of Contents

9 Chapters
Introducing Vue Chevron down icon Chevron up icon
Basic Concepts of Vue 2 Chevron down icon Chevron up icon
Working with Vue-CLI, Components, Props, and Slots Chevron down icon Chevron up icon
Filters and Mixins Chevron down icon Chevron up icon
Making Your Own Directives and Plugins Chevron down icon Chevron up icon
Transitions and Animations Chevron down icon Chevron up icon
Using Vuex Chevron down icon Chevron up icon
Using Nuxt.js and Vue-Router Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.5
(2 Ratings)
5 star 50%
4 star 0%
3 star 0%
2 star 50%
1 star 0%
Mikhail Jan 23, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I’m python modeler with little (if any) background in the frontend development.And this was really easy to understand and to follow introduction to the topic.So: I like it, I recommend it as a starting point.
Amazon Verified review Amazon
Juan Frias Jan 21, 2019
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
This book is what it states, a quick guide. You'll get just a taste with not enough details. The author makes heavy use of pen.io for code examples to the point that there's a link on every single paragraph. The code examples that are in the book many times do not reflect what is on the website, and sometimes don't even match the next page. So if you're trying to follow along writing the code from the book good luck. Definite pass, you're probably better with a YouTube video or Vue documentation.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela