Skip to main content

2018 | Buch

Getting to Know Vue.js

Learn to Build Single Page Applications in Vue from Scratch

insite
SUCHEN

Über dieses Buch

Learn how to render lists of items without repeating your code structure and how to work with conditional rendering items and event handling. Containing all you need to know to get started with Vue.js, this book will take you through using build tools (transpile to ES5), creating custom components, state management, and routers.

With Getting to Know Vue.js, you'll see how to combine reusable code with custom components, allowing you to create snippets of reusable code to suit your specific business needs. You'll also explore how to use Single File Components and the Vue.js Command Line Interface (CLI) to build components in a single file and add in build tools as you see fit.

Getting started with a new Single Page Application (SPA) JavaScript framework can be an overwhelming task, but Vue.js makes this daunting task simple and easy to learn, allowing you to start implementing business needs with just a script reference to the library and the custom JavaScript required for your use case. Starting with a little reference and a handful of lines of custom JavaScript, you will have a complete Single Page Application before you know it.

What You'll Learn

Examine Vue.js templating syntax

Work with binding methods Manage the state of your app by comparing your options of building a data store Adapt the more robust options compatible with Vue.jsReview different router options, including creating your own router, using the Vue-router and using Page.js.

Who This Book Is For

Software developers with an understanding of HTML, CSS and JavaScript; prior understanding of a Single Page Application framework would be useful but not essential.

Inhaltsverzeichnis

Frontmatter
Chapter 1. Why Vue.js?
Abstract
Getting started with a new JavaScript framework can be a difficult task to approach. To help with this, we will take a look at the value that Vue.js brings to development and create our first app with Vue.
Brett Nelson
Chapter 2. The Basics
Abstract
Before we can get too far into understanding Vue, we need to cover a few things. We start off by learning what options we have when creating an instance of Vue. After we have an understanding of what we can provide Vue to make it suit our needs, we look at how we can start binding it to HTML, with a look at the templating syntax.
Brett Nelson
Chapter 3. Conditional Rendering
Abstract
Sometimes your app will need to be able to determine whether or not to show something depending on user interactions. For instance, if we are creating a form that asks if users own a car and the user says no, there is no reason to show them the question that asks what color the car is.
Brett Nelson
Chapter 4. Computer Properties and Watchers
Abstract
Using methods on your Vue instance to get formatted data is great, but it comes with the heavy toll of running every time the view is updated or re-rendered. We can avoid paying this performance toll by using computed properties. Sometimes we also need to be able to perform background, or asynchronous, tasks when the user interacts with the page, but we don’t want to block the user from interacting. Vue provides us the option of using watches in these cases.
Brett Nelson
Chapter 5. Events
Abstract
Being able to display lists of items and reuse portions of our markup is great for displaying things, but sometimes we want the user to do something and that is where events come in. In this chapter, we will learn about using listeners to wait for events, event handlers to take action when an event is called, and modifiers, which we can apply to events.
Brett Nelson
Chapter 6. Bindings
Abstract
One of the main reasons to use a framework like Vue is that it makes responding to user input easier. One of the places user input is common is in forms. We also like to update the look of this when users make an input/select an option, changing styles and classes to let the user know something happened.
Brett Nelson
Chapter 7. State Management
Abstract
Every application has some data to manage in the form of values to keep track of related to the user’s choices or the information that is being displayed. To further complicate things, we could be using the same data across multiple instances of Vue. Handling this is called state management. We will take a look at three ways to manage state with Vue: a simple data object, a do-it-yourself data store, and a state management library called Vuex.
Brett Nelson
Chapter 8. Using Components
Abstract
It’s not usually a good idea to get all your apps into one JavaScript file. With Vue we can use components to create reusable portions of our app and make it easier to maintain. In this chapter, we will learn how to create and use a custom Vue component, share data with components, use events, and use slots.
Brett Nelson
Chapter 9. Reusable Code
Abstract
Components are great for reusing an entire custom element, but we can’t use just a portion of the component. To share functionality among multiple components, we have to use mixins. Custom directives will allow us to build out functionality that we can apply to standard HTML components and custom Vue.js components. The render function will give us more control over how our template is built, giving us the ability to use logic in JavaScript to build our templates.
Brett Nelson
Chapter 10. Custom Functionality
Abstract
Plugins offer a way to extend the global functionality of Vue by creating default behavior, adding global components, or generally creating values throughout your Vue app. Filters allow us to create reusable text transformation that we can apply to our templates. Let’s take a look at how to create and use these features in Vue.
Brett Nelson
Chapter 11. Tooling
Abstract
Tooling support and build tools can greatly improve the development experience in any workflow and that is as true with Vue as well. In this chapter, we will learn about single file components and the Vue command-line interface.
Brett Nelson
Chapter 12. Using Routers
Abstract
Being able to quickly change the look and layout of a page without doing a full-page refresh is awesome, but users like to have links that take them directly to content as well. After all, what good is a nice web app if you can’t share a link to the content? This chapter looks at a few different ways to implement routing with Vue.
Brett Nelson
Backmatter
Metadaten
Titel
Getting to Know Vue.js
verfasst von
Brett Nelson
Copyright-Jahr
2018
Verlag
Apress
Electronic ISBN
978-1-4842-3781-6
Print ISBN
978-1-4842-3780-9
DOI
https://doi.org/10.1007/978-1-4842-3781-6

Premium Partner