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

You're reading from   Vue.js Quick Start Guide Learn how to build amazing and complex reactive web applications easily using Vue.js

Arrow left icon
Product type Paperback
Published in Oct 2018
Publisher Packt
ISBN-13 9781789344103
Length 186 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Ajdin Imsirovic Ajdin Imsirovic
Author Profile Icon Ajdin Imsirovic
Ajdin Imsirovic
Arrow right icon
View More author details
Toc

Table of Contents (10) Chapters Close

Preface 1. Introducing Vue 2. Basic Concepts of Vue 2 FREE CHAPTER 3. Working with Vue-CLI, Components, Props, and Slots 4. Filters and Mixins 5. Making Your Own Directives and Plugins 6. Transitions and Animations 7. Using Vuex 8. Using Nuxt.js and Vue-Router 9. Other Books You May Enjoy

What problems does Vue solve?

Without trying to make an extensive list, let's quickly highlight some of Vue's greatest strengths:

  • Vue—a jQuery successor?
  • Vue is a great learning tool for beginners
  • Vue is a versatile and progressive framework
  • Vue is an awesome tool for animations and interactions
  • Vue's approach is similar to other modern frontend frameworks and libraries

Next, let's briefly go over each of these points.

Vue, a jQuery successor

The famous jQuery library appeared in 2006. When it came out, it did a few things beautifully:

  • It made writing cross-browser JavaScript a lot easier, which was a big plus at the time since it dramatically decreased the need for developers to mess with various browsers' quirks and inconsistencies
  • It had a simple syntax that made it easier to target and manipulate specific DOM nodes, which is beautifully phrased in their motto write less, do more
  • It was an excellent entry point to learning JavaScript in general
  • It had a great API that made working with Ajax simple and easy

However, a lot has changed since then—for the better.

Arguably, the biggest improvement that happened in JavaScript-land between 2006 and today is the virtual DOM. 

The virtual DOM was a paradigm shift: we no longer had to write procedural, spaghetti JS to instruct the browser on how to traverse and manipulate the DOM. Instead of telling the browser how to update the DOM, we can now simply tell it what to update. Or, to be more specific, we tell a framework what to update—a framework like View or React. The actual implementation of the virtual DOM is framework-specific and not really something to be concerned with at this point.

We can now work with the DOM indirectly, by using declarative code that deals with the virtual DOM implementation of the underlying framework. This abstraction is the one thing that more or less made jQuery redundant.

Of course, since so many apps are still powered by jQuery and since legacy code has a tendency to stick around, jQuery will be alive and well in the years to come. 

However, the paradigm shift in the way we think about DOM manipulation makes Vue a strong contender to jQuery's throne as the most popular game in town.

Vue also has other advantages: it is an excellent starting point to learn present-day frontend development. The barrier to entry is really low.

A learning tool for beginners

If a jQuery developer was faced with the option of learning either of the modern frontend frameworks/libraries, React, Angular, Vue, Ember... which one would probably be the easiest to get started with?

Vue, of course!

As we've seen already, getting started with Vue can be as simple as importing a CDN. And since we humans are wired to thrive on small, frequent victories, Vue seems to be the happy route to take. This is not to say that a developer should not try to learn other frontend frameworks too. It just seems that Vue is the easiest way to get started and the best way to get productive quickly.

A versatile and progressive framework

The official website for Vue JS says that Vue is the Progressive JavaScript Framework. This means you can add Vue to an existing server-side project incrementally. Basically, you can add Vue to just one simple section of your website. No wonder Laravel chose to bundle with Vue on its frontend.

But you don't have to settle for only sprinkling Vue in here and there. You can also extend it using Vuex and Vue-Router. This makes Vue very versatile and usable in a number of different scenarios.

A tool for animations and transitions

If you need to make high-performance animations and transitions, look no further than Vue! Vue's animations API is very easy to understand and it's a joy to use. It is so easy to do animations in Vue that you will be amazed at how much you can accomplish in a very short time.

Features similar to other modern frontend frameworks and libraries

Just like other modern frontend frameworks, such as React and Angular, Vue has the following:

  • Virtual DOM
  • A command-line interface (Vue-cli)
  • State management (Vuex)
  • Routing (Vue-Router)

However, it seems that Vue's core team is going out of their way to make Vue as approachable as possible. This is evident in several examples:

  • The effort they've put in to avoid the hassle of setting up Vue-cli, which makes it very easy to get started with 
  • The lack of complicated toolchains
  • The simplicity of Vue's API

Like the official project's website states, Vue is approachable, versatile, and performant.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime