Ting's Square 程式寫作之路

[2020] 第12屆鐵人賽Day 5 v-bind, v-model, v-on

Tags:  #rail    #vue  
Total : 142 words.

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

單向資料綁定: v-bind

html

  <p class="control">
    <input class="input" v-bind:placeholder="yourname">
  </p>

Vue instance

new Vue({
  el: "#app",
  data: {
  	yourname: "請輸入您的暱稱"
  },
  methods: {
  	greeting(){
    	return "這是鐵人賽第五天!"
    }
  }
})

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

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

在上例表單的情況,

我想要讓使用者輸入暱稱時,使用v-model讓暱稱可以即時顯示。
並且讓使用者按下button時,呼叫thankyou這個methods裡面的方法。

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

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結合,以及更多變化的v-compute

Ref: