Mastering Vue.js: A Beginner's Guide

268 Pages·2022·15.299 MB·English

by  Sufyan bin Uzayr

Mastering Vue.js
Mastering Vue.js helps the reader master the Vue.js JavaScript framework for faster
and more robust front-end development.
Vue is a popular JavaScript front-end framework that is rapidly expanding. It is
easy to use, small (less than 24 KB), and really fast. It is simple to include in other
applications and libraries. Vue.js is easy to install, and beginners may quickly learn
how to use it and begin creating their interface design.
What makes Vue special is that it is different from most other JavaScript frame-
works and libraries. Unlike other monolithic frameworks, it is built from the
ground up to be incrementally adaptable. The core library focuses primarily on
the View layer, and is easy to use and combine with other libraries or projects. On
the other hand, when merged with contemporary stacks and libraries, it is per-
fectly capable of powering powerful Single-Page Web Applications.
Working with Vue.js can be fun. Leveraging Vue and its plugins can help one easily
create excellent Internet and smartphone-compatible applications. Vue is both com-
pact and customizable, and comes with multiple capabilities for intelligent state man-
agement and navigation choices. All said and done, learning Vue is an excellent career
choice, especially since it is rapidly gaining favor among startups and enterprises alike.
Vue is an excellent choice if you want to make a highly engaging, flexible, and data-
driven app. It has an easy-to-understand layout which you can learn in minutes.
Unlike Angular or React, Vue.js does not have a lot of challenges or concepts to
master. It is an excellent choice for programmers looking to learn a new technol-
ogy for their next project.
With Mastering Vue.js, learning Vue becomes very straightforward, which will
help readers undoubtedly advance their careers.
The Mastering Computer Science series is edited by Sufyan bin Uzayr, a writer and
educator with over a decade of experience in the computing field.
Mastering Computer Science
Series Editor: Sufyan bin Uzayr
Mastering Vue.js: A Beginner’s Guide
Lokesh Pancha, Divya Sachdeva, and Faruq KC
Mastering GoLang: A Beginner’s Guide
Divya Sachdeva, D Nikitenko, and Aruqqa Khateib
Mastering Ubuntu: A Beginner’s Guide
Jaskiran Kaur, Rubina Salafey, and Shahryar Raz
Mastering Visual Studio Code: A Beginner’s Guide
Jaskiran Kaur, D Nikitenko, and Mathew Rooney
Mastering NativeScript: A Beginner’s Guide
Divya Sachdeva, D Nikitenko and Aruqqa Khateib
Mastering GNOME: A Beginner’s Guide
Jaskiran Kaur, Mathew Rooney, and Reza Nafim
For more information about this series, please visit: https://www. routledge.
com/Mastering-Computer-Science/book-series/MCS
The “Mastering Computer Science” series of books are authored by the
Zeba Academy team members, led by Sufyan bin Uzayr.
Zeba Academy is an EdTech venture that develops courses and content
for learners primarily in STEM fields, and offers education consulting
to Universities and Institutions worldwide. For more info, please visit
https://zeba.academy.
Mastering Vue.js
A Beginner’s Guide
Edited by
Sufyan bin Uzayr
First edition published 2023
by CRC Press
6000 Broken Sound Parkway NW, Suite 300, Boca Raton, FL 33487-2742
and by CRC Press
4 Park Square, Milton Park, Abingdon, Oxon, OX14 4RN
CRC Press is an imprint of Taylor & Francis Group, LLC
© 2023 Sufyan bin Uzayr
Reasonable efforts have been made to publish reliable data and information, but the author and
publisher cannot assume responsibility for the validity of all materials or the consequences of their use.
The authors and publishers have attempted to trace the copyright holders of all material reproduced in
this publication and apologize to copyright holders if permission to publish in this form has not been
obtained. If any copyright material has not been acknowledged please write and let us know so we may
rectify in any future reprint.
Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced,
transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or
hereafter invented, including photocopying, microfilming, and recording, or in any information
storage or retrieval system, without written permission from the publishers.
For permission to photocopy or use material electronically from this work, access www.copyright.com
or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923,
978-750-8400. For works that are not available on CCC please contact mpkbookspermissions@tandf.
co.uk
Trademark notice: Product or corporate names may be trademarks or registered trademarks and are
used only for identification and explanation without intent to infringe.
Library of Congress Cataloging-in-Publication Data
Names: Bin Uzayr, Sufyan, editor.
Title: Mastering Vue.js : a beginner’s guide / edited by Sufyan bin Uzayr.
Description: First edition. | Boca Raton : CRC Press, 2023. |
Series: Mastering computer science | Includes bibliographical references and index.
Identifiers: LCCN 2022020968 (print) | LCCN 2022020969 (ebook) |
ISBN 9781032315942 (hardback) | ISBN 9781032315935 (paperback) |
ISBN 9781003310464 (ebook)
Subjects: LCSH: Vue.js (Software framework) | JavaScript (Computer program
language) | Web applications--Development. | Web applications--Programming. |
Application software--Development.
Classification: LCC QA76.76.V84 M37 2023 (print) |
LCC QA76.76.V84 (ebook) | DDC 005.1/4--dc23/eng/20220812
LC record available at https://lccn.loc.gov/2022020968
LC ebook record available at https://lccn.loc.gov/2022020969
ISBN: 9781032315942 (hbk)
ISBN: 9781032315935 (pbk)
ISBN: 9781003310464 (ebk)
DOI: 10.1201/9781003310464
Typeset in Minion
by KnowledgeWorks Global Ltd.
Contents
Preface, xv
About the Author, xvii
Chapter 1 ◾ I ntroduction to Vue.js 1
WHAT IS Vue.js? 1
ADVANTAGES AND DISADVANTAGES 8
Advantages 8
Easy to Learn 8
Progressiveness 9
Community and Support 9
Best of Both Worlds 9
Model-View-ViewModel (MVVM) Architecture 10
Lightweight 10
No Brainer 10
Be a Tool 10
Sense of Community 10
DOM-inant 10
Two Faced 11
Divide and Conquer 11
Tools and Libraries 11
Low Storage Requirements 12
Simplicity 12
Documentation 12
Reactivity 12
Components and Reusability 12
v
vi ◾ Contents
Component-Based Architecture (CBA) 13
Flexibility 13
Tiny Size 14
Virtual DOM Rendering and Performance 14
Reactive Two-Way Data Binding 14
Single-File Components and Readability 15
Integration Capabilities and Flexibility 15
Solid Tooling Ecosystem 15
Easy to Learn 16
Concise Documentation 16
Community Support 16
Disadvantages 16
Language Barrier 16
Reactivity Complexity 17
Lack of Support for Large-Scale Projects 17
Risk of over Flexibility 17
Limited Resources 17
Lack of Experienced Developers 18
Lack of Scalability 18
Lack of Plugins 18
Small Community 18
Poverty Pack 18
Spoilt for Options 18
Lack of Financial Support for Large-Scale Projects 19
BENEFITS OVER OTHER JS FRAMEWORKS 19
Small 19
Easy to Understand 19
Simple Integration 19
Flexibility 20
Two-Way Communication 20
Great Tooling 20
Best of Both Worlds 21
CONCLUSION 21
Contents ◾ vii
Chapter 2 ◾ B asics of Vue.js 23
JSX 23
Prerequisites 24
Configure Vue to Use JSX 26
Using JSX in Render 28
Importing Vue JSX Components 28
How to Make JSX Work with Typescript 28
SETUP 29
Props 30
Context 31
ACCESSING COMPONENT PROPERTIES 32
Usage with Templates 32
Usage with Render Functions 33
Usage of This 34
First Component 34
Components in View 34
Single-File Component 37
PROPS 42
Prop Casing (camelCase vs. kebab-case) 42
Prop Types 43
Passing Static or Dynamic Props 43
Passing a Number 44
Passing a Boolean 44
Passing an Array 44
Passing an Object 44
Passing the Properties of an Object 45
One-Way Data Flow 45
Prop Validation 46
Type Checks 47
Non-Prop Attributes 48
viii ◾ Contents
Using Existing Attributes to Replace/Merge 49
Disabling Attribute Inheritance 49
STATE 50
Single-State Tree 50
Getting Vuex State into the Vue Components 51
The mapState Helper 52
Object Spread Operator 53
Components Can Still Have Local State 53
METHODS 53
CONCLUSION 57
Chapter 3 ◾ V ue Components 59
CONDITIONAL 59
Vue.js Conditional Rendering 59
What Is the Difference between v-if and v-show? 64
When Should You Utilize Each of Them? 64
v-if 65
Conditional Groups with the v-if on <template> 65
v-else 66
Controlling Reusable Elements with the Key 66
v-show 68
v-if vs. v-show 68
v-if with v-for 68
v-else-if 68
Wrapping Up 69
STYLING 70
CSS Styling of Vue Components 70
Styling with External CSS Files 70
Adding Global Styles to Single File Components 72
In Vue, Add CSS Classes 75
Adding Scoped Styles 76
Prerequisites 80
Contents ◾ ix
Set Up Your Vue Project 81
To Style in Vue, Use the Scoped Property 81
Link with an External CSS File 82
In Vue.js, Use Global Styles 84
Use Inline Styling 85
Object Syntax 85
Array Syntax 87
STYLED COMPONENTS 88
Benefits of Styled Components in Vue.js 88
Build Your Components 88
No Classes Policy 88
Concurrent Design 88
A Huge Community 88
Installing Styled Components in Vue.js 88
Passing the Props in Styled Components 91
Dynamic Styling with Props in Vue.js 92
Applying the Same Style to Multiple Components 94
Altering the Displayed Component Dynamically 94
Extending Styles 94
CONCLUSION 95
Chapter 4 ◾ W orking with Images 97
IMPORTING IMAGES 97
CONCLUSION 103
Chapter 5 ◾ R outing in Vue 105
ROUTING 105
Getting Started 105
Router’s Config 108
Router-Link 111
Router-View 112
Using the Parameters Inside the Routers 112
home.vue 116