舍弃伪双向绑定 v-model

每个人的学习方法各有差异。
这只是我的选择。

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" @change="updateStatus"></input>
<input type="radio" :checked="status" @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

也许会充满疑惑，但这是一切的开端

先说，不是一定要这麽做，这只是我的个人小小的偏好。
总之，这一切在追完这个连载，就可以明白这一切是为什麽了。^_<