Vue 进阶教程之：详解 v-model

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 会报错。