exploring vuejs - developermarch · how does vue stack up? github stars + forks 37k+ 112k+ 115k+...
TRANSCRIPT
![Page 1: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/1.jpg)
![Page 3: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/3.jpg)
![Page 4: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/4.jpg)
![Page 5: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/5.jpg)
WHY (YET) ANOTHER JS
FRAMEWORK?
![Page 11: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/11.jpg)
HOW DOES VUE STACK UP?
![Page 12: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/12.jpg)
HOW DOES VUE STACK UP?Github Stars + Forks 37k+ 112k+ 115k+
Component Architecture Yes Yes Yes
Learning Curve High Moderate Moderate
Recommended Language Typescript JS, JSK JS, Vue
Architecture Flexibility No Yes Yes
Rendering Speed Slow (improving) Fast Fast
Most Known Architecture MVC Flux Flux
CLI Yes Not Officially Yes
Documentation Good Moderate Good
Best Attraction Oldest Framework Virtual DOM Best of Angular & React
https://vuejs.org/v2/guide/comparison.html
![Page 13: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/13.jpg)
WORLDWIDE INTEREST IN JS FRAMEWORKS
![Page 14: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/14.jpg)
LET’S BUILD SOMETHING
![Page 15: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/15.jpg)
VUEJS
CORE
BENEFITS
Approachable
VersitilePerformant
![Page 16: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/16.jpg)
![Page 17: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/17.jpg)
![Page 18: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/18.jpg)
![Page 19: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/19.jpg)
VUEJS
CORE
BENEFITS
Approachable
VersitilePerformant
![Page 20: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/20.jpg)
TEMPLATES IN VUEJS
![Page 21: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/21.jpg)
BASIC INTERPOLATION
<ul>
<li v-for="city in cities">
{{ greeting }} {{ city }}
</li>
</ul>
![Page 22: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/22.jpg)
BASIC INTERPOLATION (ONE-TIME)
<ul v-once>
<li v-for="city in cities" >
{{ greeting }} {{ city }}
</li>
</ul>
![Page 23: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/23.jpg)
BASIC INTERPOLATION (ONE-TIME)
<ul v-once>
<li v-for="city in cities" >
{{ greeting }} {{ city }}
</li>
</ul>
![Page 24: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/24.jpg)
THIS WON’T WORK
<select name=“foo”>
<option v-for="city in cities" value=“{city.id}”>
{{ city.name }}
</li>
</ul>
![Page 25: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/25.jpg)
ATTRIBUTE BINDING
<select name=“foo”>
<option v-for="city in cities" v-bind:value=“city.id”>
{{ city.name }}
</li>
</ul>
![Page 26: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/26.jpg)
ATTRIBUTE BINDING – SPECIAL CASE
<div class="static"
v-bind:class="{ active: isActive, 'text-danger':
hasError }">
</div>
data: {
isActive: true,
hasError: false
}
![Page 27: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/27.jpg)
STYLE BINDING – OBJECT NOTATION
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
![Page 28: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/28.jpg)
SIMPLE EXPRESSIONS
<ul>
<li v-for="city in cities">
{{ greeting }} {{ city.isInTown ? city.name :
“airport” }}
</li>
</ul>
![Page 29: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/29.jpg)
COMPLEX EXPRESSIONS (GETTER)
const world = new Vue({
el: '#FirstComponent',
data: {
…
},
computed: {
complexComputedProperty: function() {
//logic for computed getter
}
}
})
![Page 30: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/30.jpg)
COMPLEX EXPRESSIONS (METHOD)
const world = new Vue({
el: '#FirstComponent',
data: {
…
},
method: {
complexComputedProperty: function() {
//logic for computed getter
}
}
})
![Page 31: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/31.jpg)
COMPLEX EXPRESSIONS (SETTER)computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
![Page 32: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/32.jpg)
COMPLEX EXPRESSIONS (METHOD)
const world = new Vue({
el: '#FirstComponent',
data: {
…
},
method: {
complexComputedProperty: function() {
//logic for computed getter
}
}
})
![Page 33: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/33.jpg)
EVENT HANDLING
![Page 34: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/34.jpg)
EVENT HANDLING
<div id=“FirstComponent”>
<button v-on:click=“greet(city, $event)”>
Greet
</button>
a
…
methods: {
greet: function(message){
alert(message);
}
},
…
![Page 35: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/35.jpg)
EVENT MODIFIERS
.stop
.prevent
.capture
.self
.once
.passive
![Page 36: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/36.jpg)
EVENT MODIFIERS
!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form v-on:submit.prevent></form>
<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here
before being handled by that element -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element
itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a><!-- the scroll event's
default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to
complete -->
<!-- in case it contains `event.preventDefault()`
-->
<div v-on:scroll.passive="onScroll">...</div>
![Page 37: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/37.jpg)
WHY LISTENERS?
Easier to locate handlers by skimming the
template
Viewmodel is pure logic – easier to test
Listeners are automatically cleaned up
![Page 38: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/38.jpg)
A NEAT LITTLE PACKAGE
![Page 39: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/39.jpg)
A NEAT PACKAGE
Container Element
Data Properties
Methods
Computed Getters/Setters
Lifecycle hooks
Watch callbacks
Transitions
Template
Styles
![Page 40: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/40.jpg)
COMPONENTS
![Page 41: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/41.jpg)
ES6/VUE SINGLE FILE COMPONENTS
![Page 42: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/42.jpg)
DISADVANTAGES OF GLOBAL
COMPONENTS
Global Definitions
String Templates
No CSS Support
No Build Step
![Page 43: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/43.jpg)
DISADVANTAGES OF GLOBAL
COMPONENTS
Global Definitions
String Templates
No CSS Support
No Build Step
![Page 44: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/44.jpg)
SINGLE FILE VUE
COMPONENT
<template>
<div class=“hello”>
<h1>{{message}}</h1>
</div>
</template>
<script>
Export default {
name: ‘helloWorld’,
data () { return { message: ‘hi
boston’ } }
}
</script>
<style scoped>
.hello {
color:#00EE00;
}
</style>
![Page 45: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/45.jpg)
ONE FILE – ONE
COMPONENT
Template -tag
Script – tag
Style –tag
![Page 46: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/46.jpg)
WHAT ABOUT
SEPARATION OF
CONCERNS?
![Page 47: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/47.jpg)
USING CHILD COMPONENTS
Import child component
Register it with the parent component
![Page 48: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/48.jpg)
IMPORTED CHILD
COMPONENT
<template>
<div class=“hello”>
<h1>{{message}}</h1>
<example></example>
</div>
</template>
<script>
import Example from ‘./example.vue’
export default {
name: ‘helloWorld’,
data () { return { message: ‘hi boston’ } }
components: {
Example
}
}
</script>
<style scoped>
…
</style>
![Page 49: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/49.jpg)
WHERE TO GO FROM HERE
Vuex
Vue-Router/SPAs
CLI
Transitions
Unit Testing
![Page 50: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/50.jpg)
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Power
Responsibility
![Page 52: Exploring VueJS - DeveloperMarch · HOW DOES VUE STACK UP? Github Stars + Forks 37k+ 112k+ 115k+ Component Architecture Yes Yes Yes Learning Curve High Moderate Moderate Recommended](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96d8e29b5bf24ca2edfcb/html5/thumbnails/52.jpg)