vue-bidirectional binding: From HTML to template to render function

In Vue, you can use V-model syntax sugar to implement two-way binding of data, such as:

<DivID= "App">     <inputtype= "text"V-model= "id"placeholder= "Please enter your ID"     />     <P>Your ID is: {{id | formatid}}</P></Div>

function () {        vue.filter(function(v) {        return V.length < 10 && v.length > 0? V.padstart (0 '): v;    });     New Vue ({        ' #app ',        data: {            '        }    });

But sometimes we might want to do it with a template, and that's the case:

<id= "app">     <: id= "id" ></ My-ele > </ Div >

Window.onload =function() {vue.component (' My-ele ', {Template: '<div> <input type= "text" v-model= "id"/> <p>you ID: {{id | formatid}}</p> </div>', props: [' ID ']    }); Vue.filter (' FormatID ',function(v) {returnV.length < && v.length > 0? V.padstart (10, ' 0 '): v;    }); NewVue ({el:' #app ', data: {ID:‘‘        }    });};

So far, the problem is that sometimes we need to use the render () function to implement:

<id= "app">       <My-ele        : Val-par  = "id"        @input-par= "Id=arguments[0]"       ></  My-ele></div>

Window.onload =function() {vue.component (' My-ele ', {render (createelement) { let self= This; Let input= createelement (' input ', {domprops: {type:' Text ', placeholder:' Please enter your ID ', Value: This. Valpar,}, on: {input (E) {. $emit (' Input-par ', E.target.value);            }                }            }); Let P= createelement (' P ', {props: {ID: This. Valpar}},' Your ID is: ' + This. FormatID ( This. Valpar)); returncreateelement (' div ', [Input, p]); }, props: [' Valpar '], methods: {FormatID (v) {returnV.length < && v.length > 0? V.padstart (10, ' 0 '): v;    }        }    }); NewVue ({el:' #app ', data: {ID:‘‘        }    });};

Main note two points:

1. The two-way binding of value is set at domprops instead of props
2. The filter has been implemented by itself and cannot be used Vue.filter

Reference Documentation:

https://cn.vuejs.org/v2/guide/render-function.html# Deep-data-Objects

vue-bidirectional binding: From HTML to template to render function