COURSE OBJECTIVE:
If you are interested in gaining a good grasp of Vue.js in a systematic and hands-on way by working through a real-world project, then this course is for you.
The course will provide you with knowledge of the following:
• Creating dynamic and animated lists
• Identifying how to use computed properties
• Animating with JavaScript instead of CSS
• Packaging reusable transitions into components
• Creating basic AJAX requests with Axios
• Utilizing Jasmine for testing Vue and Karma workflow
• Utilizing single-page applications and Webpack
TARGET AUDIENCE:
This course is for web developers who have little or no prior experience with Vue.js. It mainly targets JavaScript enthusiasts who want to learn a modern and simple JavaScript framework.
COURSE PREREQUISITES:
Hardware:
For successful completion of this course, students will require computer systems with the following:
• Processor: Intel Core i3 or equivalent
• Memory: Minimum 4 GB RAM
• Hard disk: Minimum 35 GB
• Operating System: Windows (7 SP1 64-bit or higher)
• An internet connection
Software:
• Browser: Google Chrome or Mozilla Firefox (with the latest updates installed)
• Visual Studio 2017 (the latest version)
• Vue.js and vue-devtools Chrome or Firefox browser extension
• Node.js and npm
• Vuex library
• Feathers API player
• Axios promise-based HTTP client
• .NET Framework 4.6 or higher
COURSE CONTENT:
LESSON ONE- Getting Started With Vue.Js
• A Simple Vue.js Program
• Lists and their Types
• Creating a Dynamic and Animated List
• Reacting to Events Such as Clicks and Keystrokes
• Choosing a Development Environment
• Formatting Your Text with Filters
LESSON TWO- Basic Vue.Js Features
• Learning How to Use Computed Properties
• Filtering a List with a Computed Property
• Sorting a List with a Computed Property
• Formatting Currencies with Filters
• Formatting Dates with Filters
• Displaying and Hiding an Element Conditionally
• Adding Styles Conditionally
• Adding Some Fun to Your App with CSS Transitions
• Outputting Raw HTML
• Creating a Form with Checkboxes
• Creating a Form with Radio Buttons
• Creating a Form with a Select Element
LESSON THREE- Transitions And Animations
• Integrating with Third-Party CSS Animation Libraries
• Adding Your Own Transition Classes
• Animating with JavaScript Instead of CS
• Transitioning on the Initial Render
• Transitioning Between Elements
• Letting an Element Leave Before the Enter Phase in a Transition
• Adding Entering and Leaving Transitions for Elements of a List
• Transitioning Elements That Move in a List
• Animating the State of Your Components
• Dynamic Transitions
LESSON FOUR- All About Components
• Creating and Registering a Component
• Passing Data to Your Components with Props
• Making Components Talk to Each Other
• Making Components Talk with Vuex
• Reading a Child's State
• Using Components in Your Own Components
• Content Distribution with Slots
• Single File Components with Webpack
• Loading Your Components Asynchronously
• Having Recursive Components
LESSON FIVE- Vue Communicates With The Internet
• Sending Basic AJAX Requests with Axios
• Validating User Data before Sending It
• Recovering from an Error during a Request
• Creating a REST Client (and Server!)
• Implementing Infinite Scrolling
• Processing a Request before Sending It Out
• Preventing XSRF Attacks on Your App
LESSON SIX- Single-Page Applications
• Creating an SPA with Vue-Router
• Fetching Data before Switching Route
• Managing Errors for Your Routes
• Adding a Progress Bar to Load Pages
• Using Named Dynamic Routes
• Having More Than One Router-View in Your Page
• Composing Your Routes Hierarchically
• Adding Transitions between Your Routes
• How to Redirect to Another Route
• Saving Scrolling Position When Hitting Back
LESSON SEVEN- Unit Testing And End-To-End Testing
• Using Jasmine for Testing Vue
• Adding Karma to Your Workflow
• Testing Your Application State and Methods
• Testing DOM Asynchronous Updates
• End-to-end testing with TestCafe
• Stubbing External API Calls with Sinon.JS
• Measuring the Coverage of Your Code
LESSON EIGHT- Organize + Automate + Deploy = Webpack
• Extracting Logic from Your Components to Keep the Code Tidy
• Organizing Your Dependencies with Webpack
• Using External Components in Your Webpack Project
• Developing with Continuous Feedback with Hot Reloading
• Running a Code Linter While Developing
• Releasing Your Components to the Public
FOLLOW ON COURSES:
Not available. Please contact.