vue解析php,Vue进阶——解析V-MODEL

最近重新过了一遍VUE官方文档，发现有些知识点官方解释的不是很清楚，所以在此深入解析一下，希望能帮到和我一样看文档遇到困惑的朋友们。

这里关于v-model，官方说明篇幅甚少，留下了一些疑问，下面详细解析v-model知识点。

一、v-model用在input上

v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，v-model 只是语法糖而已：

// 最简形式，省略了value的显式绑定，省略了oninput的显式事件监听，是第二句代码的语法糖形式

//第二句代码的简写形式

首先你要知道 ，在HTML5新特性中，input 元素本身就有个 oninput 事件，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把输入框最新的value值传递给 sth(第二句代码)。

关于$event，懂的朋友请忽略，

我们仔细观察语法糖和后两句完整版本代码，可以得出一个结论：

在给 元素添加 v-model 属性时，默认会把 value 作为v-model的属性，默认把 'input' 事件作为实时传递 value 的触发事件，这就是官方文档这句话的意思：

二、v-model用在组件上

明白了v-model只是语法糖，它的默认值是value，默认监听事件是oninput，我们来看一个稍复杂的例子，它是将v-model使用在组件上。

类似于下图的效果，父组件的 price 的初始值是 100，更改子组件的值能实时更新父组件的 price

// 实际上是下列代码

//{{price}}