Vue.js 3 Fundamentals
Vue.js is rapidly growing in popularity due to its ease-of-use. This course will teach you all the fundamentals of Vue development including creating components, directives, filters, routing, Vuex state management, and deploying to production.
What you'll learn
Vue.js is one of the most lightweight and enjoyable front-end development frameworks for building modern web applications, and there are a lot of important concepts to learn to become a skilled Vue developer. In this course, Vue.js Fundamentals, you will gain the foundational knowledge required to build robust, production-ready applications with Vue. First, you will build your own project from scratch with the Vue CLI, including creating components and manage communication between components. Then, you will learn to create routes and navigate from page to page, manage state and communicate with the server using Vuex, and create custom directives. Finally, you will deploy your application to production. When you’re finished with this course, you will have gained the fundamental skills and knowledge of Vue.js needed to create reliable and professional Vue applications.
Table of contents
- Introduction 1m
- Global Components vs. Local Components 5m
- Creating Your First Component 7m
- Binding Attributes to Data with v-bind 5m
- Binding to Events with v-on 7m
- Using Shorthand Bindings 1m
- Binding to Computed Properties 3m
- Displaying Data with Interpolation 3m
- Conditionally Displaying Content with v-if and v-show 4m
- Repeating Elements with v-for 11m
- Styling Components 5m
- Styling Child Components 7m
- Conditionally Applying Styles with Style Bindings 4m
- Conditionally Applying Classes with Class Bindings 4m
- Using SASS and Other CSS Pre-processors 2m
- Using Component Lifecycle Hooks 2m
- Reducing Duplication with Mixins 2m
- Using the Composition API to Separate Concerns 4m
- Making Components Reactive with the Reactivity API 10m
- Demo: Using the Composition and Reactivity APIs Together 9m
- Summary 1m
- Introduction 1m
- Creating Child Components 6m
- Using Props to Share Data with Child Components 5m
- Validating Props 4m
- Passing Data to Parent Components with Events 10m
- Injecting Content into a Child Component with Slots 7m
- Using Teleport to Render Content Elsewhere in the Application 6m
- Using Provide/Inject to Supply Data to Deeply Nested Components 8m
- Summary 1m
- Introduction 1m
- Adding Routing to Your App 5m
- Linking to Routed Pages 3m
- Styling Links Based on the Active Route 3m
- Navigating from Code 4m
- Working with Route Params 6m
- Passing Params as Props 2m
- Using Nested Routes 7m
- Using Named Views 6m
- Enabling HTML5 History Mode 3m
- Preventing Pages from Loading with Navigation Guards 3m
- Preventing Navigation Away from Pages with Navigation Guards 4m
- Summary 0m
- Introduction 3m
- Creating a Vuex Store 2m
- Changing Vuex Store State with Mutations 3m
- Retreiving Items from the Vuex Store 7m
- Using Vuex Getters to Return Calculated Data 4m
- Using Actions to Work with APIs and Asynchronous Data 16m
- Using Actions to Save Data to an API 3m
- Returning Promises from Actions 1m
- Organizing the Store with Modules 6m
- Namespacing Modules 4m
- Accessing Namespaced Getters 1m
- Understanding Global and Namespaced State 9m
- Using the Vuex MapState Helper 4m
- Using the Vuex MapGetters Helper 1m
- Using the Vuex MapActions Helper 3m
- Using the Vuex MapMutations Helper 1m
- Summary 1m
About the author
Jim Cooper is a software developer at Pluralsight, with more than 20 years of software development experience. He has a passion for Agile processes, especially lean software development. Jim has been developing production Angular apps since before Angular version 1.0, including Pluralsight's first Html5-based video player. Jim has over 10 years of TDD and pair programming experience which has contributed significantly to his professional development. He has successfully mentored other developers... more