[[389695]]

本文已經(jīng)過原作者 ichael Thiessen 授權(quán)翻譯。

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

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

本文主要講解v-model的不同用例，并學(xué)習(xí)如何在自己的項(xiàng)目中使用它。

v-model 是什么?

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

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

使用v-model的一個(gè)常見用例是在設(shè)計(jì)表單相關(guān)的一些元素時(shí)。我們可以使用它使input元素能夠修改Vue實(shí)例中的數(shù)據(jù)。

<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)我們在input中輸入內(nèi)容時(shí)，我們會看到我們的數(shù)據(jù)屬性正在變化

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

v-bind指令通常會與v-model切換。兩者的區(qū)別在于v-model提供了雙向數(shù)據(jù)綁定。

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

而 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è)都可以像這樣加起來，甚至可以連接在一起。

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

.lazy

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

.lazy修改器修改了我們的v-model，所以它只在更改事件之后同步。這減少了v-model試圖與Vue實(shí)例同步的次數(shù)，在某些情況下，還可以提高性能。

.number

通常，即使輸入的是數(shù)字類型，input也會自動將輸入的值變?yōu)樽址?。確保將我們的值作為數(shù)字處理的一種方法是使用.number修飾符。

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

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

.trim

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

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

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

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

從子實(shí)例發(fā)出事件以更新父實(shí)例

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

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

這到底是什么意思?

使用v-model傳遞的值的默認(rèn)名稱是modelValue。但是，我們也可以像這樣傳遞一個(gè)自定義名稱。

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

注意：當(dāng)我們使用自定義模型名稱時(shí)，發(fā)出的方法的名稱將為update:name。

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

在自定義組件中使用 v-mode ，需要做兩件事：

1. 在 props 中接收 v-model 的值。
2. 當(dāng)對應(yīng)的值變化時(shí)，發(fā)出一個(gè)更新事件

ok，首先來聲明一下：

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

接下來，將 modelValue 綁定到需要的元素，當(dāng)值變化時(shí)，我們就通過update:modelValue 發(fā)出新值。

這樣就可以實(shí)現(xiàn)雙向綁定了。

v-model 的使用技巧

上面介紹了如果在自定義組件中使用 v-model，現(xiàn)在來看看一些v-model指令更高級的用法。

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

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

為下面的組件添加第二個(gè) v-model，這里先命名為 lastName:

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

 

運(yùn)行后，可以看到兩個(gè) v-model 都可以正常工作：

自定義 v-model 的修飾符

Vue中內(nèi)置了一些修飾符，但這些遠(yuǎn)遠(yuǎn)不夠，所以有時(shí)我們需要自定義自己的修飾符。

假設(shè)我們要?jiǎng)?chuàng)建一個(gè)修飾符，以刪除輸入的文本中的所有空格。我們稱之為no-whitespace ：

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

在組件內(nèi)，我們可以使用 props 來捕獲修改器。自定義修飾符的名稱是nameModifiers

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

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

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

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

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

運(yùn)行，完美：

總結(jié)

希望本文能教給大家一些有關(guān)Vue v-model的新知識。

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

~完，我是刷碗智，我要去刷碗了，我們下期見!

作者：Michael Thiessen

譯者：前端小智 來源：news

原文：https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。