Vue.js: Getting Started

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.
Course info
Rating
(368)
Level
Beginner
Updated
Jun 16, 2017
Duration
2h 32m
Table of contents
Course Overview
Introducing Vue.js
Creating Vue.js Templates
Binding with Forms in Vue.js
Responding to User Events in Vue.js
Conditional Rendering and Rendering of Lists
Reacting to Data Changes with Filters, Computed Properties, and Watchers
Description
Course info
Rating
(368)
Level
Beginner
Updated
Jun 16, 2017
Duration
2h 32m
Description

Are you trying to build a web app and the technology is getting in the way? In this course, Vue.js: Getting Started, you'll learn about a JavaScript framework that is intuitive enough to let you focus on your goals. First, you'll learn how to create lightning fast web apps in a refined and simple way. Next, you'll explore how to create HTML templates. In addition, you'll cover how to bind to data input by a user and react to user events. Finally, you'll learn how to conditionally render content the appropriate way. When you're finished with this course, you'll be able to start building fast-running apps with Vue.js.

About the author
About the author

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.

More from the author
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Chad Campbell, and welcome to my course, Vue. js: Getting Started. I'm a software engineer and architect at Ecofic. Vue. js is an intuitive framework for building web apps. If you want to quickly build lightning-fast web apps without the complexity, I believe this course is for you. This course will get you going with Vue. js. This includes covering why Vue. js is a powerful framework, data binding with user input, handling user events, and rendering techniques. By the end of this course, you'll know how to build web apps with Vue. js. Before beginning this course, you should be familiar with HTML, JavaScript, and CSS. I hope you'll join me on the journey to learn Vue. js with the Vue. js: Getting Started course at Pluralsight.

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.

Creating Vue.js Templates
The last module showed you how to initialize an instance of Vue. That instance of Vue represented our fictional beer search engine called Growler. In this module, we'll continue to create Growler, and begin to work on its visual structure. That structure is known as a template. Templates in Vue are created with good, old-fashioned HTML. In fact, templates in Vue are HTML specification compliant. This is a fancy way of saying valid HTML. Still, the data that drives these templates are defined in the Vue instance itself. This module will begin with a discussion about defining template data. This data can be used in a number of ways. For example, in this module, you'll see how to bind the data as content to a template. You'll also see how to bind the data to HTML attributes. Finally, this module will conclude by showing you how to use data properties in JavaScript expressions. This module will begin to pick up the pace of the course. I encourage you to stick with it, as you'll begin to see the Growler search engine take shape.

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.