Vue.js is a lightning fast framework that lets you build web apps in a simple way. This course will quickly get you started with Vue.js by teaching you why Vue.js is valuable, how to get data from a user, handle events, and render efficiently.
Chad is an independent software professional. He's been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.
Section Introduction Transcripts
Section Introduction Transcripts
Introducing Vue.js Hey there, I'm Chad Campbell, and today I'd like to talk with you about Vue. js. I've decided to write this course because I believe that Vue. js is a breath of fresh air in the increasingly complex world of web development. Vue. js has a focus on simplicity and speed. This focus helps you quickly build web apps that run fast. In this course, I'm going to show you how to build an app with Vue. js. To help drive home the concepts, we'll create a UI that will let you search for fictional beers and breweries. This UI is what's showing on the screen during this introduction. This UI, Google Chrome, and Visual Studio code will be used to show the key features of Vue. js. Plus, each module in this course has tons of examples which are in this repo. All of this is designed to help you learn how to use Vue. js to quickly create fast, running apps. In this module, you'll get a high-level overview of Vue. js. You'll see why Vue. js is compelling. From there, I'll address common concerns you or your friends may have about this framework. After that, we'll get to work. We'll walk through how to install and set up Vue. js in an app. Finally, this module will conclude by showing you how to initialize a Vue. js app. Let's begin.
Binding with Forms in Vue.js Let me begin by saying, I'm really happy you've stuck with this course thus far. From this module forward, the fictional beer search engine is going to take shape much faster. In the last module, I showed you how to display data in a template. Showing data is a valuable part of any user interface. Collecting data is often just as important. The main way to collect data in a web page is through forms. In this module, I'm going to show you how to bind to forms in Vue. This module will begin by showing you how to use input bindings to collect data. When collecting data, you occasionally need to change the values input, like remove the whitespace, or perform other utility-type tasks on the input. For that reason, I'll also show you how to modify bound values. Finally, this module will conclude with a discussion on how to defer binding values to a later point in time. If you've been watching this course straight through, I encourage you to take a moment and stretch, perhaps grab a drink, or a snack, or take this opportunity to follow me on Twitter. Either way, I want you to get as much out of this course as you can. For that reason, make sure you're mentally fresh before starting the first section, Using Input Bindings.
Responding to User Events in Vue.js The last module showed you how to bind with forms in Vue. Collecting data is an important part of many web apps. In many web apps, though, it's just as important to respond to user interactions. These interactions are also known as user events. In this module, I'll show you how to respond to user events in Vue. First, this module will begin by explaining how to listen for user-initiated events. From there, I'll go a bit deeper and show you how to tailor events to meet your needs. We'll discuss how to modify events. These topics are important to delivering interactive apps with Vue. For that reason, I encourage you to buckle up as we begin using event handlers.
Conditional Rendering and Rendering of Lists The last module showed you how to respond to user events in Vue. That discussion gave me the opportunity to show you how to handle things like button clicks and pressing keys. These types of interactions are used in most apps. In fact, in Growler, if you click the Search button or press the Enter key, you would expect a search to run. Once run, you would expect that query to return a list of results. In this module, I'm going to show you how to render those results. In this module, we're going to look at a number of directives in Vue that deal with rendering. This module will begin with a discussion on rendering elements conditionally. From there, we'll dive into rendering lists of items. As part of this, you'll see how to create item templates and react to list changes. Growler will really take shape in this module. For that reason, I'm really excited for this module. I think you should be too.