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]
In this lesson, Hassan teaches about state management and Vuex. He addresses questions such as:
- How do we manage state in our application as the application grows?
- How can we communicate from children to parent components?
Students will specifically learn about:
- Props: can be used to pass data from parent components to down to child components.
- Custom Events: allow child components to communicate with parent components.
- An Event Bus: can enable isolated components to subscribe and publish custom events between one another.
- Simple State Management: can be performed by creating a "store pattern" that involves sharing a data store between components.
- Vuex: the flux-like, state management library built solely for use with Vue Getters, Mutations, and Actions.
Excercise
It's time to practice! In this exercise you will make a new app that uses Vuex to handle state.
Goals
- Use Custom Events to have the
InputComponentmanipulate the data value in the rootAppcomponent. Use props to pass data fromAppto theNoteCountComponent. - Create a simple store pattern that has
InputComponentandNoteCountComponentinteract through a single store instance. - Create a Vuex store pattern to have
InputComponentinput information andNoteCountto determine the number of notes entered.
Starter code: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/04-state-management-and-vuex/exercise/starting-point