關於Vue v-model你需要知道的一切
v-model是Vue的一個指令，它提供了input和form資料之間或兩個元件之間的雙向資料繫結。
這在Vue開發中是一個簡單的概念，但是v-model的真正威力需要一些時間才能理解。
到本教程結束時，你將瞭解v-model的所有不同用例，並學習如何在自己的專案中使用它。
準備好了嗎?
我也是。讓我們編寫程式碼。
什麼是v-model?
正如我們剛才討論的，v-model是一個我們可以在模板程式碼中使用的指令。指令是一個模板令牌，它告訴Vue我們想要如何處理DOM。
v-model告訴Vue我們想要在模板中的值和資料屬性中的值之間建立一個雙向資料繫結。
使用v-model的一個常見用例是在設計form和input時。我們可以使用它使DOM input元素能夠修改Vue例項中的資料。
讓我們看一個在文字輸入上使用v-model的簡單示例。
<template>
<div>
<input
type='text'
v-model='value'
/>
<p> Value: {{ value }} </p>
</div>
</template>
<script>
export default {
data() {
return {
value: 'Hello World'
}
}
}
</script>當我們在文字輸入中輸入時，我們會看到我們的data屬性發生了變化。
v-model和v-bind的區別?
v-bind指令通常會與v-model切換。
兩者的區別在於v-model提供了雙向資料繫結。
在我們的例子中，這意味著如果我們的資料改變了，我們的輸入也會改變，如果我們的輸入改變了，我們的資料也會改變。
然而，v-bind只以一種方式繫結資料。
當你在你的應用中建立一個清晰的單向資料流時，這是非常有用的。但是，在v-model和v-bind之間選擇時必須小心。
v-model的修飾符
Vue提供了兩個修飾符，允許我們更改v-model的功能。
每一個都可以像這樣加起來，甚至可以連線在一起。
<input type='text' v-model.trim.lazy='value' />
.lazy
預設情況下，v-model在每個輸入事件上與Vue例項(資料屬性)的狀態同步。這包括得到，失去焦點等等。
lazy修飾符修改了我們的v-model，所以它只在更改事件之後同步。
這減少了v-model試圖與Vue例項同步的次數——在某些情況下，還可以提高效能。
.number
通常，我們的輸入將自動將輸入轉為字串—即使我們將輸入是數字。
確保將值作為數字處理的一種方法是使用. number修飾符。
根據Vue文件，如果輸入發生變化，並且parseFloat()無法解析新值，那麼將返回輸入的最後一個有效值。
<input type='number' v-model.number='value' />
.trim
與大多數程式語言中的trim方法類似，.trim修飾符在返回值之前刪除開頭或結尾的空白。
在自定義元件中使用v-model
好了，現在我們已經瞭解了form/input內部的v-model的基本知識，讓我們看看v-model的一個有趣用法——在元件之間建立雙向資料繫結。
在Vue中，資料繫結有兩個主要步驟:
從父節點傳遞資料
從子元件發出事件以更新父元件
在自定義元件上使用v-model可以讓我們傳遞一個prop，用一個指令來處理一個事件。
<custom-text-input v-model="value" /> <!-- IS THE SAME AS --> <custom-text-input :modelValue="value" @update:modelValue="value = $event" />
好吧，這到底是什麼意思?
讓我們繼續使用v-model表單的例子，並使用名為CustomTextInput.vue的自定義文字輸入。
使用v-model傳遞的值的預設名稱是modelValue——我們將在示例中使用這個名稱。
但是，我們可以像這樣傳遞一個定製的模型名稱。
<custom-text-input v-model:name="value" />
注意:當我們使用自定義模型名稱時，所發出方法的名稱將被更新:name
下面是來自Vue文件的一張圖來總結它。
使用自定義元件中的v-model
我們已經設定好了父元件，所以讓我們從子元件訪問它。
在CustomTextInput.vue中，我們必須做兩件事:
- 接受我們的v-model值作為prop
- 當我們的輸入發生變化時，觸發一個更新事件
好的——讓我們首先在指令碼中宣告它是prop。
export default {
props: {
modelValue: String,
}
}
接下來，讓我們建立我們的模板，將值設定為modelValue prop，只要有輸入事件，我們就通過update:modelValue發出新值。
<template>
<div>
<label> First Name </label>
<input
type='text'
placeholder='Input'
:value='modelValue'
@input='$emit("update:modelValue", $event.target.value)'
/>
</div>
</template>
使用v-model
好吧!
我們已經介紹了一個使用v-model在兩個元件之間繫結資料的基本示例。
讓我們看一些使用v-model指令的更高階的方法。
對一個元件多次使用v-model
v-model並不侷限於每個元件只能使用一次。
要多次使用v-model，我們只需要確保為每個prop唯一命名，並在子元件中正確訪問它。
讓我們在lastName中新增第二個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>
然後，在子元件內部：
<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中內建了一些修飾符。但總有一天，我們會想要新增我們自己的。
假設我們想要建立一個修飾符來刪除輸入中的所有空格。我們稱之為無空格。
<custom-text-input v-model.no-whitespace='value' v-model:lastName='lastName' />
在我們的輸入元件中，我們可以使用prop來捕獲修飾符。自定義修飾符的名稱是nameModifiers。
props: {
lastName: String,
modelValue: String,
modelModifiers: {
default: () => ({})
}
}
好的，我們要做的第一件事是改變@input處理器來使用一個自定義方法。我們可以稱它為emitValue，它將接受正在編輯的屬性和事件物件的名稱。
<label> First Name </label>
<input
type='text'
:value='modelValue'
placeholder='Input'
@input='emitValue("modelValue", $event)'
/>
在emitValue方法中，在呼叫$emit之前，我們要檢查修飾符。如果no-whitespace修飾符為true，則可以在將其傳送給父物件之前修改該值。
emitValue(propName, evt) {
let val = evt.target.value
if (this.modelModifiers['no-whitespace']) {
val = val.replace(/\s/g, '')
}
this.$emit(`update:${propName}`, val)
}
結論
希望你知道了一些有關v-model的新知識。
在它的基本用例(如表單和輸入資料)中，v-model是一個非常簡單的概念。然而，當我們開始建立自定義元件並處理更復雜的資料時，我們可以真正瞭解v-model。
歡迎關注我的公眾號，如果你有喜歡的外文技術文章，可以通過公眾號留言推薦給我。
原文連結：https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/?utm_source=rss&utm_medium=rss&utm_campaign=everything-you-need-to-know-about-vue-v-m