Vue 2.0 Hello World

by Evert Ramos

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <postal-code-input></postal-code-input>
</div>

CSS

input {
  font-size: 22px;
  padding: .25em .5em;
}

JavaScript

Vue.component('postal-code-input', {
	template: '<input ref="input" @input="updateValue($event.target.value)" placeholder="A1A 1A1">',
  methods: {
  updateValue(value) {
    const stripped = value.replace(/\s/g, '')
    const transformed = `${stripped.substr(0, 3)} ${stripped.substr(3, 3)}`.trim().toUpperCase()
    this.previousValue = this.$refs.input.value = transformed
    this.$emit('input', transformed)
  }
}
})

new Vue({
  el: '#app',
})