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.
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.
Getting Started with the Vue.js CLI Hello. This is Jim Cooper, and welcome to this Vue. js Fundamentals module on getting started with the Vue. js CLI. In this module, we'll spend a few minutes gaining a high-level understanding of Vue. js applications, and then we'll dive into creating our first project with the Vue CLI. We'll even start writing some of our own code in this module, including building this home page for the Build-a-Bot application that we'll build throughout this course. We're going to have some fun in this course using Vue to create a simple website for building and buying custom robots. This application will be rich enough to demonstrate all the fundamental concepts you need in order to create your own applications with Vue, but it will also be simple enough that we won't waste our time building unnecessary features that have no educational value. And this is what it'll look like when you're finished. As you can see, I can come to the build page and start customizing my robot. And I can build the robot that I want and then click Add to Cart to add it to my cart. And then you can see, it shows up in my cart here, and I even show which robots I saved money on, if they happen to be on sale. And back on the Build page, I can click on any of these parts and learn more about the individual parts. This site doesn't seem like much, but there's a ton of concepts and learning built into this. It will be just enough to allow us to dive into things like creating components and child components, communicating between those components, routing and navigation, state management, and even API calls to a separate server. We'll even explore how to build and deploy this application to production. So let's jump right in and start learning about Vue.
Creating Vue.js Components and Using Template Syntax In this module, we're going to explore all the fundamentals of creating Vue. js components and working with component syntax. This includes creating components, using bindings to display data and handle events, conditionally displaying elements with v-if and v-show, showing elements with v-for, styling components, working with component livecycle hooks, and reducing duplication with mixins. There's a lot here, so let's get started.
Enabling Inter-component Communication In this module on intersection-component communication, we'll explore how to communicate between components. You don't get far in building an application before you run into situations where one component needs to know something about what's going on with another component, so it'll be good to learn how to accomplish this with Vue. There are a few topics to cover including using props to share data with child components, validating component props, passing data to parent components with events, and injecting content into a child component with slots. Understanding how to do this will allow us to build rich client-side applications with Vue, so let's dive in.
Routing from Page to Page All modern front-end frameworks provide some sort of routing mechanism for defining routes and navigating between pages in your single-page app. Vue. js, of course, is no different. In this module, we'll explore how to do this with Vue. This will include adding routing to our app, linking to routed pages, styling links based on the active route, navigating from code, working with route params, using nested routes, using named views, enabling HTML5 History Mode, and preventing navigation with navigation guards. Our build-a-bot app really needs some routing love, so let's go check it out.
Creating Custom Directives and Filters Welcome to this module on creating custom directives and filters. In this module we'll learn how to create and use our own directives similar to directives we've already been using, such as b if. We'll also learn about view filters and how to create and use them. We'll learn about creating and using custom directives, passing data to directives, declaring directives locally versus declaring them globally, creating and using filters, and declaring filters locally versus declaring them globally. Alright, let's check it out.