# 下载最新的vue
$ npm install vue
js 引用 vue.js
开始代码，感受vue强大的双向数据绑定
<div id="app"><p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
实战代码：
<div id="app"><input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
Vue整个生命周期示意图：
之前在项目中，有一个固定屏幕顶部的横向日历条的需求，当时找了半天，没发现有合适的能用于vue的现成的轮子，于是只好自己徒手撸了个日历组件。最近有点时间，想着把这个组件完善完善，开源出来，也能方便有需要的朋友。只是出乎我意料的是，原本以为一天搞定的事情，愣是整了三五天。当你做一个基于业务的组件时，只需针对项目需要去考虑，能省的就省了，动画不好做就不要了……；而当你真的想做一个能广泛使用的开源组件时，要考虑和兼顾的点就多了很多。偏偏我还有点完美主义，总想着自己做出来的东西尽可能的完善，尽可能适应更多元的需求场景，以至于整到最后，英文版的说明文档都搞了一份。哈哈哈
------------------------- 划重点分割线 -------------------------
这是一个适用于 vue.js 的、 横向的 、 条状的 、适用于 PC端 的 日历组件 ，有需要的同学，可以进入下面的在线链接查看使用场景和方法。有发现bug或者改进意见，欢迎提出来；如果有帮到你，请不要吝啬点亮一颗小星星，Thx~
Github地址
在线文档和示例说明
