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 编译生成的虚拟节点
学会使用这个自定义指令对以后开发项目会有很多帮助的。
以后有好的东西我都存这里哈哈哈哈哈哈哈哈,当个笔记用嘛~