Beginning Vue.js
Vue.js is an open source JavaScript library for building modern, interactive web applications. Its component-based approach, intuitive API, blazingly fast core, and compact size make Vue.js a great solution to craft your next frontend application.
This is a 3-day course, balancing theory and hands-on applications that are focused on practical takeaways. This course will provide you with practical solutions to common problems when building an application using Vue. We start off by exploring the fundamentals of Vue.js: its reactivity system, data-binding syntax, and component-based architecture, through practical examples. After that, we delve into integrating Webpack to enhance your development workflow using single file components. Finally, we take an in-depth look at Vuex for state management and Vue Router to route in your single-page applications.
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
● 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
Installation and Setup
Before you start with this course, we'll install npm and Vuex. You will find the steps to install these here:
Installing npm
1. As it's bundled in Node.js, the best route to follow is to install Node.js directly. You will find instructions at https://nodejs.org/en/download/
2. After you have installed npm, open the command line and type npm install -g vuecli; this will install vue-cli. The -g option stands for globally and means that wherever you are, you can type vue and it will run the program.
3. Create a new directory that will act as a workspace for development projects.
Installing Vuex
1. To install Vuex, you can add it as a dependency from https://vuex.vuejs.org/en/installation.html
2. If working on JSFiddle or a single web page, you can add Vuex from https://unpkg.com/vuex as a dependency.
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
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