WEB-VUE

The basics of the VueJS framework

Form of participation
Form of training
Length of training
  • 3 day (3×13 Lessons)
  • daily 9:00 - 17:00
Available languages
  • Hungarian
Dates

Training price

from 
265 000 Ft
+ VAT/person
Please choose the date and form of participation!
Would you like a custom made solution, group training on this topic?
Find out more about our customised training services here.

Description

The aim of the course is for participants to learn how to use the VueJS framework (Vue3, compoisiton API, script setup).The course will provide practical examples to learn the basics of VueJS and gain insight into component-based development.

You will be able to build simple client-side SPAs using VueJS, all using a modern code editor Visual Studio Code. They will also learn about best practices used in development.

Suggested For

Do you have HTML, CSS and advanced JavaScript skills and want to learn the ins and outs of a JavaScript framework to develop web, mobile or desktop applications? Then this course is for you.

Are you already a developer or are you familiar with a JavaScript framework/library and want to learn something new? This course is perfect for you too.

Outline

  • Why VueJS?
  • Configuring VSCode
  • Initialising a Vue application
  • The createApp(), mount() and setup() methods
  • Text interpolation
  • Vue directives, the v-html directive
  • The v-bind directive, implementing data binding
  • accessing complex data structures with the v-for directive
  • Conditional rendering and display with the v-if and v-show directives
  • Using the template tag
  • Dynamic styling and class assignment using style and class binding
  • VueJS reactivity, ref attribute, event handling
  • Use of computed values, i.e. computed propertys
  • monitoring changes in values with the watch function
  • Binding form elements and variables: bidirectional data binding using the v-model directive
  • Event modifiers
  • The reactive() function, and the tempalte reference
  • Differences between ref() and reactive()
  • The Vite tool
  • VueJS application architecture
  • SIngle FIle Components and the Composition API
  • Structure of SFCs
  • Lifecycle of a Vue application, hooks
  • Using the script setup syntax
  • Sharing state
  • Communication: parent-child (props), child-parent (events)
  • routing: vue-router, lazy loading
  • Building complete applications:
    • Video player
    • User management
    • Webhsop products and shopping cart pages
Outline (PDF)

Prerequisites

HTML, CSS basics, JavaScript ES6+ and OOP basics.