Vue

by ChangJoo Park

HTML

<div id="app">
  <div>
    {{ text }}
    <custom-input @update="onChanged" />
  </div>
</div>


<template id="custom-input">
  <div>
    <div>
      text: {{ text }}
    </div>
    <div>
      <button @click="changedCounter = 0">카운터 리셋  [[ {{changedCounter}} ]]</button>
    </div>
    <div>
      <input type="text" @input.lazy="onInput" ref="input" @keypress.stop.prevent.enter="onEnter">
    </div>
  </div>
</template>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const customInput = {
	template: '#custom-input',
  data () {
  	return {
    	text: '',
      lastCommit: {
      	length: -1,
        value: ''
      },
      changedCounter: 0
    }
  },
  methods: {
  	onInput (e) {
    	const selectionEnd = this.$refs.input.selectionEnd
      const text = e.target.value
			console.log('event -> ', new Date())
      
      if (this.lastCommit.length != selectionEnd ||
      	this.lastCommit.value != text) {
        	this.lastCommit = { length: selectionEnd, value: text }
          this.text = text
          this.changedCounter++
      }
      
			if (text === '') {
      this.changedCounter = 0
      }
    },
    onEnter () {
    	console.log('fire -> ', this.text)
    }
  }
}
new Vue({
  el: "#app",
  directives: {
  	korean: {
      update (e) {
      	console.log('hello world -> ', e)
      }
    }
  },
  components: {
  	'custom-input': customInput
  },
  methods: {
    onChanged (value) {
      console.log('변경됨 -> ', value)
    }
  }
})