如何在vue中使用v-model指令進(jìn)行數(shù)據(jù)綁定?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名注冊(cè)、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、坊子網(wǎng)站維護(hù)、網(wǎng)站推廣。先來(lái)一個(gè)組件,不用vue-model,正常父子通信
我是父親, 對(duì)兒子說(shuō): {{sthGiveChild}}
我是兒子,父親對(duì)我說(shuō): {{give}}
回應(yīng)
點(diǎn)擊回應(yīng)后,父親對(duì)兒子說(shuō)的話變成了兒子的回應(yīng)。兒子收到的信息也變了,實(shí)現(xiàn)通信。
改用v-model
我是父親, 對(duì)兒子說(shuō): {{sthGiveChild}}
我是兒子,父親對(duì)我說(shuō): {{give}}
回應(yīng)
文案雖有不同,但是效果最終是一致的。
看看官方自定義組件的v-model
官方例子https://vuefe.cn/v2/api/#model
有這么一句話: 默認(rèn)情況下,一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event。
嘗試把上邊子組件的例子改一下,也是跑的通的
我是兒子,父親對(duì)我說(shuō): {{value}}
回應(yīng)
做一下總結(jié):
如果你懶,不想自己去處理事件,那就用默認(rèn)的 'value' && 'input' 事件去處理,如果用原生事件的,甚至連model屬性也可以省去。
如果你想自己的代碼比較明確,區(qū)分出自定義事件,那么下面的組合才是你的菜。
prop和event看你自己心情定義,當(dāng)然要知名見意【盡量避開關(guān)鍵字】
model: { prop: 'someProp', // 注意,是prop,不帶s。我在寫這個(gè)速記的時(shí)候,多寫了一個(gè)s,調(diào)試到懷疑人生 event: 'someEvent' } this.$emit('someProp', [returnValueToParent])vue是什么
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫(kù)只關(guān)注視圖層,方便與第三方庫(kù)和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。
關(guān)于如何在vue中使用v-model指令進(jìn)行數(shù)據(jù)綁定問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。