Hassan Djirdeh
Outline
- All Vue Courses
-
Fundamentals of Vue.js
- Fundamentals of Vue.js - Introduction
- Installing Vue-CLI
- Our First Vue.js App "Hello World"
- Vue Lifecycle
- Working With Expressions
- V-on and Events
- V-on and Events With Modifiers
- Learning Conditionals With the v-if Directive
- V-if Templates and Edge Cases
- Binding Values On Your Tags and v-show
- Working With Forms Using v-model
- Adding Check Boxes and Select Drop Downs With v-model
- Adding Modifiers v-model Trim, Number and Lazy
- Working With Lists and v-for
- Reactivity and Computed Properties
- Setting Computed Properties
- Adding Watchers
- Class and Style Bindings
- Creating Local and Global Components
- Adding Props to Components
- Adding Events with Components
- Adding Slots with Components
- Advanced Slots
- Creating Dynamic Components
- Learning About Transitions/Animations
- Working With Animations
- Adding Vue Mixins
- Creating A Custom Directive
- Adding Render Functions
- Vue CLI 3 Tour
- Testing with Vue.js
- E2E Testing With Cypress.io
- Basic Route Setup
- Child Routes and router.push
-
Nuxt.js - Creating an e-Commerce Site with Vue.js
- Introduction
- Installing Vue-CLI
- Starting with Folder Layout in Nuxt.js
- Installing Nuxt.js
- Creating Our ECommerce Store
- Firebase Database Setup
- Displaying Information From Firebase
- Using Vuetify to Make Our Store Look Better
- Adding Title & Meta Description to Pages with Head
- Breaking Our App Into Another Component
- Setting Up A Dynamic Route
- A Look At AsyncData
- Working with Errors, Validation, & scrollToTop
- Learning Vuex
- Adding Authentication
- Refactor
- Let's Add Middleware Authentication
- Adding In an API with serverMiddleware and Fetch
- Deployment
- Vue Resources
- One Day Introduction to Vue.js with Hassan Djirdeh [Workshop]
Outline
- All Vue Courses
-
Fundamentals of Vue.js
- Fundamentals of Vue.js - Introduction
- Installing Vue-CLI
- Our First Vue.js App "Hello World"
- Vue Lifecycle
- Working With Expressions
- V-on and Events
- V-on and Events With Modifiers
- Learning Conditionals With the v-if Directive
- V-if Templates and Edge Cases
- Binding Values On Your Tags and v-show
- Working With Forms Using v-model
- Adding Check Boxes and Select Drop Downs With v-model
- Adding Modifiers v-model Trim, Number and Lazy
- Working With Lists and v-for
- Reactivity and Computed Properties
- Setting Computed Properties
- Adding Watchers
- Class and Style Bindings
- Creating Local and Global Components
- Adding Props to Components
- Adding Events with Components
- Adding Slots with Components
- Advanced Slots
- Creating Dynamic Components
- Learning About Transitions/Animations
- Working With Animations
- Adding Vue Mixins
- Creating A Custom Directive
- Adding Render Functions
- Vue CLI 3 Tour
- Testing with Vue.js
- E2E Testing With Cypress.io
- Basic Route Setup
- Child Routes and router.push
-
Nuxt.js - Creating an e-Commerce Site with Vue.js
- Introduction
- Installing Vue-CLI
- Starting with Folder Layout in Nuxt.js
- Installing Nuxt.js
- Creating Our ECommerce Store
- Firebase Database Setup
- Displaying Information From Firebase
- Using Vuetify to Make Our Store Look Better
- Adding Title & Meta Description to Pages with Head
- Breaking Our App Into Another Component
- Setting Up A Dynamic Route
- A Look At AsyncData
- Working with Errors, Validation, & scrollToTop
- Learning Vuex
- Adding Authentication
- Refactor
- Let's Add Middleware Authentication
- Adding In an API with serverMiddleware and Fetch
- Deployment
- Vue Resources
- One Day Introduction to Vue.js with Hassan Djirdeh [Workshop]
Vue is "the progressive framework" for building user interfaces. For the last few years, it's been one of the fastest-growing software projects in the world, thanks to its intuitive API, great docs, and first-class tooling. In this hands-on workshop, Hassan Djirdeh, author of Fullstack Vue, shares the Vue philosophy, demonstrates how it helps you solve common UI problems, and teaches how to integrate Vue into your existing apps.
The code examples and slides for this course can be found in this repository: https://github.com/djirdehh/intro-to-vue-workshop
Introduction
In this lesson, Hassan gives an introduction to and overview of Vue.js as a JavaScript UI framework built to be "approachable, versatile and performant". As part of this introduction to Vue, students will learn about:
- Instances: The heart of every Vue application
- Data: An option that is an object
- Mustache Syntax
- Directives: A special type of command that can be added to HTML content. The 5 most common directives include v-bind, v-if/v-show, v-for, v-on, and v-model.
Hassan concludes this lesson with a practice exercise on building an "Up Vote" application.
Before moving on, challenge yourself with the Up Vote Excercise explaned by Hassan around 43:40.
Exercise Goals
- Dynamically render content from the submissions object.
- Render a list of submission elements with the help of the v-for directive.
- Allow the increment of submission votes by clicking the upvote arrow icon.
- BONUS: Conditionally add a blue border (i.e. .blue-border class) around a submission post when a submission reaches 20 votes.
You can use this code as your starting point: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/01-vue-instance-I/exercise/starting-point
When you're done, check the box and move on to the next chapter!