Vue ​v-model相關知識總結

Posted on by

​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。

以上就是Vue ​v-model相關知識總結的詳細內容，更多關於Vue ​v-model的資料請關註WalkonNet其它相關文章！

推薦閱讀：