exploring vuejs - developermarch · how does vue stack up? github stars + forks 37k+ 112k+ 115k+...
TRANSCRIPT
WHY (YET) ANOTHER JS
FRAMEWORK?
HOW DOES VUE STACK UP?
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
WORLDWIDE INTEREST IN JS FRAMEWORKS
LET’S BUILD SOMETHING
VUEJS
CORE
BENEFITS
Approachable
VersitilePerformant
VUEJS
CORE
BENEFITS
Approachable
VersitilePerformant
TEMPLATES IN VUEJS
BASIC INTERPOLATION
<ul>
<li v-for="city in cities">
{{ greeting }} {{ city }}
</li>
</ul>
BASIC INTERPOLATION (ONE-TIME)
<ul v-once>
<li v-for="city in cities" >
{{ greeting }} {{ city }}
</li>
</ul>
BASIC INTERPOLATION (ONE-TIME)
<ul v-once>
<li v-for="city in cities" >
{{ greeting }} {{ city }}
</li>
</ul>
THIS WON’T WORK
<select name=“foo”>
<option v-for="city in cities" value=“{city.id}”>
{{ city.name }}
</li>
</ul>
ATTRIBUTE BINDING
<select name=“foo”>
<option v-for="city in cities" v-bind:value=“city.id”>
{{ city.name }}
</li>
</ul>
ATTRIBUTE BINDING – SPECIAL CASE
<div class="static"
v-bind:class="{ active: isActive, 'text-danger':
hasError }">
</div>
data: {
isActive: true,
hasError: false
}
STYLE BINDING – OBJECT NOTATION
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
SIMPLE EXPRESSIONS
<ul>
<li v-for="city in cities">
{{ greeting }} {{ city.isInTown ? city.name :
“airport” }}
</li>
</ul>
COMPLEX EXPRESSIONS (GETTER)
const world = new Vue({
el: '#FirstComponent',
data: {
…
},
computed: {
complexComputedProperty: function() {
//logic for computed getter
}
}
})
COMPLEX EXPRESSIONS (METHOD)
const world = new Vue({
el: '#FirstComponent',
data: {
…
},
method: {
complexComputedProperty: function() {
//logic for computed getter
}
}
})
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]
}
}
COMPLEX EXPRESSIONS (METHOD)
const world = new Vue({
el: '#FirstComponent',
data: {
…
},
method: {
complexComputedProperty: function() {
//logic for computed getter
}
}
})
EVENT HANDLING
EVENT HANDLING
<div id=“FirstComponent”>
<button v-on:click=“greet(city, $event)”>
Greet
</button>
a
…
methods: {
greet: function(message){
alert(message);
}
},
…
EVENT MODIFIERS
.stop
.prevent
.capture
.self
.once
.passive
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>
WHY LISTENERS?
Easier to locate handlers by skimming the
template
Viewmodel is pure logic – easier to test
Listeners are automatically cleaned up
A NEAT LITTLE PACKAGE
A NEAT PACKAGE
Container Element
Data Properties
Methods
Computed Getters/Setters
Lifecycle hooks
Watch callbacks
Transitions
Template
Styles
COMPONENTS
ES6/VUE SINGLE FILE COMPONENTS
DISADVANTAGES OF GLOBAL
COMPONENTS
Global Definitions
String Templates
No CSS Support
No Build Step
DISADVANTAGES OF GLOBAL
COMPONENTS
Global Definitions
String Templates
No CSS Support
No Build Step
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>
ONE FILE – ONE
COMPONENT
Template -tag
Script – tag
Style –tag
WHAT ABOUT
SEPARATION OF
CONCERNS?
USING CHILD COMPONENTS
Import child component
Register it with the parent component
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>
WHERE TO GO FROM HERE
Vuex
Vue-Router/SPAs
CLI
Transitions
Unit Testing
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Power
Responsibility
