使用Vue写一个datepicker的示例(5)
打包完成的模块就是一个umd格式的模块啦，可以在浏览器中直接使用，也可以配合require.js等模块加载器使用！
适配 Vue 2.x
Vue 2.0已经发布有段时间了，现在把之前的组件适配到Vue 2.0。迁移过程还是很顺利的，核心API改动不大，可以借助vue-migration-helper来找出废弃的API再逐步修改。这里只列举一些我需要修改的API。
filter
2.0中的filter只能在mustache绑定中使用，如果想在指令式绑定中绑定过滤后的值，可以选择计算属性。我在月份和星期的显示中使用到了过滤器来过滤语言类型，但我之前是在指令式绑定中使用的filter，所以需要如下修改，：
//修改前
<div class="month-box" @click="chType('month')" v-text="tmpMonth + 1 | month language"></div>
//修改后，filter传参的方式也变了，变成了函数调用的风格
<div class="month-box" @click="chType('month')">{{tmpMonth + 1 | month(language)}}</div>
移除$index和$key
这两个属性不会在v-for中被自动创建了，如需使用，要在v-for中自行声明：
<li v-for="item in monthList" @click="selectMonth($index)"></li> // <li v-for="(item, index) in monthList" @click="selectMonth(index)"></li>
ready 生命周期移除
ready从生命周期钩子中移除了，迁移方法很简单，使用mounted和this.$nextTick来替换。
prop.sync弃用
prop的sync弃用了，迁移方案是使用自定义事件，而且Datepicker这种input类型组件，可以使用表单输入组件的自定义事件作为替换方案。自定义组件也可以使用v-model指令了，但是必须满足两个条件：
- 接收一个value的prop
- 值发生变化时，触发一个input事件，传入新值。
所以Datepicker的使用方式也不是<datepicker value.sync="now"></datepicker>了，而是<datepicker v-model="now"></datepicker>。组件自身向父级传值的方式也不一样了：
//1.x版本，设置了value的值会同步到父级
this.value = `${this.tmpYear}-${('0' + (this.month + 1)).slice(-2)}-${('0' + this.date).slice(-2)}`
//2.x版本，需要自己触发input事件，将新值作为参数传递回去
let value = `${this.tmpYear}-${('0' + (this.month + 1)).slice(-2)}-${('0' + this.date).slice(-2)}`
this.$emit('input', value)
总结
以上就是我在写这个datepicker时的大致思路，本身也是很简单的事情，没有处处展开来说，写在这里作为自己的一个总结，如果有刚开始使用Vue的同学也希望这篇文章可以在思路上帮助到你们:P，对于各位老鸟如果有什么指点的地方我也很感谢:D，那么差不多就这样。也希望大家多多支持黑区网络。