vue表单控件

可以用v-model指令在表单input 、textarea 及select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以便更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有表单元素的value、checked、selected attribute的初始值而总是将Vue实例的数据作为数据来源，所以应该通过JavaScript在组件的data选项中声明初始值。
（1）单行文本可在input元素中使用v-model实现双向数据绑定，代码如下：
（2）多行文本可在textarea元素中使用v-model实现双向数据绑定，代码如下：
注意：在文本区域插值（textarea /textarea ）并不会生效，应用v-model来代替。
（3）单个复选框，绑定到布尔值，代码如下：
（4）多个复选框，绑定到同一个数组，代码如下：

（5）单选按钮的双向数据绑定，代码如下：
（6）选择列表，下拉列表的双向数据绑定。
·　单选时，代码如下：注意：如果v-model表达式的初始值未能匹配任何选项，则select 元素将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第一个选项。因为在这种情况下，iOS不会触发change事件。因此，更推荐像上面那样提供一个值为空的禁用选项。
·　多选列表（绑定到一个数组），代码如下：

绑定value

（1）对于单选按钮、勾选框及选择列表选项，v-model绑定的value通常是静态字符串，代码如下：
（2）实现复选框功能。有时我们想绑定value到Vue实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串，代码如下：当选中时输出字符串a；当没有选中时输出字符串b。

（3）单选按钮，代码如下：

当选中时在页面控制台输入vm.pick的值和vm.a的值相等。

修饰符

在默认情况下，v-model每次在input事件触发后将输入框的值与数据进行同步（除了上述输入法组合文字时）。此时可以添加.lazy修饰符，从而转为在change事件之后进行同步，代码如下：

如果想自动将用户的输入值转为数值类型，可以给v-model添加.number修饰符，代码如下：
通常这很有用，因为即使在type=＂number＂时，HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat（）解析，则会返回原始的值。

生命周期

Vue实例有一个完整的生命周期，也就是开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程，我们称之为Vue的生命周期。通俗地说就是Vue实例从创建到销毁的过程，如图所示。

可以看到在Vue的整个生命周期中有很多钩子函数，这就给了用户在不同阶段添加自己代码的机会，下面先列出所有的钩子函数，然后再一一详解。
（1）beforeCreate：在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。
（2）Created：实例已经创建完成之后被调用。在这一步，实例已完成以下配置，数据观测（data observer），属性和方法的运算，以及watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。（3）beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。（4）Mounted：el被新创建的vm.$el替换，并挂载到实例上之后调用该钩子。
（5）beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。可以在这个钩子中进一步更改状态，这不会触发附加的重新渲染过程。
（6）Updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以现在可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不会被调用。
（7）beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
（8）Destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会被解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不会被调用。