26 - 实现简易版`v-model`指令

[kalu5]

// 你的答案
<script setup lang='ts'>

import { ref } from "vue"

/**
 * Implement a custom directive
 * Create a two-way binding on a form input element
 *
*/
const VOhModel = {
  mounted (el: Event, binding: object) {
    el.value = binding.value
    el.onChange = function (e: Event) {
      value.value = e.target.value
    }
    el.addEventListener('input', el.onChange, false)
  },
  onmounted(el: Event) {
    el.removeEventListener('input', el.onChange, false)
  }
}

const value = ref("Hello Vue.js")

</script>

<template>
  <input v-oh-model="value" type="text" />
  <p>{{ value }}</p>
</template>