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 video, Erik demonstrates how to create a simple Vue.js app. With a basic understanding of HTML, Erik shows how easy it can be to get started with Vue.js.
NOTES:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World App</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="el">
<h1>
{{ hello }}
</h1>
</div>
<script>
new Vue({
el: '#el',
data() {
return {
hello: 'Hello World'
}
}
});
</script>
</body>
</html>