vue这个强大的前端框架~越用越喜欢！新手也能用它一边学一边做出精美的页面，实现完美的功能！但是vue看似简单，它其实有很多我们都没有注意到的福利，还需要慢慢摸索，它衍生的一些组件，也很好用，emmmm虽然都是别人写的......
其实有很多UI库都为vue服务了，像我用过的mine-ui、element-ui、mui、vux-ui（个人觉得这个是真强大，里边很多API）,虽然有些大牛都觉得用别人的ui库很low，但是为了开发方便，没有很厚实功底的人还是会选择便捷美观的ui库进行开发。有些时候我们引入一个库，其实用到的功能并不多，所以可能使项目文件大小增大。所以我们用到哪个功能就去下载哪个功能，也是不错的选择。
1.vue-easytable：一个智能的表单组件
它可以用来实现表格中你能想到的所有功能：自适应、固定列，表头固定、支持列宽拖动、排序、分页、单元格编辑、单元格合并、checkbox多选框
说到分页插一句话：最近我做的项目我不是用vue写的，直接用的JQ写的，一开始我之前没有去手动实现过分页，我直接采用了前端分页的方法，发现会有很多报错，因为前端分页的话需要获取到数据库里所有的数据进行分页展示，通过pageSize来创建tr的话，有些标签中的节点会拿不到，虽然不影响功能，但是作为程序员看见红色的错误信息会有强迫症的！所以不建议前端实现分页！有经验的后台不会让前端实现分页的！数据很少的情况下，可以选择前端分页，那要是数据很多呢？会为了功能丧失用户体验好感度的.....
安装：
npm install vue-easytable --save-dev
引入：
// 导入css
import 'vue-easytable/libs/themes-base/index.css'
// 导入 table 组件 和分页组件
import {VTable,VPagination} from 'vue-easytable'
// 将组件注册到全局
Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)
我这里就不添加演示了....因为我只是做一个记录....提醒自己如果用到了这个功能，我能记得....有谁看到了这篇文章，可以去：https://github.com/huangshuwei/vue-easytable github有这个大神写的例子。
2.vue-infinite-scroll：无限滚动加载
图片懒加载（瀑布流）,应该能很好描述无限滚动加载。当我们行为达到某一个条件的时候，就去触发加载，不会一下子把所有数据都加载出来，它能够节省流量，提高用户体验。
安装：
npm i vue-infinite-scroll -D
引入：
// 注册全局
var infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll)；
//单独的组件里面使用
var infiniteScroll = require('vue-infinite-scroll');
new Vue({ directives: {infiniteScroll} })；
使用方式：https://segmentfault.com/a/1190000011693433 segmentfault上边写的很好~看了就会用的~
3.vue-layer-mobile：vue弹出层插件，包括toast、loading、dialog等浮层控件
这个嘛没什么好解释的，这几个是每个项目都要用到的功能~
安装：
// 当前最新版本 1.2.0
npm install vue-layer-mobile
// 如新版遇到问题可回退旧版本
npm install [email protected]
引入：
import 'vue-layer-mobile/need/layer.css'
import layer from 'vue-layer-mobile'
Vue.use(layer) //全局使用
toast:
this.$layer.toast({
icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
content: '提示文字',
time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒
})
loading:
this.$layer.loading('加载中...')
dialog:
this.$layer.dialog({
// 第一个是标题内容 第二个是标题栏的style(可以为空)
title: ['这是标题', 'background:red;'],
content: '这是内容',
contentClass: 'className',
btn: ['确定'] time: 2000
})
// 如果有btn
.then(function (res){
// res为0时是用户点击了左边 为1时用户点击了右边
let position = res === 0 ? 'left' : 'right'
console.log(position)
})
个人感觉这个很棒啊，就用这一个就能实现三个功能~也有单独将几个方法分开的组件，不过这一个就够了~使用方式也很简单，哪里需要就在哪里使用就行了~
5.Vue-Awesome-Swiper：基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用
安装：
npm install vue-awesome-swiper --save
引用：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
使用例子链接在册：https://www.npmjs.com/package/vue-awesome-swiper 这个幻灯片没啥好说的~
6.vue-directive：vue的自定义指令，相当于js中封装的方法
vue-directive是用来操作DOM的，虽然vue实现的是虚拟DOM，但是某些情况下操作DOM还是有需求的。所以就出现了自定义指令，重要的是它可以复用。
这个我是自己学习过，但是并没有拿到项目中用过，这个用好了真的挺方便的，除了vue内部的指令之外，还有很多功能我们可以封装成一个指令的，用的时候直接在el上加上“v-指令名”就行了。
自定义指令有5个生命周期：
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。
自定义指令有三个参数：el、 binding、vnode
el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。arg: 传给指令的参数。例如 v-my-directive:foo，
arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点
学会使用这个自定义指令对以后开发项目会有很多帮助的。
以后有好的东西我都存这里哈哈哈哈哈哈哈哈，当个笔记用嘛~