Vue.js 快速入門
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可以省略，這兩種寫法是一樣意思的:
為什麼會看到廣告
21會員
161內容數
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。