Vue.js Tutorial - From The Ground Up
Introduction, Installation & Outputting Data
Binding Data & Simple To-Do Example
Now that we understand how to get Vue working on a project, let's talk about what it means for Vue to be a data-driven framework. Come along as we build a simple to-do list from scratch.
Conditional Rendering with v-if and v-else
Conditional rendering refers to toggling the visibility of an item using a true or false statement. Let's explore how to show or hidden items using v-if and v-else. Finally, let's recreate our to-do list and toggle the items as checked or not.
Computed properties are a way for us to calculate things like tax and product totals. Follow along as we refactor messy code into nicely named computed properties.
Methods vs. Computed Properties
Let's learn about adding functions or methods to our Vue instances. Then, let's compare them to computed properties and spot the difference.
Vue Components are an integral part of Vue. Come along as we explore our very first Component from scratch. We'll start off with some data and then pass that to our template to render it. Then we'll use a local toggle variable to hide or show the description.
NPM, Webpack & Single File Component
It's time for us to depart from the compiled CDN of Vue and start compiling our own assets with NPM and Webpack. We will be pulling in Laravel Mix but just for it's Webpack configurations. Finally, we are going to refactor into a Single-File Component.
Custom Events Passing Data from Child to Parent
Now that we have a nice modern npm and webpack build, let's tackle getting our components to communicate. In Vue, this is done using custom events. We can emit an event on our child component and then listen for that event on our parent event. Follow along as we code a simple example from scratch.
Making HTTP Requests with Axios, API Example
Let's start off by pulling in axios, a simple JS library that allows us to make http request. Then let's implement a simple api request using JSONPlaceHolder, a nice testing api service. Then use the results to display them on the page.
Introduction to Vue CLI and Vue UI Tool
The Vue CLI tool scaffolds a complete Vue application for you from scratch with very minimal setup. Along side of it, you have Vue UI tool at your disposal for a GUI interface you can interact with. Let's set both of those up.
Class and Style Bindings
Class bindings are a way for us to conditionally add or remove class from a ui element in our DOM. Alternately, you can add some inline styles using the same technique. Let's explore both of those options in this episode.
Simple Routing From Scratch
Vue Router is the official plugin for creating robust single page applications. In this episode, we install and create a simple 3 page SPA showing the basics of routing with Vue Router.
An autocomplete dropdown menu is a nice feature to add when there's a set number of items an open field can be. Today, we are exploring how to code one from scratch using Vue and Tailwindcss.
We've talked about Vue's data-driven approach but in this example we are diving deep in exploring the many features that allows Vue to manipulate data effectively. We will be building a pricing page front scratch.