v-model -- 双向数据绑定 · Vue&&TypeSprict--基础总结

[TOC] >[success] # v-model 双向数据绑定 ~~~ 1.v-model:在表单元素上创建双向数据绑定，也就是说只能运用在表单元素中，常见表单元素:'input(radio, text, address, email....)' /'select'/ 'checkbox'/ 'textarea'，这句话目前是这样的当组件传值的时候就不是绝对的 2.会根据控件类型自动选取正确的方法来更新元素交互的值 3.负责监听用户的输入事件以更新数据：数据 <--> 页面 4.尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 5.修饰符<input type="text" v-model.lazy="name" /> .lazy :失去焦点同步一次 .number :格式化数字 .trim : 去除首尾空格 ~~~ >[info] ## 使用v-model 注意点 ~~~ 1.用官网的话说：'v-model' 会忽略所有表单元素的 'value'、'checked'、'selected' 特性的初始值，简单的说也就是使用v-model进行双绑定的时候,不要已经使用了 'v-model'，还要使用'v-bind:value这种错误'<input v-model="msg" v-bind:value="msg">'。注：这里同时使用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.多个复选框，绑定到同一个数组 ~~~ * 第二条的解释，输入法没有同步 ![](https://box.kancloud.cn/09b58a1ec22c28992ec2a222c7b69d82_228x131.png) >[danger] ##### input 输入框案例 ![](https://box.kancloud.cn/882269ab50dc08b67a43da2c0540e354_310x38.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="msg" > {{msg}}长度{{msg.length}} </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg:"我是" }, }); </script> </body> </html> ~~~ >[danger] ##### checked -- 多选框(用数组接收) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> 爱好 <br> 足球<input name="text" v-model="msg" type="checkbox" value="foot"> 篮球<input name="text" v-model="msg" type="checkbox" value="bask"> {{msg}} </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg:[] }, }); </script> </body> </html> ~~~ >[danger] ##### select --下拉 ![](https://box.kancloud.cn/aa63e6338225a2cb4fc69b0efcb4a7f4_229x105.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] }, }); </script> </body> </html> ~~~ >[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 :失去焦点同步一次 '<input v-model.lazy ="msg" >' ~~~ ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-on:input="inputHandle" :value='message' /> {{message}} </div> <script> var message = 'hello'; var vm = new Vue({ el: '#app', data: { message, // messgae: message message1: '' // messgae: message }, methods: { inputHandle(ev) { console.log(ev) // v-bind 是通过js 给页面展示改变 // 因此要想有v-model 双向改变需要改变v-bind这层的绑定值 this.message = ev.target.value } } }) </script> </body> </html> ~~~