JSFiddle - React, Tailwind, and code Playground

by ClaudeSeo

HTML

<div id="app">
  <p>{{message}}</p>
  <input v-typing="message">
</div>

JavaScript

Vue.directive('typing', {
  bind: function (el, binding, vnode) {
    var expression = binding.expression
    el.value = vnode.context[expression]
    el.addEventListener('input', function (e) {
        vnode.context[expression] = e.target.value
    })
  }
})

new Vue({
	el: '#app',
  data: {
  	message: '안녕하세요'
  }
})