38,39 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Learn how to build amazing and complex reactive web applications easily with Vue.js
About This Book
- Learn how to propagate DOM changes across the website without writing extensive jQuery callbacks code.
- Learn how to achieve reactivity and easily compose views with Vue.js and understand what it does behind the scenes.
- Explore the core features of Vue.js with small examples, learn how to build dynamic content into preexisting web applications, and build Vue.js applications from scratch.
Who This Book Is For
This book is perfect for novice web developer seeking to learn new technologies or frameworks and also for webdev gurus eager to enrich their experience. Whatever your level of expertise, this book is a great introduction to the wonderful world of reactive web apps.
What You Will Learn
- Build a fully functioning reactive web application in Vue.js from scratch.
- The importance of the MVVM architecture and how Vue.js compares with other frameworks such as Angular.js and React.js.
- How to bring reactivity to an existing static application using Vue.js.
- How to use plugins to enrich your applications.
- How to develop customized plugins to meet your needs.
- How to use Vuex to manage global application's state.
In Detail
Vue.js is one of the latest new frameworks to have piqued the interest of web developers due to its reactivity, reusable components, and ease of use.
This book shows developers how to leverage its features to build high-performing, reactive web interfaces with Vue.js. From the initial structuring to full deployment, this book provides step-by-step guidance to developing an interactive web interface from scratch with Vue.js.
You will start by building a simple application in Vue.js which will let you observe its features in action. Delving into more complex concepts, you will learn about reactive data binding, reusable components, plugins, filters, and state management with Vuex. This book will also teach you how to bring reactivity to an existing static application using Vue.js. By the time you finish this book you will have built, tested, and deployed a complete reactive application in Vue.js from scratch.
Style and approach
This book is a thorough, step-by-step guide showing readers how to build complete web apps with Vue.js. While teaching its intricacies, this book shows how to implement the MVVM architecture in the real world and build high-performing web interfaces.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 332
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Learning Vue.js 2
Learning Vue.js 2
Copyright © 2016 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, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be 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.
First published: December 2016
Production reference: 1071216
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-78646-994-6
www.packtpub.com
Credits
Author
Olga Filipova
Copy Editor
Sameen Siddiqui
Reviewer
Bogdan-Alin Bâlc
Project Coordinator
Sheejal Shah
Commissioning Editor
Wilson D'souza
Proofreader
Safis Editing
Acquisition Editor
Chaitanya Nair
Indexer
Tejal Daruwale Soni
Content Development Editor
Divij Kotian
Production Coordinator
Melwyn D'sa
Technical Editor
Prajakta Mhatre
About the Author
Olga Filipova was born in Ukraine, in Kyiv. She grew up in a family of physicists, scientists, and professors. She studied system analysis at the National University of Ukraine Kyiv Polytechnic Institute. At the age of 20, she moved to Portugal where she did her bachelor's and master's degrees in computer science in the University of Coimbra. During her studies, she participated in research and development of European projects and became an assistant teacher of operating systems and computer graphics. After obtaining her master's degree, she started to work at Feedzai. At that time, it was a small team of four who developed a product from scratch, and now it is one of the most successful Portuguese startups. At some point, her main responsibility became to develop a library written in JavaScript whose purpose was to bring data from the engine to the web interface. This marked Olga's main direction in tech—web development. At the same time, she continued her teaching practice in a course of professional web development in the local professional education center in Coimbra.
In 2013, along with her brother and her husband, she started an educational project based in Ukraine. This project's name is EdEra and it has grown from a small platform of online courses into a big player in the Ukrainian educational system. Currently, EdEra is pointing in an the international direction and preparing an awesome online course about IT. Don't miss it!
In 2014, Olga, with her husband and daughter, moved from Portugal to Berlin, where she started working at Meetrics as a frontend engineer, and after a year she became the lead of an amazing team of frontend software developers.
Olga is happily married to an awesome guy called Rui, who is also a software engineer. Rui studied with Olga at the University of Coimbra and worked with her at Feedzai. Olga has a smart and beautiful daughter called Taissa, a fluffy cat called Patusca, and two fluffiest chinchillas called Barabashka and Cheburashka.
Acknowledgments
I am grateful to Packt Publishing for offering me the possibility to write this book. You are great and so is your team. Thank you Divij, Chaitanya, Prajakta, and the whole Packt team for being awesome and supporting me through all this journey in such a friendly and warm way.
Quality is something that is difficult to achieve when working on something on your own. Thank you, Packt team, you've been awesome. And a big special gratitude goes to Romania, to Bogdan, who thoroughly reviewed the book, ran all the code snippets, tests, and lint. Bogdan's attention to even the most tiny details is astonishing. The book was rewritten after Bogdan's comments, and it became so much cleaner. Thank you very much, Bogdan and Alex, for the recommendation.
Time. Support. Love. When you have these three things you are happy and any challenge in the world can scare you. When you have these three things you know that you are capable of everything. When you have these three things you have power. But you can never have these things alone. That is why you must be eternally grateful to those who provide time, support, and love to you.
That is why my big thanks goes to my company where I am currently working—Meetrics. Meetrics provided me with time to write the book. They trusted me and allowed me to use a fraction of my working time for writing the book. Thank you very much!
I want to thank to all my friends and colleagues who supported me during this journey. Every time I come to Meetrics my team asks me how the book is going. Every time we're going to Portugal or Ukraine, our friends and family ask. Every day my friends from Berlin ask me how is it going. Thank you, people, you are awesome! Thank you, EdEra team, for being amazing and postponing important tasks because of my book.
I would love to express gratitude to my parents for educating me with so much love that I know that I am capable of anything. I know that I will not fail. Thank you for all your love and support. Thank you for giving me this confidence in myself. I want to thank to my lovely daughter, whose love and help keeps me going and continuing what I'm doing, knowing that all this is not for nothing. I want to thank to my brother for all the fun we share even and mostly while we're working.
And I want to address a special thanks with love to my husband. Along this writing journey Rui has given me time, support, and love. Rui did everything at home so I could have all the time for writing. Rui felt every slight change in my mood and provided support during all of them so I could feel comfortable again and write. If I would stay up the whole night writing and needed someone to be nearby, Rui would stay up the whole night. For every chapter in the book, Rui was the first person to review them. This was invaluable feedback. Rui gave me chapters back full of corrections and I felt sad. But then he would say something like: Oh my god, Olga, this chapter is amazing! I understood everything! I am looking forward for the next chapter to see what's next! When someone who you love very much tells you this, you just want to move on and continue your amazing writing. Thank you very much for this!
About the Reviewer
Bogdan-Alin Bâlc is a team lead with a passion for frontend technologies. He has worked with JavaScript for the past 8 years, from the emergence of jQuery and Ajax to modern full-fledged MVC frameworks. When he's not looking into some new JS challenge, he spends time with his friends, playing games and watching sports.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.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.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.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.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Why subscribe?
Dedication
I devote this book to my daughter, Taissa.
Preface
This book is about Vue.js. We will start our journey trying to understand what Vue.js is, how it compares to other frameworks, and what it allows us to do. We will learn different aspects of Vue.js while building small funny applications on top of it and applying these aspects in practice. In the end, we will look back to see what've we learned and have a look into the future to see what we can still learn and do. So, you will learn the following:
All the examples in this book are built on top of the recently released Vue 2.0 version. The book also contains references to the previous version regarding deprecated or changed aspects of the framework.
I am sure you will enjoy the process of building applications using Vue.js with this book.
What this book covers
Chapter 1, Going Shopping with Vue.js, contains an introduction to Vue.js, to the terminology used through the book, and first basic examples.
Chapter 2, Fundamentals – Installing and Using, explains the behind the scenes of Vue.js, provides theoretical insights into the architectural pattern, touches nearly all the main Vue.js concepts, and bootstraps the applications that will be developed through the book.
Chapter 3, Components – Understanding and Using , goes deep into components and explains how to rewrite applications using a simple component system and single-file components.
Chapter 4, Reactivity – Binding Data to Your Application , contains a detailed explanations of the usage of data binding mechanisms in Vue.js.
Chapter 5, Vuex – Managing State in Your Application , contains detailed introduction to Vuex, a state management system for Vue.js, and explains how to use it in your application in order to achieve a nice, maintainable architecture.
Chapter 6, Plugins – Building Your House with Your Own Bricks , shows how to use plugins in Vue applications and explains how to use an existing plugin in an application and explains how to build our own plugin and then use it.
Chapter 7, Testing – Time to Test What We Have Done So Far, contains an introduction to the testing techniques that can be used in Vue applications to bring them to the needed level of quality. We tackle it by showing how to write unit tests and how to develop end-to-end tests for the applications in the book.
Chapter 8, Deploying – Time to Go Live!, shows how to bring your Vue application to the world, guaranteeing its quality with continuous integration tools. It explains how to connect a GitHub repository to the Travis continuous integration system and to the Heroku cloud deployment platform.
Chapter 9, What Is Next, wraps up everything that has been done so far and leaves the reader with the follow up steps.
Appendix, Solutions to Exercises, provides solutions to the exercises for first three chapters.
What you need for this book
The requirements for this book are the following:
Who this book is for
This book is for web developers or for people who want to become web developers. Whether you have just started to work with web technologies or you are already a guru of frameworks and languages in the vast ocean of web technologies, this book might show you something new in the world of reactive web applications. If you are a Vue developer and have used Vue 1.0, this book might be a useful guide for you to migrate to Vue 2.0, since all the examples of the book are based on Vue 2.0. Even if you are already using Vue 2.0, this book might be a nice exercise of building an application from scratch, applying all Vue and software engineering concepts and taking it to the deployment stage.
At least some technical background is required. If you can already write code in JavaScript, it is a huge plus.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Your plugin must provide an install method."
A block of code is set as follows:
export default { components: { ShoppingListComponent, ShoppingListTitleComponent }, computed: mapGetters({ shoppinglists: 'getLists' }) }When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
export default { components: { ShoppingListComponent, ShoppingListTitleComponent }, computed: mapGetters({ shoppinglists: 'getLists' }), methods: mapActions(['populateShoppingLists']), store, mounted () { this.populateShoppingLists() } }Any command-line input or output is written as follows:
cd shopping-listnpm install vue-resource --save-devNew terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Check the Developer mode checkbox."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learning-Vue.js-2. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected] with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.
Chapter 1. Going Shopping with Vue.js
"Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of MVVM architecture."
Simplified JavaScript Jargon suggests that Vue.js is a JavaScript library for creating user interfaces (Views) based on underlying data models ( http://jargon.js.org/_glossary/VUEJS.md ).
The official Vue.js website ( https://vuejs.org/ ) just some months ago stated that Vue.js were reactive components for modern web interfaces.
Now it states that Vue.js is a progressive JavaScript framework:
So what is Vue.js after all? Framework? Tool? Library? Should it be used for building full-stack web applications or just for adding some special functionality? Should I switch from my favorite framework to it? If yes, why? Can I use it alongside other tools in my project? What advantages it might bring?
In this chapter, we will try to find the answers to all these questions. We will slightly touch Vue.js and use it within some small and simple examples.
More specifically, we will do the following:
Buzzwords
There will be lots of buzzwords, abbreviations, and other hipster combinations of letters in this book. Please do not be afraid of them. I can tell you more but, for the most part of things you need to do using Vue.js or any other framework, you do not need to know them all by heart! But, in any case, let us leave the thesaurus here so that you become confused with terminology at any point of the book, you can come back here and have a look:
Vue.js history
When, Evan You, Vue.js creator ( http://evanyou.me/ ), was working at Google Creative Labs on one of the projects, they needed to fast prototype a rather big UI interface. Writing a lot of repeated HTML was clearly time- and resource-consuming, and that's why Evan started looking for some already existing tool for this purpose. To his surprise, he discovered that there was no tool, library, or framework that could fit exactly into the purpose of rapid prototyping! At that time, Angular was widely used, React.js was just starting, and frameworks such as Backbone.js were used for large-scale applications with MVC architecture. For the kind of project that needed something really flexible and lightweight just for quick UI prototyping, neither of these complex frameworks were adequate.
When you realize that something cool does not exist and you are able to create it—just do it!
Note
Vue.js was born as a tool for rapid prototyping. Now it can be used to build complex scalable reactive web applications.
That was what Evan did. That is how he came to the idea of creating a library that would help in rapid prototyping by offering an easy and flexible way of reactive data binding and reusable components.
Like every good library, Vue.js has been growing and evolving, thus providing more features than it was promising from the beginning. Currently, it provides an easy way of attaching and creating plugins, writing and using mixins, and overall adding custom behavior. Vue can be used in such a flexible way and is so nonopinionated of the application structuring that it definitely can be considered as a framework capable of supporting the end-to-end building of complex web applications.
The most important thing about Vue.js
Vue.js allows you to simply bind your data models to the representation layer. It also allows you to easily reuse components throughout the application.
You don't need to create special models or collections and to register events object in there. You don't need to follow some special syntax. You don't need to install any of never-ending dependencies.
Your models are plain JavaScript objects. They are being bound to whatever you want in your Views (text, input text, classes, attributes, and so on), and it just works.
You can simply add the vue.js file into your project and use it. Alternatively, you can use vue-cli with Webpack and Browserify family, which not only bootstraps the whole project but also supports hot reloading and provides developer tools.
You can separate the View layer from styles and JavaScript logic or you can put it alltogether into the same Vue file and build your components' structure and logic in the same place. There is plugin support for all modern and commonly used IDEs.
You can use whatever preprocessors you want, and you can use ES2015. You can use it alongside your favorite framework you have been developing in, or you can use it itself. You can use it just to add a small functionality, or you can use the whole Vue ecosystem to build complex applications.
If you want to check how it compares to other frameworks, such as Angular or React, then please visit http://vuejs.org/guide/comparison.html .
If you want to check out all the amazing things about Vue.js, then you are more than welcome to visit https://github.com/vuejs/awesome-vue .
