Vue-workshop: an introduction to Vue.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
docs
fonts
img
reveal.js @ a0c0136
.gitignore
.gitmodules
.nojekyll
.travis.yml
LICENSE
README.md
SUMMARY.md
index.html
package-lock.json
package.json

README.md

Vue.js Workshop

Build Status

In a nutshell: Vue.js (pronounced “view”) could be the 'V' in an MV* pattern. The reason why this framework is gaining popularity the last years is his straightforward syntax. Such as React, Vue.js is oriented component but with a far lower barrier of entry (don't need to learn JSX). Indeed, Vue's syntax will probably look familiar to anyone who has worked with Angular/Mustache in the past.

For this workshop we will learn about Vue.js. Don't worry if you are a beginner, the tutorial can be followed by people new too!

Warning: this workshop uses the StackOverflow API which is subject to Rate Limit (10.000 requests per IP per day). This limit can be reach easyly with the Webpack's Hot-reload module.

Links

Topics

  • Exploring Vue.js basics (including templates, components) and his ecosystem (HTTP calls, routing and state management)
  • Create an app based on StackOverflow API

Pre-requisites

  • Bring your own laptop with Git, NPM and your favourite Text editor / IDE installed
  • Browser devtools
  • (optional) vue-cli installed
    $ npm install -g @vue/cli
    # or
    $ yarn global add @vue/cli

Agenda

  • Vue.js overview
    • a progressive framework
    • declarative rendering
    • virtual DOM
    • .vue files & separation of concerns
    • devtools ❤️
  • Syntax
    • Conditional rendering (v-if, v-else, v-show)
    • loops (v-for)
    • forms (v-model)
  • A world of components
    • what's a component?
    • component properties
    • computed properties
    • communication between components (event & properties)
    • lifecycle
  • Vue ecosystem

Slides installation

# Don't forget the --recursive option to pull reveal.js
$ git clone https://github.com/maxpou-slides/vuejs-training --recursive
# Install&run gitbook
$ npm i && npm run doc:build