Vue.js 快速入門

data() method

續上篇，這邊修改一下HomeView.vue的code。

• Before:

• After:

在頁面最下方顯示 name: Vic，data method直接回傳name變數，在template中可以直接用{{ name }}將變數顯示出來。

Code

• 結果如下:

---

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:

　　Code

---

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可以省略，這兩種寫法是一樣意思的:

　　Code

本筆記參考: 1. https://ithelp.ithome.com.tw/articles/10234257 2. https://ithelp.ithome.com.tw/articles/10234670 3. https://segmentfault.com/q/1010000015411474