vue.js v-model实现原理
在 vue.js 3中,通过 v-model 指令可以方便实现表单元素数据双向绑定。实现 v-model 指令元素并不神奇,本质上是一种语法糖。实现原理其实是 v-bind 和 v-on 这两个指令。
v-bind 指令会将表单元素的 value 属性与一个变量绑定,简写为 :属性名
v-on 指令会绑定 input 事件,在事件回调中重新为 value 属性绑定的变量赋值,简写为 @事件名
完整写法
<input type="text" v-bind:value="message" v-on:input="inputChange">
<h2>{
{ message }}</h2>
简洁写法
<input type="text" :value="message" @input="inputChange">
<h2>{
{ message }}</h2>
v-bind给value属性绑定message变量
v-on监听input事件,更新message变量的值