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

Arrow left icon
Profile Icon Passaglia
Arrow right icon
NZ$51.99 NZ$57.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (6 Ratings)
eBook Apr 2017 454 pages 1st Edition
eBook
NZ$51.99 NZ$57.99
Paperback
NZ$71.99
Subscription
Free Trial
Arrow left icon
Profile Icon Passaglia
Arrow right icon
NZ$51.99 NZ$57.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (6 Ratings)
eBook Apr 2017 454 pages 1st Edition
eBook
NZ$51.99 NZ$57.99
Paperback
NZ$71.99
Subscription
Free Trial
eBook
NZ$51.99 NZ$57.99
Paperback
NZ$71.99
Subscription
Free Trial

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
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
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

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

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 : 9781786465061
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
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
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

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

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.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
$199.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 NZ$7 each
Feature tick icon Exclusive print discounts
$279.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 NZ$7 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total NZ$ 215.97
Vue.js 2 Cookbook
NZ$71.99
Vue.js 2 Web Development Projects
NZ$71.99
Learning Vue.js 2
NZ$71.99
Total NZ$ 215.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

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.