Description
Vue is a progressive framework for building user interfaces. Unlike other monolithic frames, Vue is designed to be adopted incrementally from scratch. The core library is focused only on the view layer and is easy to import and integrate with other libraries or existing projects. Vue, on the other hand, perfectly powers sophisticated single page applications when used in combination with modern tools and supporting libraries.
You can continue to build your HTML, CSS and JavaScript skills by learning Vue.js, one of the newest JavaScript frameworks available today.
Vue.js is a fun and easy-to-use JavaScript framework for building user interfaces. The essence of the frame is simple and fast; it can be used in projects of any size.
This course is mainly aimed at JavaScript enthusiasts who want to learn a modern and simple JavaScript framework.
About Education
Education Objectives:
- js DOM Interactions
- Class and Style Operations
- js Condition Use and Lists
- js Instance
- Vue CLI Setup
- Working with Component and communication between Components
- Using Directive, Filter and Mixins
- Throw HTTP Requests with js (Axios)
- Routing Structure with Vue Router
- State management with Vuex
- Deployment Operations
Education Content
- What is js?
Why should js be used?
Vue, React, Angular comparison
Create a simple Vue application
- js DOM Interactions
Vue Template Structure
How does Template Syntax and Vue instance work?
Accessing data property information in Instance
Attribute Bind
What is a Directive? How to use it
Show HTML codes on Template
Event Listen
Get data from $event object
Event modifier
Writing JavaScript code in a template
Two Way DataBinding
Computed Property Usage
Watcher Usage
- Class and Style Operations
Dynamically adding CSS Classes
Dynamically adding Style codes
- js Condition Use and Lists
Use of v-if, v-else-if, v-else
v-show usage
v-if vs v-show
rendering lists with v-for
Return object with v-for
get index number with v-for
The v-bind:key property in lists
- What is js Instance?
Basic information about Vue Instance
Working with multiple Vue instances
Accessing Vue Instance from outside
How does Vue manage Data and Method data?
Let’s take a closer look at $el and $data objects
Using $refs in Template
Vue LifeCycle
- Vue CLI Setup
- Introduction to Component Structure
Why Use Component?
How many different components can be defined?
Data storage with data method in Component
Registering components as Local and Global
Root Component in vue
- Working with Component
Improving the Component structure
Naming Components
Component Style Scope Operations
- Communication between components
Communication Problems
Parent => Contact between Child
Child => Communication between Parent
Child => Communication between Child
Event Bus Usage
Homework – Practice
- Advanced Component Usage
Submit Content
Sending content with slots
Parsing content with Named Slots
Default Slot and Slot Defaults
Dynamically switch between components Let’s understand the behavior of dynamic components!
Keep alive dynamic components
LifeCycle Hooks in Dynamic Components
- Directive Usage
How does Directive work? Hook functions
Create simple directive
Send data to Directive
Send arguments to Directive
Modify directive with modifier
Local identification of Directives
- Using Filters and Mixins
Creating a Local Filter
Global Filter and chaining multiple Filters
Alternative to Filter (Computed Property)
What are Mixins? Let’s understand the structure of mixins
Creating and using mimin
How to combine mixins?
Creating a Global Mixin
Mixin and Scope Concept
- Throw HTTP Requests with js (Axios)
Installing the Axios class
GET request
POST request
PATCH request
DELETE request
Sending Parameters with GET (exceptional case)
Create a Custom Axios Instance
- Routing Structure with Vue Router
What are Router and Route?
Define Route
Routing Methods
Lazy Routing
Navigating between Router Links and Components
Where am I? Styling Active Links
Routing operations via JavaScript
Send and read parameters with Route
Redirect Process
- Example Application (CRUD operations)
- State Management with Vuex
Why do we need a different State Government?
Central Store and State Concepts
Vuex Configuration and Store Creation
Methods of Access to State Data
What are Getters? How does it work?
Using mapGetters
Use spread operator for getters
What are Mutations? How does it work?
Use of Mutations
mapMutations Usage
What are Actions? How does it work?
Using mapActions
Parameter usage in Mutations and Actions
Module System
- Sample Applications
Auth Operations
Component Preparation and Publishing via NPM
Making Translator with Translate API
- Deployment Operations
Taking the Vue Project Live
Who Should Receive the Training?
- Beginners in computer and software engineering
- Those who want to master the concept of Front End Framework.
- Anyone who wants to master the application development process with VueJS.
Requirements
Basic knowledge of JavaScript, HTML and CSS is required.
Plan this training institutionally!
This training can be planned in different durations and content specific to your organization. Please contact us for detailed rich content and planning to realize your training objectives.
