Vue组件编写 - 爱码网

Vue无疑是近来最火的一个前端框架，它吸取了angular1.x和react的精华，性能优良，而且易于上手，本文主要是关于如何去写一个组件。

首先是项目目录

Vue组件编写

编写组件

在这里我写了一个日期控件（移动端的），在components目录下建立文件夹，并建立vue文件和index.js文件注册组件。
.vue文件中的内容我就不多说了，去看我的项目即可。

组件注册

import datepicker from './datepicker.vue'
//这里第一个参数可以设置别的名字，作为页面标签使用
datepicker.install = (Vue) => Vue.component('datepicker',datepicker)
export default datepicker

组件使用

import datepicker from './components/datepicker'
import Vue from 'vue'
Vue.use(datepicker);
//html中
<datepicker @cancle="cancle" @sure="sure" :selecteddate="olddate"></datepicker>

最后附上代码地址https://github.com/Stevenzwzhai/vue-datepicker
演示地址 https://stevenzwzhai.github.io/vue-datepicker/。打开mobile调试模式，因为使用了touch事件，所以pc无效。