VueJs Training
Vue Js
We are going to study the ecosystem of vue.js and learn good development practices Modern JS.
French / English
Certificate
Overview
Vue.js features an incrementally adaptable architecture that focuses on declarative rendering and component composition. The core library is focused on the view layer only.Advanced features required for complex applications such as routing, state management and build tooling are offered via officially maintained supporting libraries and packages.
Vue.js allows for extending HTML with HTML attributes called directives. The directives offer functionality to HTML applications, and come as either built-in or user defined directives.
Prerequisites
Knowledge of HTML, CSS and JavaScript
Goals
Understand the key concepts of vue.js
Be able to develop a full single page app application with vue.js
Know the essential tools for developing vue.js applications
Training Program
1- Modern Js Development Environment
- The ECMAScript spec
- ES6 + syntax
- What's new in ES9 / ES10
- Babel and Webpack
- ES6 + syntax
- What's new in ES9 / ES10
- Babel and Webpack
2- Getting Starter in Vue Js
- Key principles
- Vue.Js, React , Angular comparisons
- Roadmap and versions
- Creation and management of a project with vue-cli
- The instance seen
- Creation of the first component
- DOM events
- Debugging
- Vue.Js, React , Angular comparisons
- Roadmap and versions
- Creation and management of a project with vue-cli
- The instance seen
- Creation of the first component
- DOM events
- Debugging
3- Breakdown of the Code in the Components
- Nesting components and props
- Passing content to components (slots and children)
- Triggering of custom events
- The component life cycle
- Passing content to components (slots and children)
- Triggering of custom events
- The component life cycle
4- Extend Templates
- Filters and computedProps ( simplified writing of templates)
- Template vs render methods & JSX
- Functional components
- Animations & transitions (UX improvement )
- Template vs render methods & JSX
- Functional components
- Animations & transitions (UX improvement )
5- Navigation Management
- Development of a routing system
- Vue router principles
- Configure routes
- Secure an application (navigation guards)
- Transitions between screens
- Vue router principles
- Configure routes
- Secure an application (navigation guards)
- Transitions between screens
6- Managing Data with Vuex
- Basic concepts
- Installation and implementation
- Extending Vuex with plugins
- Alternative bookstores
- Installation and implementation
- Extending Vuex with plugins
- Alternative bookstores
7- Develop a Connected Application
- Load and send data with AJAX
- Forms management
- Two-way data-biding / one way data flow
- Vuex and forms
- Confirmation of user input
- Forms management
- Two-way data-biding / one way data flow
- Vuex and forms
- Confirmation of user input
8- Advanced Concepts and Good Practices
- Mixins and plugins
- Group your code in single file components.vue
- Custom guidelines
- Compile and optimize performance
- Server side rendering
- Group your code in single file components.vue
- Custom guidelines
- Compile and optimize performance
- Server side rendering
Project
creation of a chat group with Vue.Js and CometChat
01.
Setting up the working environment
02.
Creation of a view project that will serve as the basis for the rest of the tp
03.
Refactoring
04.
Improved display through rendering techniques
05.
Setting up a navigation system with a router view
06.
Optimizing the architecture of the application by converting Vuex
07.
Loading data from a REST / JSON API and creating a form
08.
Improved code quality
