​v-model是Vue的一個(gè)指令，它提供了input和form數(shù)據(jù)之間或兩個(gè)組件之間的雙向數(shù)據(jù)綁定。

這在Vue開(kāi)發(fā)中是一個(gè)簡(jiǎn)單的概念，但是v-model的真正威力需要一些時(shí)間才能理解。

到本教程結(jié)束時(shí)，你將了解v-model的所有不同用例，并學(xué)習(xí)如何在自己的項(xiàng)目中使用它。

準(zhǔn)備好了嗎?

我也是。讓我們編寫(xiě)代碼。

什么是v-model?

正如我們剛才討論的，v-model是一個(gè)我們可以在模板代碼中使用的指令。指令是一個(gè)模板令牌，它告訴Vue我們想要如何處理DOM。

v-model告訴Vue我們想要在模板中的值和數(shù)據(jù)屬性中的值之間創(chuàng)建一個(gè)雙向數(shù)據(jù)綁定。

使用v-model的一個(gè)常見(jiàn)用例是在設(shè)計(jì)form和input時(shí)。我們可以使用它使DOM input元素能夠修改Vue實(shí)例中的數(shù)據(jù)。

讓我們看一個(gè)在文本輸入上使用v-model的簡(jiǎn)單示例。

<template> <div> <input type=’text’ v-model=’value’ /> <p> Value: {{ value }} </p> </div></template><script>export default { data() { return { value: ’Hello World’ } }}</script>

當(dāng)我們?cè)谖谋据斎胫休斎霑r(shí)，我們會(huì)看到我們的data屬性發(fā)生了變化。

v-model和v-bind的區(qū)別?

v-bind指令通常會(huì)與v-model切換。

兩者的區(qū)別在于v-model提供了雙向數(shù)據(jù)綁定。

在我們的例子中，這意味著如果我們的數(shù)據(jù)改變了，我們的輸入也會(huì)改變，如果我們的輸入改變了，我們的數(shù)據(jù)也會(huì)改變。

然而，v-bind只以一種方式綁定數(shù)據(jù)。

當(dāng)你在你的應(yīng)用中創(chuàng)建一個(gè)清晰的單向數(shù)據(jù)流時(shí)，這是非常有用的。但是，在v-model和v-bind之間選擇時(shí)必須小心。

v-model的修飾符

Vue提供了兩個(gè)修飾符，允許我們更改v-model的功能。

每一個(gè)都可以像這樣加起來(lái)，甚至可以連接在一起。

<input type=’text’ v-model.trim.lazy=’value’/>.lazy

默認(rèn)情況下，v-model在每個(gè)輸入事件上與Vue實(shí)例(數(shù)據(jù)屬性)的狀態(tài)同步。這包括得到，失去焦點(diǎn)等等。

lazy修飾符修改了我們的v-model，所以它只在更改事件之后同步。

這減少了v-model試圖與Vue實(shí)例同步的次數(shù)——在某些情況下，還可以提高性能。

.number

通常，我們的輸入將自動(dòng)將輸入轉(zhuǎn)為字符串—即使我們將輸入是數(shù)字。

確保將值作為數(shù)字處理的一種方法是使用. number修飾符。

根據(jù)Vue文檔，如果輸入發(fā)生變化，并且parseFloat()無(wú)法解析新值，那么將返回輸入的最后一個(gè)有效值。

<input type=’number’ v-model.number=’value’/>.trim

與大多數(shù)編程語(yǔ)言中的trim方法類(lèi)似，.trim修飾符在返回值之前刪除開(kāi)頭或結(jié)尾的空白。

在自定義組件中使用v-model

好了，現(xiàn)在我們已經(jīng)了解了form/input內(nèi)部的v-model的基本知識(shí)，讓我們看看v-model的一個(gè)有趣用法——在組件之間創(chuàng)建雙向數(shù)據(jù)綁定。

在Vue中，數(shù)據(jù)綁定有兩個(gè)主要步驟:

從父節(jié)點(diǎn)傳遞數(shù)據(jù)

從子組件發(fā)出事件以更新父組件

在自定義組件上使用v-model可以讓我們傳遞一個(gè)prop，用一個(gè)指令來(lái)處理一個(gè)事件。

<custom-text-input v-model='value' /><!-- IS THE SAME AS --><custom-text-input :modelValue='value' @update:modelValue='value = $event'/>

好吧，這到底是什么意思?

讓我們繼續(xù)使用v-model表單的例子，并使用名為CustomTextInput.vue的自定義文本輸入。

