Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Vue.js 2 Cookbook
Vue.js 2 Cookbook

Vue.js 2 Cookbook: Build modern, interactive web applications with Vue.js

eBook
€26.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
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
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

Vue.js 2 Cookbook

Getting Started with Vue.js

In this chapter the following recipes will be covered:

  • Writing Hello World with Vue.js
  • Writing lists
  • Creating a dynamic and animated list
  • Reacting to events such as clicks and keystrokes
  • Choosing a development environment
  • Formatting your text with filters
  • Debugging your application with mustaches (for example, a JSON filter)
  • X-raying your application with Vue developer tools
  • Upgrading to Vue.js 2

Introduction

Vue is a very powerful framework but one of its strengths is that it is very lightweight and easy to pick up. As a matter of fact, in the first recipe you will build a simple but functioning program in minutes, with no setup required.

In this chapter, you will learn lists which will help you create web pages where an element is repeated (like a catalog). Furthermore, you will build an interactive page with event listeners.

Some development environments are presented so you can choose the one that suits you better; you will use some debugging tricks that will give you a head start when developing your own code and better insight to kill bugs in your apps.

Please note that, at the time of writing, ES5 is the most well supported standard for JavaScript in browsers. In this chapter, I will use ES5 so you can follow along even if your browser does not support the newer ES6. Remember though that in following chapters ES6 will be used. By now, Chrome is compatible with most ES6 important constructs, but in general you should use Babel to make your app compatible with older browsers. Refer to the recipe How to use Babel to compile from ES6 in Chapter 8, Organize + Automate + Deploy = Webpack, when you are ready to use Babel.

Writing Hello World with Vue.js

Let's create the simplest possible program in Vue.js, the obligatory Hello World program. The objective here is to get our feet wet with how Vue manipulates your webpage and how data binding works.

Getting Ready

To complete this introductory recipe, we will only need the browser. That is, we will use JSFiddle to write our code:

If you have never used JSFiddle, don't worry; you are about to become an expert frontend developer and using JSFiddle will become a handy tool in your pocket:

  1. Head your browser to https://jsfiddle.net:

You will be presented with a blank page divided into quadrants. The bottom-left is where we will write our JavaScript code. Going clockwise, we have an HTML section, a CSS section, and finally our preview of the resulting page.

Before beginning, we should tell JSFiddle that we want to use the Vue library.

  1. In the top-right part of the JavaScript quadrant, press the cogwheel and select Vue 2.2.1 from the list (you should find more than one version, "edge" refers to the latest version and at the time of writing corresponds to Vue 2).

We are now ready to write our first Vue program.

How to do it...

  1. In the JavaScript section, write:
        new Vue({el:'#app'})
  1. In the HTML quadrant, we create the <div>:
        <div id="app">
{{'Hello ' + 'world'}}
</div>
  1. Click the Run button in the upper-left corner; we see the page greeting us with Hello world:

How it works...

new Vue({el:'#app'}) will instantiate a new Vue instance. It accepts an options object as a parameter. This object is central in Vue, and defines and controls data and behavior. It contains all the information needed to create Vue instances and components. In our case, we only specified the el option which accepts a selector or an element as an argument. The #app parameter is a selector that will return the element in the page with app as the identifier. For example, in a page like this:

<!DOCTYPE html> 
<html>
<body>
<div id="app"></div>
</body>
</html>

Everything that we will write inside the <div> with the ID as app will be under the scope of Vue.

Now, JSFiddle takes everything we write in the HTML quadrant and wraps it in body tags. This means that if we just need to write the <div> in the HTML quadrant, JSFiddle will take care of wrapping it in the body tags.

It's also important to note that placing the #app on the body or html tag will throw an error, as Vue advises us to mount our apps on normal elements, and its the same thing goes for selecting the body in the el option.

The mustaches (or handlebars) are a way to tell Vue to take everything inside them and parse it as code. The quotes are a normal way to declare a literal string in JavaScript, so Vue just returns the string concatenation of hello and world. Nothing fancy, we just concatenated two strings and displayed the result.

There's more

We can leverage that to do something more interesting. If we were aliens and we wanted to greet more than one world at a time, we could write:

We conquered 5 planets.<br/> 
{{'Hello ' + 5 + ' worlds'}}

We may lose track of how many worlds we conquer. No problem, we can do math inside the mustaches. Also, let's put Hello and worlds outside brackets:

We conquered {{5 + 2}} planets.<br/> 
Hello {{5 + 2}} worlds

Having the number of worlds as raw numbers inside the mustaches is just messy. We are going to use data binding to put it inside a named variable inside our instance:

<div id="app"> 
We conquered {{countWorlds}} planets.<br/>
Hello {{countWorlds}} worlds
</div>

new Vue({
el:'#app',
data: {
countWorlds: 5 + 2
}
})

This is how tidy applications are done. Now, every time we conquer a planet, we have to edit only the countWorlds variable. In turn, every time we modify this variable, the HTML will be automatically updated.

