SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
Vue
The Progressive Framework
Evan You
The beginning
Data binding
Data-driven DOM manipulations
“progressive”
“developing or happening
gradually or in stages”
“A progressive framework
adapts to
a project’s inherent complexity.”
“progressive framework”
Vue
The progressive framework
• Incrementally adoptable
• View layer centric core library
• Approachable
Vue
The progressive framework
• Incrementally adoptable
• View layer centric core library
• Approachable
Model-View-ViewModel
(MVVM)
View ViewModel Model
Vue and MVVM
var vm = new Vue({
el: ‘#app’,
data: obj
})
vm.$el vm.$data
Document Object Model
(DOM)
html
head
linkmeta title
body
ph1 img
span
DOM updates
DOM
Render
Tree
Layout Paint
html
head body
linkmeta title ph1 img
span
❌
body
h1 img
p
spanbody
ph1 img
span
body
ph1 img
span
body
ph1 img
span
——————————————————————————————-
Virtual DOM
DOM
Vue
The progressive framework
• Incrementally adoptable
• View layer centric core library
• Approachable
Single-File Components
Hello.vue
Template
Script
Style
“Hello world” example
lang attribute
Scoped CSS
Tools
• Scaffolding
• Debugging
Vue CLI
Vue devtools
Vue devtools
Vue
The progressive framework
• Incrementally adoptable
• View layer centric core library
• Approachable
First-party libraries
• Routing
• State management
• Server-side rendering Vue Server Renderer
Vuex
Vue Router
• …
Thank you for
your attention!

Weitere ähnliche Inhalte

Was ist angesagt?

NoSQL Database in .NET Apps
NoSQL Database in .NET AppsNoSQL Database in .NET Apps
NoSQL Database in .NET Apps
Shiju Varghese
 

Was ist angesagt? (20)

Owning Web Performance with PhantomJS 2 - Fluent 2016
Owning Web Performance with PhantomJS 2 - Fluent 2016Owning Web Performance with PhantomJS 2 - Fluent 2016
Owning Web Performance with PhantomJS 2 - Fluent 2016
 
Javascript for Wep Apps
Javascript for Wep AppsJavascript for Wep Apps
Javascript for Wep Apps
 
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
 
Using html5 to build offline applications
Using html5 to build offline applicationsUsing html5 to build offline applications
Using html5 to build offline applications
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
 
Mean PPT
Mean PPTMean PPT
Mean PPT
 
Rapid Application Development with MEAN Stack
Rapid Application Development with MEAN StackRapid Application Development with MEAN Stack
Rapid Application Development with MEAN Stack
 
Building Modern Web Apps with MEAN Stack
Building Modern Web Apps with MEAN StackBuilding Modern Web Apps with MEAN Stack
Building Modern Web Apps with MEAN Stack
 
CFWheels - Pragmatic, Beautiful Code
CFWheels - Pragmatic, Beautiful CodeCFWheels - Pragmatic, Beautiful Code
CFWheels - Pragmatic, Beautiful Code
 
Super quick introduction to html5
Super quick introduction to html5Super quick introduction to html5
Super quick introduction to html5
 
Mern stack developement
Mern stack developementMern stack developement
Mern stack developement
 
CDN implmentation consideration
CDN implmentation considerationCDN implmentation consideration
CDN implmentation consideration
 
Osdc - Meteor Intorduction
Osdc - Meteor IntorductionOsdc - Meteor Intorduction
Osdc - Meteor Intorduction
 
Adobe AEM for Business Heads
Adobe AEM for Business HeadsAdobe AEM for Business Heads
Adobe AEM for Business Heads
 
Introduction to maya
Introduction to mayaIntroduction to maya
Introduction to maya
 
Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5
 
Nginx caching
Nginx cachingNginx caching
Nginx caching
 
Building your first MEAN application
Building your first MEAN applicationBuilding your first MEAN application
Building your first MEAN application
 
NoSQL Database in .NET Apps
NoSQL Database in .NET AppsNoSQL Database in .NET Apps
NoSQL Database in .NET Apps
 
