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

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