1st.v-model指令的詳細(xì)用法
? ? 在表單標(biāo)簽中讨越，v-model雙向綁定的用法有所區(qū)別把跨。
首先在data中定義好數(shù)據(jù)：
data:?{
????????????????name:?"張三",
????????????????sex:?'男',
????????????????address:?'南京市?雨花臺區(qū)',
????????????????isOK:?true,
????????????????hobbies:?['睡覺',?'打游戲'],
????????????????city:"蘇州",
????????????????foods:['巧克力','西瓜','米飯']
????????????}
文本框：使用v-model-value（簡寫v-model）直接雙向綁定數(shù)據(jù)name
<p>文本框：<input?type="text"?v-model="name">?{{name}}</p>
單選框：使用v-model綁定sex值着逐，name屬性相同耸别，且同時(shí)綁定數(shù)據(jù)sex的單選框會用自己的value替換掉sex
<p>單選框：
????????????<input?type="radio"?v-model="sex"?name="sex"?value="男">男
????????????<input?type="radio"?v-model="sex"?name="sex"?value="女">女?
????????????{{sex}}
</p>
多行文本框：使用v-model-value（簡寫v-model）直接雙向綁定數(shù)據(jù)address
<p>多行文本框：<textarea?cols="30"?rows="5"?v-model="address"></textarea>?{{address}}</p>
單個(gè)復(fù)選框：單個(gè)復(fù)選框時(shí)秀姐，使用v-model綁定一個(gè)boolean屬性的數(shù)據(jù)省有，數(shù)據(jù)值為false時(shí)不選中，反之則選中
<p>單個(gè)復(fù)選框：<input?type="checkbox"?v-model="isOK">是否同意?{{isOK}}</p>
多個(gè)復(fù)選框：使用多個(gè)復(fù)選框時(shí)细移，使用v-model綁定一個(gè)數(shù)組，數(shù)組中的值和復(fù)選框的value相同時(shí)會選中復(fù)選框雪侥，當(dāng)用戶選中一個(gè)復(fù)選框時(shí)也會往數(shù)組里加入自身的value值
<p>多個(gè)復(fù)選框：
????????????<input?type="checkbox"?v-model="hobbies"?value="睡覺">睡覺
????????????<input?type="checkbox"?v-model="hobbies"?value="喝酒">喝酒
????????????<input?type="checkbox"?v-model="hobbies"?value="抽煙">抽煙
????????????<input?type="checkbox"?v-model="hobbies"?value="打游戲">打游戲
????????????<input?type="checkbox"?v-model="hobbies"?value="敲代碼">敲代碼
????????????<input?type="checkbox"?v-model="hobbies"?value="打球">打球
?????????????{{hobbies}}
</p>
選擇器：選擇器使用v-model綁定數(shù)據(jù)city city的值和選擇器中option的value值相同時(shí)會選擇相同的option速缨，當(dāng)選擇元素時(shí)會把city中的值修改成自身的value
<p>選擇器：
????????????<select?v-model="city">
????????????????<option?value="北京">北京</option>
????????????????<option?value="上海">上海</option>
????????????????<option?value="南京">南京</option>
????????????????<option?value="蘇州">蘇州</option>
????????????</select>
????????????{{city}}
</p>
復(fù)數(shù)選擇器：復(fù)數(shù)選擇器使用v-model綁定一個(gè)數(shù)組仿粹，數(shù)組中是值與value中的值對應(yīng)，數(shù)組中有則value對應(yīng)的選中
?<p>
????????????復(fù)數(shù)選擇器：
????????????<select?v-model="foods"?multiple>
????????????????<option?value="巧克力">巧克力</option>
????????????????<option?value="西瓜">西瓜</option>
????????????????<option?value="薯片">薯片</option>
????????????????<option?value="米飯">米飯</option>
????????????</select>
????????????{{foods}}
?</p>
2nd.?v-model的修飾符
.lazy
????在默認(rèn)情況下，v-model在每次input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步(除了上述輸入法組合文字時(shí))晌区⊥ㄕ辏可以添加lazy 修飾符,從而轉(zhuǎn)為在change事件之后進(jìn)行同步:
<!-- 在“change”時(shí)而非“input”時(shí)更新 -->
<input v-model.lazy="msg">
.number
????如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型昌罩，可以給?v-model?添加?number?修飾符,因?yàn)榧词乖?type="number"?時(shí)，HTML 輸入元素的值也總會返回字符串银伟。如果這個(gè)值無法被?parseFloat()?解析彤避，則會返回原始的值琉预。
<input v-model.number="age" type="number">
.trim
? ??如果要自動過濾用戶輸入的首尾空白字符圆米，可以給?v-model?添加?trim?修飾符：
<input v-model.trim="msg">
3rd.?綁定事件
?????v-on:指令用來綁定事件娄帖，簡寫為 @ 可以指定一個(gè)事件方法近速，事件方法要在methods里面定義。
指定事件方法時(shí)削葱，如果沒有給方法傳遞參數(shù)奖亚，默認(rèn)會傳遞一個(gè)事件對象參數(shù)
<button?@click="sayHi">sayHi</button>
如果我們傳遞了一個(gè)參數(shù)，還想再傳遞事件對象參數(shù)析砸，就要通過$event關(guān)鍵字設(shè)置：
<buttonv-on:click="sayHello('你好',$event)">Say Hello</button>
如果事件處理的邏輯比較簡單昔字，可以直接在行內(nèi)編寫：
?????????<button?@click="num--">-</button>
????????{{num}}
????????<button?@click.once="num++">+</button>
4rd.事件修飾符
????在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵首繁。Vue 允許為?v-on?在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
<!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
可以直接將?KeyboardEvent.key?暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來作為修飾符：
<input v-on:keyup.page-down="onPageDown">
為了在必要的情況下支持舊瀏覽器作郭，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：
.enter
.tab
.delete?(捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
5rd.深度響應(yīng)式
Vue 無法檢測 property 的添加或移除。由于 Vue 會在初始化實(shí)例時(shí)對 property 執(zhí)行 getter/setter 轉(zhuǎn)化蛮瞄，所以 property 必須在?data?對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的所坯。
對于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動態(tài)添加根級別的響應(yīng)式 property挂捅。但是闲先，可以使用?Vue.set(object, propertyName, value)?方法向嵌套對象添加響應(yīng)式 property。例如：
Vue.set(vm.someObject, 'b', 2)
您還可以使用?vm.$set?實(shí)例方法，這也是全局?Vue.set?方法的別名：
this.$set(this.someObject,'b',2)
用delete方法，刪除指定對象的屬性或數(shù)組的成員
?Vue.delete(this.obj,'age')
您還可以使用?vm.$delete實(shí)例方法午绳，這也是全局?Vue.delete方法的別名：
this.$delete(this.obj,'age')
//?針對數(shù)組赎败，只能通過以下方法，才能實(shí)現(xiàn)響應(yīng)式：push()?pop()?unshift()?shift()?splice()?reverse()?sort()
如果不使用以上方法若河，那么也可以使用set和delete方法
// 這里set方法的參數(shù)分別是：指定的數(shù)組鲫忍，數(shù)組的下標(biāo)，對應(yīng)的數(shù)據(jù)this.$set(this.arr,1,'蘋果')
// 這里的delete方法的參數(shù)分別是：指定的數(shù)組，數(shù)組的下標(biāo) this.$delete(this.arr,1)
