v-model — 双向数据绑定

[TOC] >[success] # v-model 双向数据绑定 ~~~ 1.v-model:在表单元素上创建双向数据绑定，也就是说只能运用在 表单元素中， 常见表单元素:'input(radio, text, address, email....)' /'select'/ 'checkbox'/ 'textarea'， 这句话目前是这样的当组件传值的时候就不是绝对的 2.会根据控件类型自动选取正确的方法来更新元素交互的值 3.负责监听用户的输入事件以更新数据：数据 <--> 页面 4.尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件 以更新数据，并对一些极端场景进行一些特殊处理。 5.修饰符 .lazy :失去焦点同步一次 .number :格式化数字 .trim : 去除首尾空格 ~~~ >[info] ## 使用v-model 注意点 ~~~ 1.用官网的话说：'v-model' 会忽略所有表单元素的 'value'、'checked'、'selected' 特性的初始值，简单的说也就是使用v-model进行双绑定的时候,不要 已经使用了 'v-model'，还要使用'v-bind:value这种错误''。 注：这里同时使用vue 会给出一个警告: 'conflicts with v-model on the same element because the latter already expands to a value binding internally' 'v-bind与同一元素上的v-model冲突，因为后者已经扩展为内部的值绑定' 2.官方给的第二条提示:对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会 发现 'v-model' 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程， 请使用 input 事件。(具体意思我们靠下面的一张图片理解) 3.多个复选框，绑定到同一个数组 ~~~ * 第二条的解释，输入法没有同步  >[danger] ##### input 输入框案例  ~~~ ~~~ >[danger] ##### checked -- 多选框(用数组接收) ~~~ ~~~ >[danger] ##### select --下拉  ~~~ ~~~ >[info] ## 解答注意点二，构建一个伪v-model ~~~ 1.vue的v-model 其实和下面原理差不多了，只不过 1.1.text 和 textarea 元素使用'value'属性和'input'事件； 1.2.checkbox 和 radio 使用'checked'属性和'change'事件； 1.3.select 字段将'value'作为 prop 并将'change'作为事件。 2.下面的案例使用了监听input事件可以做到，监听到输入法输入时候的效果 3.有时候也可以使用.lazy :失去焦点同步一次 '' ~~~ ~~~ ~~~