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 vue-layer-mobile@1.0.0

引入：

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 编译生成的虚拟节点

学会使用这个自定义指令对以后开发项目会有很多帮助的。

以后有好的东西我都存这里哈哈哈哈哈哈哈哈，当个笔记用嘛~