Vue 2 Options API寫法: data(), methods
data() method
續上篇，這邊修改一下HomeView.vue的code。
- Before:
- After:
- 結果如下:
methods 屬性
續上述程式碼，改成下拉選單onChange，修改name的值:
- 一開始在data() method中設定name=Vic，所以一開始會看到name: Vic，直到下拉選單onChange，使用this.name把value換成下拉選單current value。
- 值得一提的是，如果沒有data() method把name return的話，即使在changeValue method中使用this.name來改變值，也不會被render到網頁上，但把this.name console.log出來值是有變的。
- v-on:change可以簡寫成@change:
v-model
將上述程式碼，改成用V-Model來做雙向資料綁定，可以達成一樣的效果。
- 好處是不用自己寫onChange method，程式碼可以精簡化。
v-for, v-bind
繼續修改上述code，實務上data會從後端來，必定會需要用到for loop(v-for)，v-bind則是用在html屬性上。
- 加上v-bind:key是為了讓vue在排序的時候，有比較好的效能。
- v-bind可以省略，這兩種寫法是一樣意思的:
本筆記參考:
1. https://ithelp.ithome.com.tw/articles/10234257
2. https://ithelp.ithome.com.tw/articles/10234670
3. https://segmentfault.com/q/1010000015411474
