Vue.js Essentials - 3 Course Bundle

Welcome to Build Your First Vue.js App. This is a hands-on course for web developers who've never used Vue.js before, or want to brush up on the fundamentals.

My name is Anthony Gore and I'll be your instructor on this course. Let me tell you a little bit about it!

In this course we're going to cover many of the fundamental features of Vue, including stuff like:

• Installing Vue

• Adding Vue to a web page

• Creating Vue data and methods

• Template syntax

And so on.

We'll also build a simple app called Vue.js Poster Shop, which will allow you to practice all the theory you've learned in a real-world app.

Let's take a look at the finished product so you can get a sense of what you're going to be able to do with Vue by the end of the course.

Demo of the finished product

This is Vue.js Poster Shop. It allows you to search for a kind of poster you might want to buy. For example, here's a search for "cat", because who doesn't want a poster of a cat, right?

If you're more of a dog person, though, you can use the search bar at the top and search for that.

Cart

When you see a poster you want to purchase, you can add it to the cart like that.

From the cart, you can increase the quantity of an item if you want more than one. You can also decrease the quantity, and if you decrease it to 0, it's going to be removed from the cart entirely.

So you can see we have complete shopping cart functionality here, and you'll be surprised at how easy it is to do all this with Vue.

Scroll loading

There are also a variety of other subtle features of the app that give it a really nice user experience.

One I'll show you now is the scroll loading feature.

So you can see from the message at the top of the page that a search for "cat" has returned 11 results.

As I start to scroll down the page to view the results, notice the scroll bar over here on the right of the page.

You'll see that it suddenly jumps up as I scroll toward the bottom of the results.

The reason is that not all 11 of the results are added to the page at once; in fact, only 4 are added at a time, and more get added as we keep scrolling.

This feature that makes the page load faster and run smoother.

You'll be able to advanced Vue.js features like this by the end of the course as well.

Demo the completed app features:

• Overview
• Filters
• Detail page
• Route
• keep-alive
• Responsive app, day selector
• Tooltips

• Demonstration of OMDB API

• Visit Github project
• Clone repo
• npm install
• Open code in IDE
• Customising .env file

• Examine start and build scripts in package.json
• Start server with npm run start
• Exit server with Ctrl+C

• Public folder used for favicon and logo
• src folder is main working folder
• Sass/CSS is already provided
• Overview of server.js which uses Node Express
• Overview of API module

• Examine webpack config entry and output and loaders
• Test webpack by running a build
• Test babel loader
• Test SASS import and style loader
• Discussion of webpack middleware
• Discussion of hot module replacement middleware

• Import Vue package into script
• Create Vue instance with hello world message as a data property
• Render message in index.html file
• Import style file for CSS

• Discussion of components
• Components extend basic HTML elements
• Components are mini instances of Vue
• How to register a component
• Components make it easier to architecture app

• Examine the DOM of the finished product to understand hierarchy components of app
• Delete hello world from app
• Add components movie-list and movie-filter and provide basic template

• Add mock data to movie-list component
• Discussion of why data option in a component should be a function that returns an object
• Render mock data in template
• Discussion of why hot module replacement doesn’t work in Vue components out of the box

• Demonstrate filters on finished app
• Examine component hierarchy diagram
• Create nested component check-filter
• Add genres object from util file
• Loop through genres object and create corresponding filters

• How do components share data? With props
• Props are custom HTML properties
• Passed from parent to child only. One way flow.
• Props can be dynamic by using v-bind

• Add prop to check-filter
• Bind prop on parent (movie-filter)
• Flesh out check-filter component with more markup and classes

• Add data function to check-filter with data property checked
• Listen to click and toggle checked property
• Bind object to class attribute allowing dynamic active class

• Custom events allow child components to communicate data change to parent
• Use $emit instance method in child
• Parent listens using v-on directive

• Examine component hierarchy slide and discuss prop/event relationships between components
• check-filter emits custom event when component is clicked
• Received by movie-filter

• Available from Chrome Store
• Discussion of component tab. Shows hierarchy and data properties
• Discussion of events tab. Logs events and their payload

• Event can’t be sent directly to root, must go via movie-filter
• Now emit from movie-filter and receive in root instance
• Send a payload from check-filter in initial event including the category, the filter title and state
• See it works with devtools
• Receive payload in root instance

• Add genre and time arrays to store checked filters
• Respond to event by adding/removing filters to appropriate array
• Observe reactive changes using console.log

• Use component hierarchy diagram to explain how to get event from root instance down to movie list
• Bind genre and time filter arrays to movie-list
• Add genres to dummy movie data

• Add filteredMovies computed property
• Change in template and return movies
• Add moviePassesGenreFilter method to filter movies based on genre filters

• Problems with components: a lot of configuration in one filter, template strings in Javascript
• Single file components (SFC) uses .vue file
• Includes HTML tags template, script and style
• Requires a build tool like Webpack or Browserify
• Use vue-loader if using Webpack
• Hot module replace works with SFCs

• Move each component from main file and put into own .vue file
• .vue files use CamelCase file name
• Need to import each file in main.js
• Vue knows to convert CamelCase file name into kebab-case component name

• Examine /api route. Easier to see with api_sample.json
• Look at different data properties used from API
• Examine api.js which calls OMDB API and also generates session times by algorithm based on ID
• Get data from API using HTTP client library called Vue Resource

• Add created hook on root instance
• Use Vue Resource get method
• Get method is Promise based and allows chained then
• Add movies property to root instance and replace when API call completes

• Add prop on movie-list
• Movie data reactively updates movie-list
• Remove dummy data
• Update movie-list template to read correct title

• movie-item job is to display movie data
• movie-list is responsible for filtering movies
• Generate movie-items for every movie object
• Bind movie object to each movie-item via props

• Display image
• Component template requires a single root element
• Update prop to just pass through nested movie property
• Include title and ratings in template

• Multiple comma separated genres are used in OMDB API
• Split genre list using split method
• Use forEach to iterate genre list
• Genre filtering requires every selected genre to be present on movie item