v-model 表单输入绑定 自我学习教程

前言和概念

在表单输入或者选择元素上例如input，select，textarea 添加上，看上去html 标签属性的东西 v-model，在vue中叫指令，就构成了 表单的双向数据绑定，即在输入的时候js同时也获取了到数据，改变js数据的时候input的内容也会随着改变。这个就是v-model 成为vue中比较核心的特点之一

vue文档解释其实这是一个语法糖，相当于包装了一个写起来不太舒服语法，后面试着解释

文章说明本章主要记录

1. v-model 基础使用
2. v-model 语法糖的解释
3. v-model 在组件的使用
4. v-model 实现数据双向绑定

其他说明
文章内容基于webpack打包实现，单文件组件 可以参考基础打包《webpack 之vue 初级打包》
vue 版本基于2.x 因为 3.x据说 v-model的原理改为proxy模式，具体还没看

基础使用

在表单元素中加入指令 v-model,这时候vue会自动忽略 表单的一些属性，对于初学者，这个规则比较重要，因为如属性 value、checked、selected attribute，给他们加上值，并不会得到得到期待的那这样

示例：

<input value="我是一个值" v-model= 'inputValue'/>
data() {
   
    return {
   
      inputValue:'木子聊前端'
    }
  }

给 input 加上的value属性值并不会起作用，最后在运行的时候变成了如下情况

因此在使用v-model双向绑定的时候 不需要加入属性，没有作用还容易造成开发干扰，vue讲究数据驱动，把所有需要的值都放到data里面渲染

但是并不是所有的属性都不需要，v-model 需要依据property 判断事件的时候 属性就不能省掉，那么什么时候需要加什么属性，其实记住一个就行，type属性，在input标签中如果不加type属性值，默认是text; input 标签需要type确定最终的类型，v-model同样需要，最终作出不同的选择比如：

text 、textarea 元素使用 value input 事件；
checkbox 、radio 使用 checked property 和 change 事件；
select 的 change 事件。

复选框操作
因为checked 属性不起作用，因此我们要对复选框操作就通过data来实现，选中还是为选中对操作

<input type="checkbox" v-model= 'ckbox'/>
return {
   
  ckbox