Vue JS

Duration: Hours



    Training Mode: Online


    Vue JS is a JavaScript framework that facilitates the UI (user interface) development of websites and single-page applications.

    Introduction to Vue.js :

    1. What is Vue.js
    2. Why Vue.js
    3. Quick tour of Vue-cli
    4. Hello World with Vue.js
    5. Anatomy of Hello world vue app

    Working with Template & viewmodel :

    1. What is vue.js template
    2. What is viewmodel / vue instance?
    3. Template syntax
    4. Interpolation
    5. Directive
    6. Filters
    7. Shorthands
    8. Javascript expressions
    9. Computed properties
    10. Watchers
    11. Class and style bindings
    12. HTML classes
    13. Inline styles
    14. Conditional Rendering
    15. Iterative Rendering

    Vue Instance Revisited :

    1. Basic vue instance usage
    2. Multiple vue instances
    3. Vue instance Lifecycle
    4. Accessing data from outside vue instance
    5. Data and methods
    6. More about $el, $data and $refs

    Event handling :

    1. Introduction
    2. Listening to events
    3. Method Event handlers
    4. Event modifiers
    5. Key modifiers

    Working with forms & two way binding :

    1. Introduction to two way binding via v-model
    2. Handling user input with HTML form controls
    3. Data binding
    4. lazy, .number, .trim modifiers
    5. Submitting a form

    Introduction to components:

    1. What are components?
    2. Why components
    3. Hello World component
    4. Anatomy of a component
    5. Registering Components Locally and Globally
    6. Root Component
    7. Thinking in components
    8. Composing application as components

    Passing data to components:

    1. Props, parent to child communication
    2. Custom events, child to parent
    3. Non parent child communication event emitter style using .emit, .on

    Content distribution with slots:

    1. Compilation scope
    2. Single slot
    3. Named slot
    4. Scoped slot9.

    Dynamic components:

    1. Switching Multiple Components with Dynamic Components
    2. Dynamic Component Behavior
    3. Keeping Dynamic Components Alive
    4. Lifecycle hooks

    Custom directives:

    1. Introduction
    2. Directive hook functions
    3. Developing custom directive
    4. Passing values and arguments to custom directives
    5. Directive hook arguments


    1. Introduction
    2. Creating and using mixins
    3. Option merging
    4. Global mixin


    1. Introduction
    2. Local filters
    3. Global filters
    4. Chaining filters

    Remote communication with vuejs:

    1. Using vue-resource to working with HTTP
    2. Fetch data
    3. Post data to server
    4. Request Response Interception
    5. Template URLs


    1. Introduction
    2. Setting up vue-router
    3. Loading routes
    4. Routing modes
    5. Navigation with router links
    6. Styling active links
    7. Imperative navigation
    8. Route Parameters
    9. Setting up child or nested routes
    10. Named routes
    11. Query parameters
    12. Named router views
    13. Wildcard routes
    14. Route guards

    State Management:

    1. Introduction
    2. What is need for state management
    3. What is vuex
    4. Centralized store
    5. Understanding Getters
    6. Using Getters
    7. Mapping Getters to Properties

    Understanding Mutations:

    1. Using Mutations
    2. Using Actions
    3. Mapping Actions to Methods

    Unit testing:

    1. Introduction
    2. Setup and tooling
    3. Testing components

    For more inputs on Vue JS you can connect here.
    Contact the L&D Specialist at Locus IT.

    Locus Academy has more than a decade experience in delivering the training/staffing on Vue JS  for corporates across the globe. The participants for the training/staffing on Vue JS  are extremely satisfied and are able to implement the learnings in their on going projects.


    There are no reviews yet.

    Be the first to review “Vue JS”

    Your email address will not be published. Required fields are marked *

    Vue. js is a javascript framework that developers mainly use to create interactive user interfaces. When compared to AngularJS, this framework is lighter and more adaptable, which is why many developers, from beginners to experts, prefer it.