Congratulations, you completed your first step into the Vue world and are now able to build simple interactive applications with reactive data-binding and string interpolation.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • • Understand and use Vue’s reactivity system, data binding, and computed properties
  • • Create fluid transitions in your application with Vue’s built-in transition system
  • • Use Vuex and Webpack to build medium-to-large scale SPAs and enhance your development workflow

Description

Vue.js is an open source JavaScript library for building modern, interactive web applications. With a rapidly growing community and a strong ecosystem, Vue.js makes developing complex single page applications a breeze. Its component-based approach, intuitive API, blazing fast core, and compact size make Vue.js a great solution to craft your next front-end application. From basic to advanced recipes, this book arms you with practical solutions to common tasks when building an application using Vue. We start off by exploring the fundamentals of Vue.js: its reactivity system, data-binding syntax, and component-based architecture through practical examples. After that, we delve into integrating Webpack and Babel to enhance your development workflow using single file components. Finally, we take an in-depth look at Vuex for state management and Vue Router to route in your single page applications, and integrate a variety of technologies ranging from Node.js to Electron, and Socket.io to Firebase and HorizonDB. This book will provide you with the best practices as determined by the Vue.js community.

Who is this book for?

This book is for developers who want to learn about Vue.js through practical examples to quickly and efficiently build modern, interactive web applications. Prior experience and familiarity with JavaScript, HTML, and CSS are recommended as the recipes build upon that knowledge. It will also enable both new and existing Vue.js users to expand their knowledge of the framework.

What you will learn

  • • Understand the fundamentals of Vue.js through numerous practical examples
  • • Piece together complex web interfaces using the Vue.js component system
  • • Use Webpack and Babel to enhance your development workflow
  • • Manage your application's state using Vuex and see how to structure your projects according to best practices
  • • Seamlessly implement routing in your single page applications using Vue Router
  • • Find out how to use Vue.js with a variety of technologies such as Node.js, Electron, Firebase, and Horizon by building complete applications
Estimated delivery fee Deliver to Netherlands

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Apr 28, 2017
Length: 454 pages
Edition : 1st
Language : English
ISBN-13 : 9781786468093
Languages :

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
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
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Netherlands

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Publication date : Apr 28, 2017
Length: 454 pages
Edition : 1st
Language : English
ISBN-13 : 9781786468093
Languages :

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 110.97
Vue.js 2 Cookbook
€36.99
Vue.js 2 Web Development Projects
€36.99
Learning Vue.js 2
€36.99
Total 110.97 Stars icon

Table of Contents

11 Chapters
Getting Started with Vue.js Chevron down icon Chevron up icon
Basic Vue.js Features Chevron down icon Chevron up icon
Transitions and Animations Chevron down icon Chevron up icon
All About Components Chevron down icon Chevron up icon
Vue Communicates with the Internet Chevron down icon Chevron up icon
Single Page Applications Chevron down icon Chevron up icon
Unit Testing and End-to-End Testing Chevron down icon Chevron up icon
Organize + Automate + Deploy = Webpack Chevron down icon Chevron up icon
Advanced Vue.js – Directives, Plugins, and Render Functions Chevron down icon Chevron up icon
Large Application Patterns with Vuex Chevron down icon Chevron up icon
Integrating with Other Frameworks Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(6 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by




Brandon Galli Feb 04, 2021
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Received PDF version, took a couple days to read and I can say that it was well worth the read and approach of explanation of the MVC nature of Vue and how to get started knowledge was solid. Being a React.js develop myself I endorse this book and recommend it to anyone interested in getting into Vue as it is an exciting and newer JS framework. It was a great read and thank you for the copy.
Amazon Verified review Amazon
Ralf P. Feb 24, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Da ich schon erste Erfahrungen mit Vue hatte, habe ich das Buch eigentlich als schnelles Nachschlagewerk für Problemfälle gekauft.Das Buch erfüllt erwartungsgemäß dann auch die Anforderungen an ein "Kochbuch": Passendes Rezept suchen, und bisher habe ich weitgehend alles gefunden, was ich gesucht habe, und anwenden. Mit der festen Struktur und den Unterabschnitten zu jedem Rezept fällt die Orientierung leicht, vom "nur abtipppen wollen" bis zur detaillierten Erklärung und dem immer interessanten "Thers's more..."-Abschnitt.Übertroffen hat das Buch meine Erwartungen, da die Kapitelstruktur sogar zum Einarbeiten in Themenbereiche, und nicht nur Einzelrezepte, ermöglicht. Deshalb klare Kaufempfehlung für alle, die auch abseits vom Computer mal etwas lesen möchten.
Amazon Verified review Amazon
Megastar Jan 21, 2021
Full star icon Full star icon Full star icon Full star icon Full star icon 5
It is very well written and very easy to follow!
Amazon Verified review Amazon
Ramanan Kalirajan Jul 31, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Good book for starting to learn vue js. It has lot of examples and the concepts are explained in simple manner. Good book for starters
Amazon Verified review Amazon
Amazon Customer Aug 07, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Very helpful
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 digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

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