Vuejs: Difference between revisions

From Training Material
Jump to navigation Jump to search
mNo edit summary
Line 14: Line 14:


== Introduction ==
== Introduction ==
* JavaScript framework for building UI (user interfaces)
* JavaScript '''framework''' for building '''UI''' (user interfaces)
* What do we need?
* What do we need?
** HTML, CSS, and JavaScript  
** HTML, CSS, and JavaScript  
* Declarative, component-based programming model  
* '''Declarative''', component-based programming model  
** Declarative rendering
** Declarative rendering
** Reactivity
** Reactivity
* Progressive framework
* '''Progressive''' framework
* Single-file components
* Single-file components
* API Styles - options VS composition
* API Styles - '''options''' VS '''composition'''
<!--
* Developed by engineers at Facebook
** ''"A JavaScript library for building user interfaces"''
* React enables websites to display
** '''Complex''' animations
** '''Large''' volumes of data
** Other '''memory-heavy''' tasks without slowing down
-->


=== Framework ===
=== Framework ===
Progressive Framework - "framework that can grow with you and adapt to your needs"
'''Progressive Framework''' - ''"framework that can grow with you and adapt to your needs"''
* framework and ecosystem  
* framework and ecosystem  
* designed to be flexible and incrementally adoptable
* designed to be '''flexible''' and incrementally adoptable
* can be used in
* can be used in
** enhancing static HTML without a build step
** enhancing static HTML '''without a build step'''
** embedding as Web Components on any page
** embedding as '''Web Components''' on any page
** Single-Page Application (SPA)
** Single-Page Application (SPA)
** Fullstack / Server-Side Rendering (SSR)
** Fullstack / Server-Side Rendering (SSR)
** Jamstack / Static Site Generation (SSG)
** Jamstack / Static Site Generation (SSG)
** targeting desktop, mobile, WebGL, and even the terminal
** targeting desktop, mobile, WebGL, and even the '''terminal'''


== Overview of Vue JS ==
== Overview of Vue JS ==

Revision as of 13:02, 6 May 2024


Vuejs

Vuejs Training Materials

Introduction

  • JavaScript framework for building UI (user interfaces)
  • What do we need?
    • HTML, CSS, and JavaScript
  • Declarative, component-based programming model
    • Declarative rendering
    • Reactivity
  • Progressive framework
  • Single-file components
  • API Styles - options VS composition

Framework

Progressive Framework - "framework that can grow with you and adapt to your needs"

  • framework and ecosystem
  • designed to be flexible and incrementally adoptable
  • can be used in
    • enhancing static HTML without a build step
    • embedding as Web Components on any page
    • Single-Page Application (SPA)
    • Fullstack / Server-Side Rendering (SSR)
    • Jamstack / Static Site Generation (SSG)
    • targeting desktop, mobile, WebGL, and even the terminal

Overview of Vue JS

  • Declarative rendering
  • Component composition
  • Hot-reloading
  • Time-travel debugging

Declarative rendering

Component composition

Hot-reloading

Time-travel debugging

Setting up a development environment

Creating your first application

Working with Templates

Dividing the application into smaller, self-contained components

Methods and computed properties

Reactive programming

Directives and data rendering

Applying transitions

Routing

Managing state

Creating animations

Refactoring components

Server-side rendering

Supporting libraries and packages

  • Routing
  • State management
  • Build tooling

Routing

State management

Build tooling

Testing your application

Debugging and performance

Embedding Vue.js into existing pages

Deploying your application to production Vue-CLI

Scaling your application