Mean stack
Mean stackMean stack
Mean stack
 

Ähnlich wie Vue - the Progressive Framework

Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO Devs
WO Community
 
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvpZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
Chalermpon Areepong
 

Ähnlich wie Vue - the Progressive Framework (20)

Let's vue
Let's vueLet's vue
Let's vue
 
Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO Devs
 
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvpZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
 
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
ZZ BC#7.5 asp.net mvc practice  and guideline refresh! ZZ BC#7.5 asp.net mvc practice  and guideline refresh!
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
 
Maven: Managing Software Projects for Repeatable Results
Maven: Managing Software Projects for Repeatable ResultsMaven: Managing Software Projects for Repeatable Results
Maven: Managing Software Projects for Repeatable Results
 
CA Harvest "Private Solutions - State of New Hampshire
CA Harvest "Private Solutions - State of New HampshireCA Harvest "Private Solutions - State of New Hampshire
CA Harvest "Private Solutions - State of New Hampshire
 
Introduction to maven, its configuration, lifecycle and relationship to JS world
Introduction to maven, its configuration, lifecycle and relationship to JS worldIntroduction to maven, its configuration, lifecycle and relationship to JS world
Introduction to maven, its configuration, lifecycle and relationship to JS world
 
Extending Build to the Client: A Maven User's Guide to Grunt.js
Extending Build to the Client: A Maven User's Guide to Grunt.jsExtending Build to the Client: A Maven User's Guide to Grunt.js
Extending Build to the Client: A Maven User's Guide to Grunt.js
 
Introduction to Maven
Introduction to MavenIntroduction to Maven
Introduction to Maven
 
Maven – The build paraphernalia
Maven – The build paraphernaliaMaven – The build paraphernalia
Maven – The build paraphernalia
 
Maven
MavenMaven
Maven
 
Maven
MavenMaven
Maven
 
BackboneJS
BackboneJSBackboneJS
BackboneJS
 
Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform Apps
 
Vue.js
Vue.jsVue.js
Vue.js
 
Maven in mulesoft
Maven in mulesoftMaven in mulesoft
Maven in mulesoft
 
Short-Training asp.net vNext
Short-Training asp.net vNextShort-Training asp.net vNext
Short-Training asp.net vNext
 
IBM Digital Experience Theme Customization
IBM Digital Experience Theme CustomizationIBM Digital Experience Theme Customization
IBM Digital Experience Theme Customization
 
(Re)-Introduction to Maven
(Re)-Introduction to Maven(Re)-Introduction to Maven
(Re)-Introduction to Maven
 
Maven introduction in Mule
Maven introduction in MuleMaven introduction in Mule
Maven introduction in Mule
 

Mehr von myposter GmbH

Mehr von myposter GmbH (10)

Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter
Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposterConcepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter
Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter
 
Clean(er) Code - Tech'n'Drinks @myposter
Clean(er) Code - Tech'n'Drinks @myposterClean(er) Code - Tech'n'Drinks @myposter
Clean(er) Code - Tech'n'Drinks @myposter
 
ReRxSwift
ReRxSwiftReRxSwift
ReRxSwift
 
Vue - State Transitions
Vue - State TransitionsVue - State Transitions
Vue - State Transitions
 
Vue - Composing Components
Vue - Composing ComponentsVue - Composing Components
Vue - Composing Components
 
Microservices - Do one thing well
Microservices - Do one thing wellMicroservices - Do one thing well
Microservices - Do one thing well
 
Optimising Image Loading
Optimising Image LoadingOptimising Image Loading
Optimising Image Loading
 
Warum Affen die besseren Softwaretester sind
Warum Affen die besseren Softwaretester sindWarum Affen die besseren Softwaretester sind
Warum Affen die besseren Softwaretester sind
 
Reactive x
Reactive xReactive x
Reactive x
 
How Browsers Work
How Browsers Work How Browsers Work
How Browsers Work
 

Kürzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Kürzlich hochgeladen (20)

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 

Vue - the Progressive Framework