笔记：Vue.js 的 v-model 和简单的自定义 input 封装

关于 V-Model

关于表单组件的使用 Vue.js 的官方教程中给出了很简单的例子：

官方的例子其实等同于以下，使用的 v-model 在这里某种意义上更像是语法糖：

这里做了什么

1. input[type="text"] 通过 :value="message" 和 vm 进行双向绑定；
2. input[type="text"] 同时通过 @input="$event.target.value" 将自己每次输入的内容传递给上一步的 message;
3. 从而将当前 Vue 实例的 { data: {} } 中的 message 值更新成 input 输入的内容。

示例（CodePen）

简单的自定义 input 封装

实际开发，即便是最简单的表单中，也不会需要一个 <input v-model="message"/>；更多的可能是需要一个 <username v-model="name"/>，因为其中需要包含一些基本的事件和合法性验证的方法，所以需要进行封装，方便复用。

示例（CodePen）

例子中实例化使用了 let vm = new Vue({})，可以在 Vue DevTool 中查看，<Root> 中 name 的变化和 input 的 value 的变化是同步的。通过 console 直接操作，如：vm.name = 'new name'; 也会反应在 <Root> 和 input 上。