關於 v-model 你需要知道的這一切!
Vue v-model
是一個指令,它提供了input
和form
之間或兩個組件之間的雙向數據綁定。
這是 Vue 開發中的一個簡單概念,但v-model
的真正威力需要花些時間才能理解。
本文主要講解v-model
的不同用例,並學習如何在自己的項目中使用它。
v-model 是什麼?
剛纔講過,``v-model` 是一個我們可以在模板代碼中使用的指令。指令是一個模板令牌,它告訴 Vue 我們想要如何處理 DOM。
在v-model
的情況下,它告訴 Vue 我們想要在template
中的值和data
屬性中的值之間創建一個雙向數據綁定。
使用v-model
的一個常見用例是在設計表單相關的一些元素時。我們可以使用它使input
元素能夠修改 Vue 實例中的數據。
<template>
<div>
<input
type='text'
v-model='value'
/>
<p> Value: {{ value }} </p>
</div>
</template>
<script>
export default {
data() {
return {
value: 'Hello World'
}
}
}
</script>
當我們在input
中輸入內容時,我們會看到我們的數據屬性正在變化
v-model 和 v-bind 之間的區別?
v-bind
指令通常會與v-model
切換。兩者的區別在於v-model
提供了雙向數據綁定。
在我們的例子中,這意味着如果我們的數據改變了,我們的input
也會改變,如果我們的input
改變了,我們的數據也會改變。
而 v-bind
只以一種方式綁定數據。
當我們想在自己的應用中創建一個清晰的單向數據流時,這是非常有用的。但是,在v-model
和v-bind
之間選擇時必須小心。
v-model 的修飾符
Vue 提供了兩個修飾符,允許我們更改v-model
的功能。每一個都可以像這樣加起來,甚至可以連接在一起。
<input
type='text'
v-model.trim.lazy='value'
/>
.lazy
默認情況下,v-model
在每個input
事件上與 Vue 實例的狀態(數據屬性)同步。這包括獲得 / 失去焦點等。
.lazy
修改器修改了我們的v-model
,所以它只在更改事件之後同步。這減少了 v-model 試圖與 Vue 實例同步的次數,在某些情況下,還可以提高性能。
.number
通常,即使輸入的是數字類型,input
也會自動將輸入的值變爲字符串。確保將我們的值作爲數字處理的一種方法是使用.number
修飾符。
根據 Vue 文檔,如果input
發生變化,並且parseFloat()
無法解析新值,那麼將返回輸入的最後一個有效值。
<input
type='number'
v-model.number='value'
/>
.trim
與大多數編程語言中的 trim 方法類似,.trim
修飾符在返回值之前刪除開頭或結尾的空白。
在自定義組件中使用 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
傳遞的值的默認名稱是modelValue
。但是,我們也可以像這樣傳遞一個自定義名稱。
<custom-text-input v-model: />
注意:當我們使用自定義模型名稱時,發出的方法的名稱將爲update:name
。
在自定義組件中使用 v-model
在自定義組件中使用 v-mode ,需要做兩件事:
-
在 props 中接收
v-model
的值。 -
當對應的值變化時,發出一個更新事件
ok,首先來聲明一下:
export default {
props: {
modelValue: String,
}
}
接下來,將 modelValue 綁定到需要的元素,當值變化時,我們就通過update:modelValue
發出新值。
這樣就可以實現雙向綁定了。
v-model 的使用技巧
對一個組件多次使用 v-model
爲下面的組件添加第二個 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>
然後,我們內部的子組件:
<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
都可以正常工作:
自定義 v-model 的修飾符
假設我們要創建一個修飾符,以刪除輸入的文本中的所有空格。我們稱之爲no-whitespace
:
<custom-text-input
v-model.no-whitespace='value'
v-model:lastName='lastName'
/>
在組件內,我們可以使用 props 來捕獲修改器。自定義修飾符的名稱是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)
}
運行,完美:
總結
希望本文能教給大家一些有關 Vue v-model 的新知識。
在它的基本用例 (如表單和 input 數據) 中,v-model
是一個非常簡單的概念。然而,當我們創建自定義組件並處理更復雜的數據時,我們可以釋放v-model
的真正威力。
作者:Michael Thiessen 譯者:前端小智 來源:news 原文:https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/oGJ6kAbtcFIWHpD2belE8Q