new Vue()
beyond just an ordinary UI component
My first contact with Vue - Vuelidate
How to make the most out of Vue?
Basic validation
Input state
Valid
invalid
Validation rules
A function of state
<template>
<input v-model="name">
<div v-if="nameIsInvalid">
Name is required
</div>
</template>
<script>
export default {
data () {
return { name: '' }
},
computed: {
nameIsInvalid () {
return this.name.length === 0
}
}
}
</script>Pure function of state - Computed value
Pure function of state - Computed value
const vm = new Vue({
data: { name: '' },
computed: {
nameIsInvalid () {
return this.name.length === 0
}
}
})
console.log(vm.nameIsValid) // false
vm.name = 'Frizi'
console.log(vm.nameIsValid) // true
Instance is a data store
const store = new Vue({
data: { count: 0 },
methods: {
increment () {
this.count++
}
},
computed: {
evenOrOdd () {
return this.count % 2 === 0 ? 'even' : 'odd'
}
}
})
console.log(store.evenOrOdd) // 'even'
store.incremement()
console.log(store.evenOrOdd) // 'odd'
Methods = Actions / Mutations
Computed = Getters
Vuex does exactly that
vuejs/vuex : src/store.js
// vuejs/vuex : src/store.js:210
// bind store public getters
store.getters = {}
const wrappedGetters = store._wrappedGetters
const computed = {}
forEachValue(wrappedGetters, (fn, key) => {
// use computed to leverage its lazy-caching mechanism
computed[key] = () => fn(store)
Object.defineProperty(store.getters, key, {
get: () => store._vm[key],
enumerable: true // for local getters
})
})
const vm = new Vue({
data: {
name: '',
surname: '',
address: '',
email: '',
password: '',
repeatPassword: ''
},
computed: {
nameIsValid () { return this.name.length > 0 },
surnameIsValid () { return this.surname.length > 0 },
addressIsValid () { return this.address.length > 0 },
emailIsValid () { return this.email.indexOf('@') > 0 },
passwordIsValid () { return this.password.length > 0 },
repeatPasswordIsValid () { return this.repeatPassword === this.password },
formIsValid () {
return this.nameIsValid &&
this.surnameIsValid &&
this.addressIsValid &&
this.emailIsValid &&
this.passwordIsValid &&
this.repeatPasswordIsValid
}
}
})Computed validations - messy
export default {
data () {
return {
name: '',
age: 0
}
},
validations: {
name: {
required,
minLength: minLength(4)
},
age: {
between: between(20, 30)
}
}
}Starting from the API
Instance can be extended
Vue.mixin({
beforeCreate () {
const validations = this.$options.validations
if (validations) {
options.computed.$v = () =>
this._vuelidate.refs.$v.proxy
}
}
})
Every vue instance
...with a custom option...
...will have a $v property.
Still, safe for custom options
with great power comes great responsibility
Yay, Vuelidate is complete!
But there is more to Vue than that
So, Where is the UI?
Virtual DOM Diffing
Find and apply the difference, preserve the state
Every instance has its own tree
Render is on $mount
const vm = new Vue({
render (h) {
return h('div')
}
}).$mount( '<???>' )
Highly platform dependent
SSR Code will break on $mount
Events
v-on:click="doStuff"Instance is an event bus
const bus = new Vue()
bus.$on('stuffHappened', () =>
console.log('hooray, stuff!'))
bus.$emit('stuffHappened') // 'hooray, stuff!'
Dependency tracking
data: {
name: 'John',
surname: 'Doe'
}
computed: {
fullName () {
return this.name +
' ' +
this.surname
}
}<div>{{ fullName }}</div>watch: {
surname: () => ...
}Dependency tracking
this.name = 'Jane'
Elegance comes from being as beautiful inside as outside
- CoCo Chanel
Vue is designed to be more than just UI
frizi09@gmail.com | @frizi09
Paweł Grabarz
github.com/frizi
Thank You
new Vue()
By Pawel Grabarz
