1: Vue 官网教程上关于 v-model 的讲解不是十分的详细，写这篇文章的目的就是详细的剖析一下， 并介绍 Vue 2.2 v-model改进的地方，然后穿插的再说点 Vue 的小知识。
2: v-model 指令在input 元素上时:
v-model 指令虽然很像使用了双向数据绑定的Angular的ng-model, 但是Vue 是单向数据流, v-model 只是语法糖而已。
3: <input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
v-model: 指令是v-bind 和 v-on 指令的结合,
第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：↓
: 是v-bind 的语法糖, @是 v-on的语法糖:
<input :value="sth" @input="sth = $event.target.value" />
4: 要理解这行代码, 首先就是你要知道input 元素本身身上有个oninput 时间, 这是HTML5 新增类似于onChange 每当输入框内容发生变化时, 都会触发oninput 把最新的value 传递给sth.
5: 我们仔细观察语法糖和原始语法两行代码, 可以得出一个结论。
6: 在给input 元素添加v-model 属性时, 会默认把value, 作为元素的属性, 把input 事件作为实时传递的value 的触发事件。
7: refs 每一个章节都有对接的文章链接:
基础使用: 参考 $refs 父组件调用子组件的方法或者数属性。
$parent: 子组件调用父组件的方法和属性。
$children 父组件调用子组件的方法和属性。
8: provide inject 跨组件通讯:
ref 和$parent $children 在跨组件通信时是有弊端的。当组件A 和 组件B 中间隔了数代(甚至不确定具体级别时) 往往会借助Vuex 这样的方法解决方案。 不得不支持第三方库来支持。
使用Vuex 首先要依赖Vue 先引入Vue 在引入Vuex。 本节课则介绍无依赖的组件通信方法: Vue.js 内置的provide/inject 接口。
9: 我们把app.vue 理解为最最外层的根组件, 用来存储所有需要的全局数据和状态, 甚至是计算属性(computer) 方法(methods) 因为你的项目中所有的组件(包含路由) 他的父组件都是App.vue 所以我们把这个app.vue 实例通过的provide 对外提供。
10: 接下来任何组件(或者路由) 只是需要通过inject 注入app.vue app vue 即可。 都是可以直接通过this.app.xxx 来访问app.vue中的data computed methods 计算属性的内容。
11: app.vue 是整个项目第一个被渲染的组件, 而且只会渲染一次(即使) 切换路由, app.vue 也不会再次被渲染, 利用这个特性， 很适合做个全局状态管理。
12: nextTick: 如果要在created() 生命周期函数中进行DOM 操作, 由于created()设为生命周期还未对DOM 进行任何渲染, 所以无法进行操作, 需要通过$nextTick() 来进行完成。
13: 备注: 在created 生命周期进行DOM 操作时, 不使用$nextTick 会报错。版权声明：本文为weixin_45677987原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。