Nothing Special   »   [go: up one dir, main page]
Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

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

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

    By Ajdin Imsirovic

    ()

    Read preview

    About this ebook

    Learn and explore all important features of Vue.js through a number of simple examples.




    Key Features



    • 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



    Book 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.




    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



    Who this book is 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.

    LanguageEnglish
    PublisherPackt Publishing
    Release dateOct 25, 2018
    ISBN9781789344172
    Vue.js Quick Start Guide: Learn how to build amazing and complex reactive web applications easily using Vue.js

    Read more from Ajdin Imsirovic

    Related to Vue.js Quick Start Guide

    Related ebooks

    Programming For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Password Managers

      Feb 6, 2024

      Password Managers
      14 min read

    • Article

      Learning to Love What I Don’t Know

      Nov 1, 2017

      LIKE MANY WHO HAVE made the leap into Startupland, I guessed from the outset that I had a lot to learn. I was right. Indeed, I jumped into the wormhole of blind spots and unknown unknowns. This has been especially true on matters technological. At Io

      2 min read

    • Article

      Committed to Creating a Robust Imaging Industry

      Nov 4, 2021

      You took over the reins of Canon India at a very difficult time for the imaging industry. What did you find different in the Indian imaging industry, compared to other parts of the world? Yes. It was a very unique time when I joined the organisation

      8 min read

    • Article

      Vivaldi

      Sep 7, 2023

      With a full-blown email client, calendar with offline access, RSS reader, task manager, notes app and lots more available through extensions, it’s tempting to ask whether Vivaldi is more of an operating system than a web browser. The company isn’t bl

      4 min read

    • Article

      Vivaldi

      Nov 7, 2023

      Vivaldi
      4 min read

    • Article

      Virtual Toolkit

      Apr 1, 2018

      Virtual Toolkit
      8 min read

    • Article

      Craft A Perfect Personal Document Library

      Jan 26, 2023

      There are countless apps available that can be used to organise your notes and also many word processors designed to help you create smart-looking documents, but Craft aims to do both in style. The idea is to include a huge number of advanced documen

      1 min read

    • Article

      Scroll Media

      Sep 16, 2018

      You have been in the digital advertising industry since 2001, what changes have you seen and what’s your view on it today? It seems we have come a long way from faxing order forms across town and fixed weekly rates, so any automation is a good thing.

      3 min read

    • Article

      Contact

      Jul 26, 2022

      Email your queries and your questions to letters@macformat.com I have been a subscriber to MacFormat now for about 15 months and as yet haven’t seen anything about personal finance apps. Having run Microsoft Money for 15 years or so, I found that I c

      2 min read

    • Article

      Build Your Own Website

      May 26, 2020

      Build Your Own Website
      7 min read

    • Article

      How To Create Your Own Android Apps Without Coding

      Oct 21, 2019

      THIS ANDROID HOW-TO explores new territory for many readers, but we really wanted to answer the questions: Can you create a mobile device app without becoming a programmer? Is it affordable, and is it worth the effort? It all started when an app-buil

      4 min read

    • Article

      News Readers For Mac

      Dec 12, 2023

      News Readers For Mac
      5 min read

    • Article

      Top 10 Apps For Bloggers

      Jun 17, 2021

      Top 10 Apps For Bloggers
      3 min read

    • Article

      Interview// From Kyiv, With Love

      Nov 21, 2019

      Interview// From Kyiv, With Love
      3 min read

    • Article

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • Article

      Ditch The Filing Cabinet

      Aug 10, 2023

      Ditch The Filing Cabinet
      3 min read

    • Article

      1Password 8

      Feb 8, 2022

      1Password 8
      2 min read

    • Article

      Getting The edge

      Feb 25, 2021

      Getting The edge
      7 min read

    • Article

      Facebook

      May 12, 2022

      Clicks on searches for local businesses increased by 23% in February–May 2020, and although there were pandemic-related reasons for that, it’s still well worth you creating a Facebook Business page for your brand. It’s a great way to reach a more div

      3 min read

    • Article

      1Password 8

      Mar 21, 2022

      1Password 8
      2 min read

    • Article

      Licence To Influence

      Aug 23, 2022

      The app store mentality has filtered beyond consumer software and now extends into the enterprise space. We’re migrating our applications to the cloud to take advantage of these services. Alongside this, we see more software features offered only via

      1 min read

    • Article

      Bitwarden

      Sep 19, 2023

      Bitwarden
      2 min read

    Related categories

    Reviews for Vue.js Quick Start Guide

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Vue.js Quick Start Guide - Ajdin Imsirovic

      Vue.js Quick Start Guide

      Vue.js Quick Start Guide

      Learn how to build amazing and complex reactive web applications easily using Vue.js

      Ajdin Imsirovic

      BIRMINGHAM - MUMBAI

      Vue.js Quick Start Guide

      Copyright © 2018 Packt Publishing

      All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

      Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author(s), nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

      Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

      Commissioning Editor: Kunal Chaudari

      Acquisition Editor: Siddharth Mandal

      Content Development Editor: Kirk Dsouza

      Technical Editor: Sushmeeta Jena

      Copy Editor: Safis Editing

      Project Coordinator: Hardik Bhinde

      Proofreader: Safis Editing

      Indexer: Rekha Nair

      Graphics: Alishon Mendonsa

      Production Coordinator: Nilesh Mohite

      First published: October 2018

      Production reference: 1241018

      Published by Packt Publishing Ltd.

      Livery Place

      35 Livery Street

      Birmingham

      B3 2PB, UK.

      ISBN 978-1-78934-410-3

      www.packtpub.com

      mapt.io

      Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

      Why subscribe?

      Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals

      Improve your learning with Skill Plans built especially for you

      Get a free eBook or video every month

      Mapt is fully searchable

      Copy and paste, print, and bookmark content

      Packt.com

      Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at customercare@packtpub.com for more details.

      At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks. 

      Contributors

      About the author

      Ajdin Imsirovic has been working with frontend technologies, as well as web and print design, for almost two decades. He is an accomplished video course creator and the author of Bootstrap 4 Cookbook and Elm Web Development, both by Packt Publishing. In his third book, Vue.js Quick Start Guide, he eases in the newcomers to the Vue ecosystem in a clear and concise manner.

      I would like to thank my parents for raising me to understand and appreciate the value of hard work and the value of not giving up.

      About the reviewers

      Sufyan bin Uzayr is a writer, teacher, and developer with more than 10 years' experience in the industry. He is an open source enthusiast and specializes in a wide variety of technologies. He holds four masters' degrees and has authored multiple books.

      Sufyan is an avid writer. He regularly writes about topics related to coding, tech, politics, and sports. He is a regular columnist for various publications and magazines.

      Sufyan is the CEO of Parakozm, a software development company catering to a global clientele. He is also the CTO at Samurai Servers, a web server management company focusing mainly on enterprise-scale audiences.

      In his spare time, Sufyan teaches coding and English to young students.

      There are many people that I wish to thank:

      Faisal Fareed and Sadaf Fareed, my siblings, for helping with things back home. The team at Packt, especially Hardik Bhinde, and others, for giving me the opportunity to review this book. The authors, and the Vue.js community, for all their hardwork and effort. 

      Andrea Koutifaris has a passion for programming which he likes to say is in his DNA. At the age of thirteen, he began using his father’s laptop to write his own programs. After graduating high school he enrolled, without a second thought, at the University of Florence, Faculty of Computer Engineering. After being a Java developer for some years, Andrea gradually moved to front-end development which is his passion till date. Having spent too much time fixing problems in messed up code, he is obsessed with good programming and test-driven development which, in his opinion, is the only way to write production quality code. Andrea has authored the book, Vuex Quick Start Guide, published recently by Packt.

      Packt is searching for authors like you

      If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

      Table of Contents

      Title Page

      Copyright and Credits

      Vue.js Quick Start Guide

      Packt Upsell

      Why subscribe?

      Packt.com

      Contributors

      About the author

      About the reviewers

      Packt is searching for authors like you

      Preface

      Who this book is for

      What this book covers

      To get the most out of this book

      Download the example code files

      Download the color images

      Conventions used

      Get in touch

      Reviews

      Introducing Vue

      What is Vue?

      The quickest way to start using Vue2

      Mustache template example

      Using Vue's data option as a function

      What problems does Vue solve?

      Vue, a jQuery successor

      A learning tool for beginners

      A versatile and progressive framework

      A tool for animations and transitions

      Features similar to other modern frontend frameworks and libraries

      Why use Vue?

      Declarative code

      Feels like a right fit for a variety of projects

      Easy-to-understand syntax

      Directives

      Modifiers

      Vue methods

      Computed properties and watchers

      Summary

      Basic Concepts of Vue 2

      Data-driven views in Vue

      What is reactivity?

      How does Vue achieve this?

      Computed properties and methods

      What exactly are these dependencies?

      Understanding components, templates, and props

      Adding props and data for better components

      Adding content to our components with the help of the data object

      Other ways of building component templates in Vue

      Building a simple web page out of components

      Adding simple components to a Vue instance

      Creating a more complex page out of components in Vue

      Improving our Vue-based layouts with v-for

      Watchers in Vue

      Lifecycle hooks

      What is a component's lifecycle?

      How do we use lifecycle hooks?

      Summary

      Working with Vue-CLI, Components, Props, and Slots

      Vue component hierarchy, and global and local components

      Using Vue-CLI

      Installing Git bash

      Installing nvm

      Why use nvm?

      Installing and updating Vue-cli

      Initializing a new project with Vue-cli 

      Setting up code editors to use with Vue

      Working with Vue.js in Sublime Text 3

      Dowloading Sublime Text 3

      Install Package Manager

      Working with Vue.js in VS Code

      Installing VS Code and extensions

      The structure of our Vue-cli-based project

      Adding basic functionality to a child component

      Adding props to our HelloAgain.vue

      Passing data from children to parent components

      Introduction to slots

      Summary

      Filters and Mixins

      Using filters

      An example of a filter that rounds up student grades

      Using filters as a replacement for conditional directives

      Chaining filters in Vue

      Working with mixins

      Building a simple app with repetitive functionality in different components

      Staying DRY with mixins

      Refactoring our viewportSize mixin

      Summary

      Making Your Own Directives and Plugins

      Making our own directives

      Understanding custom directives

      Building a simple custom directive

      Using local directives

      Passing values to custom directives

      Working with Vue plugins

      Creating the simplest possible Vue plugin

      Creating a plugin with options defined

      Publishing a Vue plugin

      Adding a simple plugin

      Installing our NPM plugin in a Vue project using Vue CLI 3

      Additional plugins to learn from

      Summary

      Transitions and Animations

      Transitions and animations in CSS

      How CSS transitions work

      How CSS animations work

      Differences between transitions and animations in CSS

      Rules for CSS transitions

      Rules for CSS animations

      The transition element in Vue

      Setting up the enter transition

      Setting up the leave transition

      Naming transition components

      CSS animations with transition component

      Custom transition classes

      Combining transition modes, duration, keys, and v-if

      Binding CSS styles in Vue

      Animating a button on click with dynamic CSS classes

      Working with transition groups

      JavaScript animation hooks

      Summary

      Using Vuex

      What is state?

      State management, data stores, and one-way data flows

      The Vuex state management pattern

      The store

      Getters in the Vuex store

      Vuex store mutations

      Actions in Vuex store

      Hot reloading

      Building a fruit counter app with Vuex

      Using the Vue DevTools plugin to track our Vuex state

      Improving our fruit counter app

      Summary

      Using Nuxt.js and Vue-Router

      Single-page applications and server-side rendering

      Installing Nuxt.js and previewing the default project

      Installing Nuxt.js with the vue init command

      Debugging an eslint error

      Installing with create-nuxt-app

      Editing the index.vue file

      Nuxt pages as routes

      Adding navigation to Nuxt apps via the components folder

      Adding content to our Nuxt app's pages

      Adding page transitions to our Nuxt.js app

      Summary

      Other Books You May Enjoy

      Leave a review - let other readers know what you think

      Preface

      Up until a few years ago, direct DOM manipulation was the standard in frontend development, with jQuery leading the way. All that started changing with the popularization of modern JavaScript libraries and frameworks, mainly Angular and React. And then, in February of 2014, Vue came out with its initial release. 

      With large IT companies backing both Angular and React, it was not clear how Vue would carve out its position. Initially developed by a single developer, Evan You, in four short years—and without corporate backing—Vue went from being the fun little project of a single developer to an unlikely rival to the big boys, with over 300 contributors. It's not a one-man show anymore.

      Today, Vue is used by NASA, GitLab, Alibaba, Grammarly, WizzAir, EuroNews, Xiaomi, Adobe, Behance, Nintendo, Chess.com, and many others.

      Conclusion? Vue is here to stay. And while there might be an on-going discussion about whether it's better to learn Elm, or React, or Angular, or Ember, or something entirely different, this discussion is largely irrelevant. Each library and framework has something to offer, and in the end, it's simply a matter of trying it out and seeing whether it works for you.

      We developers need to embrace the necessity to surf the technology wave and accept that learning new frameworks and paradigms is simply a part of our careers. Therefore, the question is not whether we should learn Vue, or any other battle-tested and proven tech out there.

      Vue has already achieved its ranking, and it's playing in the same league with the big boys. The only question is, How do I learn it efficiently? and this book is an attempt to answer that question.

      Who this book is for

      This book is aimed at beginner-to-intermediate frontend web developers with no prior experience with Vue or other VDOM JavaScript libraries. It would be beneficial for readers to have some JavaScript and CSS knowledge. It is aimed at quickly bringing the reader up to speed regarding just how exactly Vue

      Enjoying the preview?
      Page 1 of 1