41,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Become a pro in creating modern interactive web applications using this JavaScript framework
Key Features
- Explore the exciting features of Vue.js 2 through interesting examples and practical recipes
- Craft highly modular applications using design patterns and the component architecture of Vue.js
- Learn how to utilize modern development tools by building applications with Vue.js
Book Description
This Learning Path is divided into three sections, with each section bringing you closer to developing high-end modern web applications with Vue.js 2. It starts with building example applications to get well versed with the Vue.js ecosystem. You will learn to use Vue.js by creating three single page applications that explore Vuex and vue-router, the standard Vue tools for caching data and routing URLs for your applications. Going further, the Learning Path will address some of the challenges in designing web applications with Vue.js.
The Learning Path will have easy-to-follow recipes to help you tackle the challenges and craft dynamic front end. You will learn to integrate web utilities like Babel and Webpack to enhance your development workflow. Finally, towards the end, the course will introduce you to several design patterns to help you write clean, maintainable, and reusable codes with Vue framework.
At the end of the Learning Path, you will be confident with expertise in leveraging all the components and productivity features of Vue.js and will be on your way to design your web applications and execute it by writing clean code.
This Learning Path includes content from the following Packt products:
- Vue.js 2.x by Example by Mike Street
- Vue.js 2 Cookbook by Andrea Passaglia
- Vue.js Design Patterns and Best Practices by Paul Halliday
What you will learn
- Understand the fundamentals of Vue.js with practical examples
- Using vue-router dynamic routes to load data
- Build complex web interfaces using the Vue.js component system
- Use Webpack and Babel to enhance your development workflow
- Manage your application’s state using Vuex
- Seamlessly implement routing in your single page applications
Who this book is for
The Learning Path is intended for JavaScript developers at any level of expertise who wants to learn Vue.js and develop productive web applications with the power of the latest Vue.js.
Mike Street (aka mikestreety) is a frontend developer from Brighton, UK. Specializing in Gulp, SCSS, HTML, and Vue, he has been developing websites professionally since 2010. After making his first Vue app as an experimental side project, he's been hooked ever since. When not developing on the web, Mike likes to explore the Sussex countryside on his bike, start a new side-project without finishing the last, or heading to the cinema. Andrea Passaglia was born in Genoa, in northern Italy. Interested about technology since his parents gave him a toy computer when he was a boy, he started studying web technologies at an early age. After obtaining his master's degree in computer engineering he worked on the design and implementation of web interfaces for companies of various sizes and in different industries (healthcare, fashion, tourism, and transport). In 2016 he moves in the silicon valley of Europe to tackle new problems in the banking industry at the Edgeverve Dublin Research and Development Labs. A backend technologist by trade, Vue.js is his first tool to bring to life his creations when it comes to the frontend. Andrea is married to a lovely Russian girl from Siberia and they often cook together mixing culinary traditions. Paul Halliday (BSc Hons) is a developer advocate with a focus on fast-moving technologies. His online courses have taught over 25,000 students across a wide variety of software development subjects. He's also a progress developer expert with expertise in NativeScript and Kendo UI.Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 655
Veröffentlichungsjahr: 2018
Ähnliche
Complete Vue.js 2 Web Development
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 authors 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.
First Published: December 2018
Production Reference: 1211218
Published by Packt Publishing Ltd. Livery Place, 35 Livery Street Birmingham, B3 2PB, U.K.
ISBN 978-1-78995-990-1
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 Authors
Mike Street (aka mikestreety) is a frontend developer from Brighton, UK. Specializing in Gulp, SCSS, HTML, and Vue, he has been developing websites professionally since 2010. After making his first Vue app as an experimental side project, he's been hooked ever since. When not developing on the web, Mike likes to explore the Sussex countryside on his bike, start a new side-project without finishing the last, or heading to the cinema.
Andrea Passaglia was born in Genoa, in northern Italy. Interested in technology since his parents gave him a toy computer when he was a boy, he started studying web technologies at an early age. After obtaining his master's degree in computer engineering he worked on the design and implementation of web interfaces for companies of various sizes and in different industries (healthcare, fashion, tourism, and transport).
In 2016 he moves in the silicon valley of Europe to tackle new problems in the banking industry at the Edgeverve Dublin Research and Development Labs.
A backend technologist by trade, Vue.js is his first tool to bring to life his creations when it comes to the frontend.
Andrea is married to a lovely Russian girl from Siberia and they often cook together mixing culinary traditions.
Paul Halliday (BSc Hons) is a Developer Advocate with a focus on fast-moving technologies. His online courses have taught over 25,000 students across a wide variety of software development subjects. He's also a Progress Developer Expert with expertise in NativeScript and Kendo UI.
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.
Preface
This Learning Path is divided into three sections, with each section bringing you closer to developing high-end modern web applications with Vue.js 2. It starts with building example applications to get well versed with the Vue.js ecosystem. You will learn to use Vue.js by creating three single page applications that explore Vuex and vue-router, the standard Vue tools for caching data and routing URLs for your applications. Going further, the Learning Path will address some of the challenges in designing web applications with Vue.js.
The Learning Path will have easy-to-follow recipes to help you tackle the challenges and craft dynamic front end. You will learn to integrate web utilities like Babel and Webpack to enhance your development workflow. Finally, towards the end, the course will introduce you to several design patterns to help you write clean, maintainable, and reusable codes with Vue framework.
At the end of the Learning Path, you will be confident with expertise in leveraging all the components and productivity features of Vue.js and will be on your way to design your web applications and execute it by writing clean code.
Who This Book Is For
The Learning Path is intended for JavaScript developers at any level of expertise who wants to learn Vue.js and develop productive web applications with the power of the latest Vue.js.
To Get the Most out of This Book
For this book, the reader will need the following:
A text editor or IDE to write code. It can be as simple as Notepad or TextEdit, but one with syntax highlighting
such as Sublime Text, Atom, or Visual Studio Code
is recommended.
A web browser.
A Dropbox user account with files and folders.
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/Complete-Vue.js-2-Web-Development. 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!
Conventions Used
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 the text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Just assign the names of the layers you want to activate to the VK_INSTANCE_LAYERS environment variable."
A block of code is set as follows:
<div id="app"> {{ calculateSalesTax(shirtPrice) }} </div>
Any command-line input or output is written as follows:
$ npm install
$ npm run dev
Bold: New 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: "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.
Getting Started with Vue.js
Vue (pronounced view) is a very powerful JavaScript library created for building interactive user interfaces. Despite having the ability to handle large single-page applications, Vue is also great for providing a framework for small, individual use cases. Its small file size means it can be integrated into existing ecosystems without adding too much bloat.
It was built to have a simple API, which makes it easier to get started in comparison with its rivals: React and Angular. Although it borrows some of the logic and methodologies from these libraries, it has identified a need for developers for a simpler library for building applications.
Unlike React or Angular, one of the benefits of Vue is the clean HTML output it produces. Other JavaScript libraries tend to leave the HTML scattered with extra attributes and classes in the code, whereas Vue removes these to produce clean, semantic output.
In this chapter, we will look at:
How to get started with Vue by including the JavaScript file
How to initialize your first Vue instance and look at the data object
Examining computed functions and properties
Learning about Vue methods
Creating the workspace
To use Vue, we first need to include the library in our HTML and initialize it. For the examples in the first section of this book, we are going to be building our application in a single HTML page. This means the JavaScript to initialize and control Vue will be placed at the bottom of our page. This will keep all our code contained, and means it will easily run on your computer. Open your favorite text editor and create a new HTML page. Use the following template as a starting point:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js App</title> </head> <body> <div id="app"> </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> // JS Code here </script> </body> </html>
The main HTML tags and structure should be familiar to you. Let's run over a few of the other aspects.
Application space
This is the container for your application and provides a canvas for Vue to work in. All the Vue code will be placed within this tag. The actual tag can be any HTML element - main, section, and so on. The ID of the element needs to be unique, but again, can be anything you wish. This allows you to have multiple Vue instances on one page or identify which Vue instance relates to which Vue code:
<div id="app"> </div>
During the tutorials, this element with the ID will be referred to as the app space or view. It should be noted that all HTML and tags and code for your application should be placed within this container.
Vue library
For the examples in this book, we are going to be using a hosted version of Vue.js from a CDN (Content Delivery Network) unpkg. This ensures that we have the latest version of Vue in our application, and also means we do not need to create and host other JavaScript files. Unpkg is an independent site that hosts popular libraries. It enables you to quickly and easily add a JavaScript package to your HTML, without having to download and host the file yourself:
<script src="https://unpkg.com/vue"></script>
When deploying your code, it is a good practice to serve up your libraries from local files rather than relying on CDNs. This ensures that your implementation will work with the currently - saved version, should they release an update. It will also increase the speed of your application, as it will not need to request the file from another server.
The script block following the library include is where we are going to be writing all our JavaScript for our Vue application.
Summary
In this chapter, we learned how to get started with the Vue JavaScript framework. We examined the data, computed, and methods objects within the Vue instance. We covered how to use each one within the framework and utilize each of its advantages.
Displaying, Looping, Searching, and Filtering Data
In Chapter 1, Getting Started with Vue.js, we covered the data, computed, and method objects within Vue and how to display static data values. In this chapter, were are going to cover:
Displaying lists and more complex data with Vue using
v-if
,
v-else
,
and
v-for
Filtering the lists using form elements
Applying conditional CSS classes based on the data
The data we are going to be using is going to be randomly generated by the JSON generator service (http://www.json-generator.com/). This website allows us to get dummy data to practice with. The following template was used to generate the data we will be using. Copy the following into the left-hand side to generate data of the same format so the attributes match with the code examples, as follows:
[ '{{repeat(5)}}', { index: '{{index()}}', guid: '{{guid()}}', isActive: '{{bool()}}', balance: '{{floating(1000, 4000, 2, "00.00")}}', name: '{{firstName()}} {{surname()}}', email: '{{email()}}', registered: '{{date(new Date(2014, 0, 1), new Date(), "YYYY- MM-ddThh:mm:ss")}}' } ]
Before we get into building our simple app and displaying our users, we'll cover some more of the features of Vue and the HTML-specific attributes available in your view. These range from dynamically rendering content to looping through arrays.
HTML declarations
Vue allows you to use HTML tags and attributes to control and alter the view of your application. This involves setting attributes dynamically, such as alt and href. It also allows you to render tags and components based on data in the application. These attributes begin with a v- and, as mentioned at the beginning of this book, get removed from the HTML on render. Before we start outputting and filtering our data, we'll run through a few of the common declarations.
Conditional rendering
Using custom HTML declarations, Vue allows you to render elements and contents conditionally based on data attributes or JavaScript declarations. These include v-if, for showing a container whether a declaration equates to true, and v-else, to show an alternative.
v-else
v-else allows you to render an alternative element based on the opposite of the v-if statement. If that results in true, the first element will be displayed; otherwise, the element containing v-else will.
v-else has no value and is placed within the element tag.
<div id="app"> <div v-if="isVisible"> Now you see me </div> <div
v-else
> Now you don't </div> </div>
Adding the preceding HTML to your app space will only show one of the <div> elements – toggling the value in your console as we did earlier will reveal the other container. You can also use v-else-if should you wish to chain your conditions. An example of v-else-if is as follows:
<div id="app"> <div v-if="isVisible"> Now you see me </div> <div
v-else-if="otherVisible"
> You might see me </div> <div v-else> Now you don't </div> </div>
You might see me will be displayed if the isVisible variable equates to false, but the otherVisible variable equates to true.
v-else should be used sparingly as can be ambiguous and might lead to false positive situation.
