這是乙個個人資訊的demo
輸入手機號和郵編
這是兩個元件,兩種不同的寫法
第一種是通過v-model進行的雙向繫結
第二種是屬性的傳遞,事件的**。去做資料的更新。
實際上v-model的形式,就是我們第二種方式,最終編譯出來的效果。
所以v-model僅僅是語法糖而已。
有時候乙個元件需要多個屬性的雙向繫結,vue給我們預留了api。通過.sync的形式。可以對其他的屬性去做雙向繫結。
.sync其實下面這種:zipcode這樣的一種形式去傳遞去改變值,
子元件更新的時候也是通過this.$emit 觸發事件這樣去做的。
v-model用的是@change
為什麼是@change呢?實際上是我們子元件自己定義的
正常情況下vue預設的是input事件
對於屬性預設的是value
如果你需要自定義,例如這裡我們要對phoneinfo做雙向繫結,那我可以在model中主動的宣告。宣告我這個屬性要的是phoneinfo然後事件是用的change,這樣我們的雙向繫結就是按照機制去來的。
最終的語法糖的形式
v-model對應的是前兩個
.sync對應的是後面兩個。
vue 單向資料流 雙向繫結
在react中是單向資料繫結,而在vue中的特色是雙向資料繫結。但是其實就我個人的理解是 其實無論是vue還是react其實還是提倡單向資料流去管理狀態,這一點在vuex和redux狀態管理器上體現的很明顯。只是vue為ui控制項提供了雙向資料繫結的方式,在一些需要實時反應使用者輸入的場合會非常方便...
vue資料的雙向繫結和單向資料流
先看要實現的效果 再貼 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head type text id inp oninput changevalue v...
React的單向資料流與Vue的雙向繫結
小結 react遵循從上到下的資料流向,即單向資料流。1 單向資料流並非 單向繫結 甚至單向資料流與繫結沒有 任何關係 對於react來說,單向資料流 從上到下 與單一資料來源這兩個原則,限定了react中要想在乙個元件中更新另乙個元件的狀態 類似於vue的平行元件傳參,或者是子元件向父元件傳遞引數...