Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
💉 Frontend on Steroids - With Vue.js
Search
Jakub
June 28, 2017
Programming
0
580
💉 Frontend on Steroids - With Vue.js
A brief introduction to Vue.js and how to incrementally enchant your UI.
Jakub
June 28, 2017
Tweet
Share
More Decks by Jakub
See All by Jakub
Testing vuex
apertureless
1
900
Other Decks in Programming
See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
PicoRuby on Rails
makicamel
2
140
Deep Dive into ~/.claude/projects
hiragram
14
14k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
It's Worth the Effort
3n
185
28k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Why Our Code Smells
bkeepers
PRO
337
57k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Side Projects
sachag
455
42k
Transcript
! Frontend on Steroids With Vue.js 1
Was ist Vue.js ? 2
A progressive, incrementally-adoptable JavaScript framework for building UI on the
web. 1 Github Beschreibung 3
Warum? 4
Vorteile 4 Sehr einfach zu erlernen 4 Starten ohne viel
Konfiguration 4 Flexibel einsetzbar 4 Modular 4 "Choice driven" 4 Klein & schnell (28.03kb min+gzip) 5
⚡ Quickstart 6
Auch ohne Build Pipeline einsetzbar: <script src="https://unpkg.com/vue"></script> Ansonsten yarn add
vue Besser yarn add -g vue-cli 7
2 Bestandteile 8
Script const app = new Vue({ el: '#app', data: {
message: 'Hello Vue!' } }) 9
Template: <div id="app"> {{ message }} </div> 10
Single File Components 11
Single File Components 4 Inspiriert von Web Components 4 *.vue
Endung 4 Template 4 Script 4 Styling 12
Hello.vue 13
! Vorteile 14
4 Kleine modulare Komponenten 4 Shareable 4 Saubere Kommunikation über
props und events 4 Testbar 15
! vue-cli 16
4 Scaffold für Vue Projekte 4 Optionen für 4 vue-router
4 eslint 4 Unit Tests mit karma 4 E2E Tests mit nightwatch 17
18
! Demo 19
Weitere Features 4 Methods 4 Computed properties 4 Filters 4
Mixins 4 Directives 4 Props 20
! Code Splitting 21
22
Integration In bestehende System 23
24
4 Weniger Code 4 Inkrementell erweiterbar 4 Kleine ersetzbare Komponenten1
1 https://about.gitlab.com/2016/10/20/why-we-chose-vue/ 25
Think Big 26
Große Projekte sind komplex 27
! State Management 28
vuex 29
Besteht aus 4 State 4 Mutations 4 Actions 4 Getters
4 Modules 30
! 31
JSX 32
33
! Render functions 34
35
redux typescript 36
Testing Jest Ava Karma 37
Community 38
! Fragen? @apertureless
[email protected]
39