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

17 Sep 2020

rail
vue

昨天討論了單向資料流的鬍子語法，可以讓我們把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: