由于綁定了v-model,我們對(duì)message進(jìn)行修改會(huì)反應(yīng)到頁(yè)面上。怎么對(duì)message進(jìn)行修改？需要一個(gè)按鈕button
這是第一步虚茶，改message，ui會(huì)自動(dòng)變化仇参，如果用戶改input嘹叫，message會(huì)自動(dòng)變化
這就是雙向綁定，改內(nèi)存诈乒，頁(yè)面自動(dòng)變化罩扇，改頁(yè)面，內(nèi)存自動(dòng)變化
<template>
<div id="app">
<input v-model="message" placeholder="edit me"/>
<p>message is: {{ message}}</p>
<p><button @click = "message = 'frank'">set message to zhang</button></p>
</div>
</template>
<script>
export default {
name: 'App',
data(){//需要在data里聲明message怕磨，因?yàn)榻壎藇-model
return {
message: 'hi'//每個(gè)input都有對(duì)應(yīng)變量
}
},
components: {
}
}
</script>
2.多行文本
把input改成textarea
3.復(fù)選框
不需要添加id喂饥，id是給label加for。有經(jīng)驗(yàn)前端用label標(biāo)簽包裹肠鲫，保住之后點(diǎn)擊label里的任何相當(dāng)于點(diǎn)擊input
<template>
<div id="app">
<label>
<input type="checkbox" v-model="x" />
<span>x:{{ x }}</span>
</label>
</div>
</template>
<script>
export default {
name: 'App',
data(){//需要在data里聲明message仰泻，因?yàn)榻壎藇-model
return {
x: true//每個(gè)input都有對(duì)應(yīng)變量 選中是true，沒選是false注意單引號(hào)
};
},
components: {}
};
</script>
4.多個(gè)復(fù)選框
三個(gè)v-model的value沒有區(qū)別
數(shù)據(jù)庫(kù)如果要存數(shù)字,用冒號(hào)綁定
<input type ="checkbox" v-model="x" :value="1">
5.單選按鈕radio
<template>
<div id="app">
你想要：{{x}}
<hr/>
<select v-model="x">
<option value>-</option>
<option v-for="item in array"
:value="item.value" :key="item.value">{{item.text}}</option>
</select>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
array:[
{ text: "抽鹽",value:1},
{text: "hejiu",value:2}
],
x:""http://多選的話就是數(shù)組：[]
};
},
components: {}
};
</script>
6.from表單
提交元素 要寫一個(gè)登陸框滩届，第一行用戶名
回車時(shí)刷新集侯，用form標(biāo)簽，里面有登陸按鈕button
不想頁(yè)面刷新帜消，想保存數(shù)據(jù)棠枉，監(jiān)聽@submit=onSubmit
阻止默認(rèn)動(dòng)作@submit.prevent="onSubmit"
如果不會(huì)用form的前端開發(fā)著，就是監(jiān)聽input
V-MODEL 12min
原理
一個(gè)組件上的v-model默認(rèn)會(huì)利用名為value的props和名為input的事件泡挺，但是像單選框復(fù)選框等類型的輸入控件可能會(huì)將valueattribute用于不同目的辈讶，model選項(xiàng)可以用來避免這樣沖突
v-model相當(dāng)于寫兩件事情
1.:value="user.username"
2.監(jiān)聽組件的事件,獲取他的值@input="user.username = $event.target.value"這是#model等價(jià)寫法#
model默認(rèn)input是一個(gè)元素，event是一個(gè)原生event娄猫。綁定value等于一個(gè)東西贱除，然后@input讓東西等于$event.target.value
myinput封裝
1.input怎么觸發(fā)事件生闲，用戶在修改的時(shí)候，必須在input上綁定得到value月幌，當(dāng)input變化的時(shí)候碍讯，不能直接改value的值因?yàn)檫€要觸發(fā)個(gè)input事件
2.所以@input="onInput"，當(dāng)input觸發(fā)了oninput后扯躺，就再次觸發(fā)input捉兴，包裝一個(gè)有target.value的event，如圖
methods: {
onInput(e){
const event = {
target:{value:e.target.value}
};
this.$emit("input", event);
}
}
必須觸發(fā)input事件录语，event中必須含有target倍啥，里面必須有value，value的值必須是最新的值
自定義的組件不需要構(gòu)建target
methods: {
onInput(e){
const value = e.target.value;
this.$emit("input",value);a
}
}
注意：
在myinput.vue里澎埠，input標(biāo)簽不要寫成<input v-model="value"/>
規(guī)范寫法：這樣少寫個(gè)methods
<input :value="value" @input="$emit('input',$event.target.value)">
原因：相當(dāng)于<input :value="value" @input="value = $event.target.value"/>會(huì)對(duì)value進(jìn)行賦值虽缕，當(dāng)然不能對(duì)props里的value修改賦值
解決方法computed里_value對(duì)上面value進(jìn)行封裝
computed:{
_value:{
get(){ return this.value},
set(newValue){this.$emit("input",newValue);}
}
}
input標(biāo)簽改寫成
<input :value="_value" @input="_value = $event.target.value"/>
上文還可以簡(jiǎn)寫成
<input v-model="_value" />
多聲明一個(gè)"_value"比較麻煩，簡(jiǎn)單方法寫成mixin把所有需要封裝的放進(jìn)mixin里
面試題 v-model的雙向綁定
1.解釋下v-model的作用蒲稳，
原理
一個(gè)組件上的v-model默認(rèn)會(huì)利用名為value的props和名為input的事件彼宠，但是像單選框復(fù)選框等類型的輸入控件可能會(huì)將valueattribute用于不同目的，model選項(xiàng)可以用來避免這樣沖突
v-model相當(dāng)于寫兩件事情
1.:value="user.username"
2.監(jiān)聽組件的事件,獲取他的值@input="user.username $event.target.value"這是model等價(jià)寫法
model默認(rèn)input是一個(gè)元素弟塞，event是一個(gè)原生event凭峡。綁定value等于一個(gè)東西，然后@input讓東西等于$event.target.value可以實(shí)現(xiàn)綁定一個(gè)變量决记，在變量變化的時(shí)候摧冀，ui變化。用戶改變ui的時(shí)候系宫，數(shù)據(jù)也會(huì)變化
2.v-model是v-bind:value和v-on:input的語法糖
v-on:input="???"分兩種情況
原生input就是"xxx=$event.target.value"
自定義組件："xxx=$event"
