28,14 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 180
Veröffentlichungsjahr: 2018
Ähnliche
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 ChaudariAcquisition Editor:Siddharth MandalContent Development Editor:Kirk DsouzaTechnical Editor: Sushmeeta JenaCopy Editor: Safis EditingProject Coordinator:Hardik BhindeProofreader: Safis EditingIndexer:Rekha NairGraphics: Alishon MendonsaProduction 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 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 [email protected] 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.
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.
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 is set up and how its moving parts work together. It is meant to give you an overview of almost the entire Vue landscape, succinctly, and with lots of examples.
The goal of this book is simple – to quickly and efficiently introduce you to Vue and to ease you into the framework without a major investment of time and energy. The intended result is for you to have a huge return on investment – to gain enough practical knowledge of the framework that by the time you've read the book, which should not take long, you are confident to tackle some more advanced Vue projects and concepts.
What this book covers
Chapter 1, Introducing Vue, discusses what Vue is and gets started with mustache templates. We look at problems that Vue solves and reasons to use Vue.
Chapter 2, Basic Concepts of Vue 2, discusses reactivity, computed properties, and methods. We also introduce components, templates, props, watchers, and life cycle hooks.
Chapter 3, Working with Vue-CLI, Components, Props, and Slots, shows how to install vue-cli and how to set up code editors to work with Vue more effectively. We inspect the structure of a vue-cli-based project, look at how to add basic functionality to a child component, and look at passing data from children to parent components.
Chapter 4, Filters and Mixins, describes how to use filters. We look at syntax, use cases, and some examples. We also examine working with mixins.
Chapter 5, Making Your Own Directives and Plugins, looks at ways to extend Vue by making our own, custom directives. We also build our own plugin from scratch and learn how to publish it via npm.
Chapter 6, Transitions and Animations, takes the reader step by step from comparing CSS transitions with CSS animation to understanding the differences between them and how to start integrating them with Vue. We then discuss a myriad of ways to organize transitions and animations in Vue—with transition and transition-group components, with transition hooks as CSS classes, with named transition hooks, and with JavaScript transition hooks.
Chapter 7, Using Vuex, shows the reader, from the ground up, just exactly what state is and why it's important. It also explains the reasons to have the store – the centralized state – and how its internals work. We also tinker with some code examples of controlling our apps from this centralized store.
Chapter 8, Using Nuxt.js and Vue-Router, describes how SPAs work, what issues they have, and how these issues can be overcome with server-side rendering and code splitting. We then see how to build a very simple Nuxt.js app with a few pages, and some added transitions.
To get the most out of this book
This book will work for you best if you can do the following:
Code basic HTML, CSS, and JavaScript
Understand in general how the internet and browsers work
Have some experience working with code editors and console programs
Are willing to download examples (or fork them from CodePen)
The JavaScript code in this book is mostly written in ES5, but as the book progresses, sometimes ES6 has sneaked in. The reason for using ES5 is because it is not assumed that the reader understands ES6 syntax. Likewise, it is not assumed that readers have not used it before—hence, a compromise was made: not to focus on the features of ES6, but not to completely disregard them either. It is the author's humble opinion that this approach will shift the focus to where it matters: understanding Vue.
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packt.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Vue.js-Quick-Start-Guide. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781789344103_ColorImages.pdf.
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
...data: { // the model goes here}...
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
div,.thetemplate {
font-size: 30px; padding: 20px; color: limegreen; font-family: Arial;
Any command-line input or output is written as follows:
cd quickstart-vue
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.
Introducing Vue
In this chapter, we will look into how to start learning Vue 2. This chapter will show you the easiest way to get started quickly and how to keep track of your progress easily with the help of the available SaaS platforms.
We will also look at why Vue is getting so popular, and why we should use it.
Furthermore, we'll discuss the basic building blocks of Vue: mustache templates, directives, modifiers, methods, and computed properties.
Along the way, we will look at a number of practical examples. Let's begin by looking at just what exactly Vue is.
In this chapter, we will take a look at the following topics:
What is Vue?
What problems does Vue solve?
Why use Vue?
What is Vue?
Vue is a simple and easy-to-use JS framework which appeared in 2013. It is the successful result of taking some excellent ideas from Angular and React and combining them in an easy-to-use package.
Compared with other popular frontend frameworks, Vue comes out on top for simplicity and ease of use.
Let's see how we can start using it.
The quickest way to start using Vue2
In the last decade, a lot of the tools for web development have moved to the web, so let's go with the flow and start a new pen on http://codepen.io/.
Once you navigate your browser to https://codepen.io, you'll be greeted with the following screen:
Click on the Create
