create Vue component
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>
using myinput
</p>
<myinput v-model="sample"></myinput>
<myinput v-bind:value='sample' v-on:input="sample = $event.target.value"></myinput>
{{sample}}
<p> Using input</p>
<!-- use v-model -->
<input v-model='sample'>
<!-- use v-bind -->
<input v-bind:value='sample' v-on:input="sample = $event.target.value" >
<p>{{sample}}</p>
</div>
JavaScript
Vue.component('myinput', {
props: ['value'],
render: function(createElement) {
var self = this
return createElement("input", {
domProps: {
value: self.value
},
on: {
input: function(event) {
self.$emit("input", event.target.value)
}
}
})
}
})
new Vue({
el: '#app',
data: {
sample: "123"
}
})