每個人的學習方法各有差異。
這只是我的選擇。

Why v-model

在 S3E5 | Vue.js作者尤雨溪: 框架设计就是不断地舍取 上，游雨溪有提到在製作 Vue.js 之前，使用了 Ember.js 和 AngularJS。

在這個 Podcast 游雨溪對於髒髒的程式碼，也是使用「糙 code」一詞。為我幾年前寫的可不可以不要寫糙code 感到榮幸。

Ember.js 我沒有用過，聽 podcast 的描述，它似乎一個模版語言的功能而已，Vue 最後的語法設計，最後比較像它。
而 AngualrJS 則笨重許多，也正因為如此有許許多多強大的功能，Vue 一開始的許多功能也許是從這裡借鑑。

AngularJS 的 ng-model

v-model 的產生，是源自於在 AngularJS v1.0.2 就有的 ng-model

參考: 4 - Two-way Data Binding

之後的 AngularJS v1.5 (2016/2/4) 版之後，推出鮮少中文資源的 component 寫法後，在 bindings 可以設定成 = (雙向綁定)、 < (單向綁定)、@(字串)、&(callback 函數)

參考: Understanding Components

Vue1 的 v-model

到 Vue1 左右的時代，其實看得見真正的雙向綁定語法。

而我猜在 Vue 的 0.11 (大約2014/11/7) 和 0.12 版 v-model 就是真的雙向綁定，在文件上到 1.0 版有說 v-model 是語法糖，但沒解釋它是怎麼組成的，在 v2 版才說它是由 value + input 組成的。

我有一個大膽的猜想

AngularJS -(借鑑)-> Vue 0.11 -(相容)-> Vue1 -(相容)-> Vue2

v-model 只是為了向下相容而留著的語法 (是嗎？)

What is v-model

為了要好好的善用 v-model 我們必須了解什麼情況之下，要記得拆成什麼樣的語法。

在 Vue2 的官網有寫
https://vuejs.org/v2/guide/forms.html

在 Vue3 的官網有寫
https://v3.vuejs.org/guide/forms.html

text and textarea elements use value property and input event;

<input type="text" :value="text" @input="updateText"></input>
<textarea :value="text" @input="updateText"></textarea>

checkboxes and radiobuttons use checked property and change event;

<input type="checkbox" :checked="status === 'A'" value="A" @change="updateStatus"></input>
<input type="radio" :checked="status === 'B'" value="B" @change="updateStatus"></input>

select fields use value as a prop and change as an event.

<select :value="selectedOption" @change="updateOption" :options="options"></select>

大多數的時候 v-model = :value + @input ，如果在點擊變更狀態 (select) 時，就要將 @input 改成 @change ，如果只要點一下就可以改好 (checkboxes)，就把 :value 改成 :checked

也許會充滿疑惑，但這是一切的開端

先說，不是一定要這麼做，這只是我的個人小小的偏好。
總之，這一切在追完這個連載，就可以明白這一切是為什麼了。^_<