Vue.js 快速入門
2022/06/22閱讀時間約 2 分鐘
Vue 2 Options API寫法: data(), methods
data() method
續上篇，這邊修改一下HomeView.vue的code。
- Before:
- After:
在頁面最下方顯示 name: Vic，data method直接回傳name變數，在template中可以直接用{{ name }}將變數顯示出來。
- 結果如下:
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可以省略，這兩種寫法是一樣意思的:
為什麼會看到廣告
20會員
161內容數
留言0
查看全部
