Vue.js Workshop
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
- Slides
- Workshop
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
- (optional) VS Code Plugin: Vetur
- (optional) Atom Plugin: language-vue
- 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)
- Conditional rendering (
- A world of components
- what's a component?
- component properties
- computed properties
- communication between components (event & properties)
- lifecycle
- Vue ecosystem
- HTTP (with axios)
- Routing (with vue-router)
- State Management (with Vuex)
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