使用v-model傳遞的值的默認(rèn)名稱(chēng)是modelValue——我們將在示例中使用這個(gè)名稱(chēng)。

但是，我們可以像這樣傳遞一個(gè)定制的模型名稱(chēng)。

<custom-text-input v-model:name='value' />

注意:當(dāng)我們使用自定義模型名稱(chēng)時(shí)，所發(fā)出方法的名稱(chēng)將被更新:name

下面是來(lái)自Vue文檔的一張圖來(lái)總結(jié)它。

使用自定義組件中的v-model

我們已經(jīng)設(shè)置好了父組件，所以讓我們從子組件訪問(wèn)它。

在CustomTextInput.vue中，我們必須做兩件事:

接受我們的v-model值作為prop 當(dāng)我們的輸入發(fā)生變化時(shí)，觸發(fā)一個(gè)更新事件

好的——讓我們首先在腳本中聲明它是prop。

export default { props: { modelValue: String, }}

接下來(lái)，讓我們創(chuàng)建我們的模板，將值設(shè)置為modelValue prop，只要有輸入事件，我們就通過(guò)update:modelValue發(fā)出新值。

<template> <div> <label> First Name </label> <input type=’text’ placeholder=’Input’ :value=’modelValue’ @input=’$emit('update:modelValue', $event.target.value)’ /> </div></template>使用v-model

好吧!

我們已經(jīng)介紹了一個(gè)使用v-model在兩個(gè)組件之間綁定數(shù)據(jù)的基本示例。

讓我們看一些使用v-model指令的更高級(jí)的方法。

對(duì)一個(gè)組件多次使用v-model

v-model并不局限于每個(gè)組件只能使用一次。

要多次使用v-model，我們只需要確保為每個(gè)prop唯一命名，并在子組件中正確訪問(wèn)它。

讓我們?cè)趌astName中添加第二個(gè)v-model。

在我們的父組件中：

<template> <div> <custom-text-input v-model=’value’ v-model:lastName=’lastName’ /> <p> Value: {{ value }} </p> <p> Last Name: {{ lastName }} </p> </div></template><script>import CustomTextInput from ’./CustomTextInput.vue’export default { components: { CustomTextInput, }, data() { return { value: ’Matt’, lastName: ’Maribojoc’ } }}</script>

然后，在子組件內(nèi)部：

<template> <div> <label> First Name </label> <input type=’text’ :value=’modelValue’ placeholder=’Input’ @input=’$emit('update:modelValue', $event.target.value)’ /> <label> Last Name </label> <input type=’text’ :value=’lastName’ placeholder=’Input’ @input=’$emit('update:lastName', $event.target.value)’ /> </div></template><script>export default { props: { lastName: String, modelValue: String, }}</script>V-model的自定義修飾符

正如我們所討論的，Vue中內(nèi)置了一些修飾符。但總有一天，我們會(huì)想要添加我們自己的。

假設(shè)我們想要?jiǎng)?chuàng)建一個(gè)修飾符來(lái)刪除輸入中的所有空格。我們稱(chēng)之為無(wú)空格。

<custom-text-input v-model.no-whitespace=’value’ v-model:lastName=’lastName’/>

在我們的輸入組件中，我們可以使用prop來(lái)捕獲修飾符。自定義修飾符的名稱(chēng)是nameModifiers。

props: { lastName: String, modelValue: String, modelModifiers: { default: () => ({}) }}

好的，我們要做的第一件事是改變@input處理器來(lái)使用一個(gè)自定義方法。我們可以稱(chēng)它為emitValue，它將接受正在編輯的屬性和事件對(duì)象的名稱(chēng)。

<label> First Name </label><input type=’text’ :value=’modelValue’ placeholder=’Input’ @input=’emitValue('modelValue', $event)’/>

在emitValue方法中，在調(diào)用$emit之前，我們要檢查修飾符。如果no-whitespace修飾符為true，則可以在將其發(fā)送給父對(duì)象之前修改該值。

emitValue(propName, evt) { let val = evt.target.value if (this.modelModifiers[’no-whitespace’]) { val = val.replace(/s/g, ’’) } this.$emit(`update:${propName}`, val)}結(jié)論

希望你知道了一些有關(guān)v-model的新知識(shí)。

在它的基本用例(如表單和輸入數(shù)據(jù))中，v-model是一個(gè)非常簡(jiǎn)單的概念。然而，當(dāng)我們開(kāi)始創(chuàng)建自定義組件并處理更復(fù)雜的數(shù)據(jù)時(shí)，我們可以真正了解v-model。

以上就是Vue ​v-model相關(guān)知識(shí)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue ​v-model的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！