v-model原理

当我们和v-model朝夕相伴的时候,都知道是双向绑定数据,又是否知其原,晓其理呢?

v-model 实际上是语法糖其构造过程是这样的

<input v-modle="inpValue">
//相当于
<input :value = "inpValue" @input="fn">
<script>
export default {
data (){
return{
  inpValue=''
 }
}
  methods:{
fn(e){
    inpValue=e.target.value
  }
 }
}
</script>

input属性绑定--inpValue 变量,也就是将值传给input
input事件.该事件在input的值inpValue被改变时触发,事件触发时给inpValue重新赋值,所赋的值是 e.target.value,也就是当当前触发input事件对象的dom的value的值,也就是该input的值

这也就完成了v-model的数据双向绑定

我们会发现elementUI的所有自定义组件都适用v-model这一语法糖，除了input之外，select、textarea也用到这一语法糖。

text和textarea元素：v-model使用value属性设置初始值并绑定变量，input事件更新值；

checkbox和radio元素：v-model使用checked属性设置初始值并绑定变量，change事件更新值；
select元素：v-model使用value属性设置初始值并绑定变量，change事件更新值；

比如checkbox：

// v-model
<input type="checkbox" v-model="checkedValue">
// 实际上
<input
  type="checkbox" 
  :value="checkedValue" 
  @change="checkedValue = $event.target.value" 
/>

v-model 是咋样的?

v-model原理