關於Vue v model你需要知道的一切

2021-10-17 18:24:28 字數 3360 閱讀 6575

​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的簡單示例。

value: } 

當我們在文字輸入中輸入時,我們會看到我們的data屬性發生了變化。

v-model和v-bind的區別?

v-bind指令通常會與v-model切換。

兩者的區別在於v-model提供了雙向資料繫結。

在我們的例子中,這意味著如果我們的資料改變了,我們的輸入也會改變,如果我們的輸入改變了,我們的資料也會改變。

然而,v-bind只以一種方式繫結資料。

當你在你的應用中建立乙個清晰的單向資料流時,這是非常有用的。但是,在v-model和v-bind之間選擇時必須小心。

v-model的修飾符

vue提供了兩個修飾符,允許我們更改v-model的功能。

每乙個都可以像這樣加起來,甚至可以連線在一起。

.lazy預設情況下,v-model在每個輸入事件上與vue例項(資料屬性)的狀態同步。這包括得到,失去焦點等等。

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

這減少了v-model試圖與vue例項同步的次數——在某些情況下,還可以提高效能。

.number

通常,我們的輸入將自動將輸入轉為字串—即使我們將輸入是數字。

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

根據vue文件,如果輸入發生變化,並且parsefloat()無法解析新值,那麼將返回輸入的最後乙個有效值。

.trim與大多數程式語言中的trim方法類似,.trim修飾符在返回值之前刪除開頭或結尾的空白。

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

好了,現在我們已經了解了form/input內部的v-model的基本知識,讓我們看看v-model的乙個有趣用法——在元件之間建立雙向資料繫結。

在vue中,資料繫結有兩個主要步驟:

從父節點傳遞資料

從子元件發出事件以更新父元件

在自定義元件上使用v-model可以讓我們傳遞乙個prop,用乙個指令來處理乙個事件。

好吧,這到底是什麼意思?

讓我們繼續使用v-model表單的例子,並使用名為customtextinput.vue的自定義文字輸入。

使用v-model傳遞的值的預設名稱是modelvalue——我們將在示例中使用這個名稱。

但是,我們可以像這樣傳遞乙個定製的模型名稱。

注意:當我們使用自定義模型名稱時,所發出方法的名稱將被更新:name

下面是來自vue文件的一張圖來總結它。

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

我們已經設定好了父元件,所以讓我們從子元件訪問它。

在customtextinput.vue中,我們必須做兩件事:

好的——讓我們首先在指令碼中宣告它是prop。

export default 

}

接下來,讓我們建立我們的模板,將值設定為modelvalue prop,只要有輸入事件,我們就通過update:modelvalue發出新值。

first name 

使用v-model好吧!

我們已經介紹了乙個使用v-model在兩個元件之間繫結資料的基本示例。

讓我們看一些使用v-model指令的更高階的方法。

對乙個元件多次使用v-model

v-model並不侷限於每個元件只能使用一次。

要多次使用v-model,我們只需要確保為每個prop唯一命名,並在子元件中正確訪問它。

讓我們在lastname中新增第二個v-model。

在我們的父元件中:

value: } 

last name: }

然後,在子元件內部:

first name 

last name

v-model的自定義修飾符正如我們所討論的,vue中內建了一些修飾符。但總有一天,我們會想要新增我們自己的。

假設我們想要建立乙個修飾符來刪除輸入中的所有空格。我們稱之為無空格。

在我們的輸入元件中,我們可以使用prop來捕獲修飾符。自定義修飾符的名稱是namemodifiers。

props: )

}}

好的,我們要做的第一件事是改變@input處理器來使用乙個自定義方法。我們可以稱它為emitvalue,它將接受正在編輯的屬性和事件物件的名稱。

first name 

在emitvalue方法中,在呼叫$emit之前,我們要檢查修飾符。如果no-whitespace修飾符為true,則可以在將其傳送給父物件之前修改該值。

emitvalue(propname, evt) 

this.$emit(`update:$`, val)

}

結論希望你知道了一些有關v-model的新知識。

在它的基本用例(如表單和輸入資料)中,v-model是乙個非常簡單的概念。然而,當我們開始建立自定義元件並處理更複雜的資料時,我們可以真正了解v-model。

軟體人生 關於同行競業,你需要知道,你需要關注

我贊同靈動 軟通這位律師的職業精神和職業行為,但是不贊同這樣的做事方式,這無助於真實有效的解決爭端,只會讓爭端更加激烈。我提出的合同和相關資料都是真實取樣的,我需要負責。而一概不承認容易激起更激烈的對抗。尊重事實,才應該是法律事務最基本的條目,作為法務人員更應如此。作為程式設計師,建議你近期關注我的...

關於快取你需要知道的

作後端開發的同學,快取是必備技能。這是你不需要花費太多的精力就能顯著提公升服務效能的靈丹妙藥。前提是你得知道如何使用它,這樣才能夠最大限度發揮它的功效,並抑制其 本文將介紹最如何正確的新增和更新快取。這部分將介紹在開始加快取之前我們必須要做的事情。這步非常重要,如果沒弄好,很有可能加了快取反而不如不...

關於「寫作」你需要了解的

寫作技能 writing skill 是言語技能的一種形式。指控制和調節寫作活動進行的心智活動方式。在寫作過程中形成。包括構思技能 表達技能和修改技能。與寫作知識密切相關,但又有區別。寫作知識是一種有關寫作程式的操作性知識,對寫作活動只起定向作用。言語技能的一種形式。控制和調節寫作活動進行的心智活動...