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> ~~~