iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站系列 第 5

[VR 前後端交響曲Day5] 單向資料綁定(v-bind)與雙向事件處理(v-on)

昨天討論了單向資料流的鬍子語法,可以讓我們把Vue實例裡的資料流向html (View)。
但如果要將資料綁定HTML標籤屬性的時候,該怎麼辦呢?
舉例而言,如果我們想把HTML的placeholder綁上vue instance的data屬性yourname,這個時候,我們可以使用v-bind

單向資料綁定: v-bind

範例:在這個輸入格的placeholder提示上綁v-bind:placeholder="yourname",就會出現請輸入您的暱稱的提示字串了。請看我的JS fiddle範例

雙向事件處理: v-model, v-on

如果我想要讓使用者輸入暱稱時,使用v-model讓暱稱可以即時顯示。
並且讓使用者按下button時,呼叫thankyou這個methods裡面的方法~這樣該如何是好呢?

在上例表單的情況,Vue的黑魔法讓this可以拿到inputname裡的值,
所以我們可以透過${this.inputname}要到使用者的輸入資料,並在畫面上顯示,達成資料回流到Vue instance的效果。請看我的JS fiddle範例

v-bind和v-on的簡寫

因為v-bind和v-on太有用啦,所以有他自己的語法糖衣syntax sugar

  • 資料綁定v-bind :
  • 事件處理v-on @

Vue其實還有其他好用的設計像是v-for把陣列裡的資料印出來, v-if, v-show 流程控制。這個部分跟一般程式語言的邏輯還蠻相似的,各位可以參考vue官網範例,暫時不一一贅述。明天將會介紹v-on跟method結合,以及更多變化的computed()屬性!

Ref:


上一篇
[VR 前後端交響曲Day4] Vue的單向資料流: {{鬍子語法}}
下一篇
[VR 前後端交響曲Day6] Vue元件中的computed屬性
系列文
「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站30

尚未有邦友留言

立即登入留言