精华内容
下载资源
问答
  • 常用的vue组件功能
    千次阅读
    2022-05-11 13:28:07

    目录

    前言

    一、Vue.js UI组件

    二、Vue.js开发框架

    三、Vue.js实用库

    四、Vue.js服务端

    五、Vue.js辅助工具

    六、Vue.js应用实例

    七、Vue.js Demo示例

    八、详细分类

    01、UI组件及框架

    02、滚动scroll组件

    03、slider组件

    04、编辑器

    05、图表

    06、日历

    07、地址选择

    08、地图

    09、播放器

    10、文件上传

    11、图片处理

    12、提示

    13、进度条

    14、开发框架汇总

    15、实用库汇总

    十六、服务端

    十七、辅助工具

    十八、应用实例


    前言

    Vue是主流的前端框架

    一、Vue.js UI组件


    element:饿了么出品的Vue2的web UI工具套件
    Vux:基于Vue和WeUI的组件库
    mint-ui:Vue 2的移动UI元素
    iview:基于 Vuejs 的开源 UI 组件库
    Keen-UI:轻量级的基本UI组件合集
    vue-material:通过Vue Material和Vue 2建立精美的app应用
    muse-ui:三端样式一致的响应式 UI 库
    vuetify:为移动而生的Vue JS 2组件框架
    vonic:快速构建移动端单页应用
    eme:优雅的Markdown编辑器
    vue-multiselect:Vue.js选择框解决方案
    vue-table:简化数据表格
    VueCircleMenu:漂亮的vue圆环菜单
    vue-chat:vuejs和vuex及webpack的聊天示例
    radon-ui:快速开发产品的Vue组件库
    vue-waterfall:Vue.js的瀑布布局组件
    vue-carbon:基于 vue 开发MD风格的移动端
    vue-beauty:由vue和ant design创建的优美UI组件
    vue-blu:帮助你轻松创建web应用
    vueAdmin:基于vuejs2和element的简单的管理员模板
    vue-syntax-highlight:Sublime Text语法高亮
    vue-infinite-scroll:VueJS的无限滚动指令
    Vue.Draggable:实现拖放和视图模型数组同步
    vue-awesome-swiper:vue.js触摸滑动组件
    vue-calendar:日期选择插件
    bootstrap-vue:应用于Vuejs2的Twitter的Bootstrap 4组件
    vue-swipe:VueJS触摸滑块
    vue-amap:基于Vue 2和高德地图的地图组件
    vue-chartjs:vue中的Chartjs的封装
    vue-datepicker:日历和日期选择组件
    markcook:好看的markdown编辑器
    vue-google-maps:带有双向数据绑定Google地图组件
    vue-progressbar:vue轻量级进度条
    vue-picture-input:移动友好的图片文件输入组件
    vue-infinite-loading:VueJS的无限滚动插件
    vue-upload-component:Vuejs文件上传组件
    vue-datetime-picker:日期时间选择控件
    vue-scroller:Vonic UI的功能性组件
    vue2-calendar:支持lunar和日期事件的日期选择器
    vue-video-player:VueJS视频及直播播放器
    vue-fullcalendar:基于vue.js的全日历组件
    rubik:基于Vuejs2的开源 UI 组件库
    VueStar:带星星动画的vue点赞按钮
    vue-mugen-scroll:无限滚动组件
    mint-loadmore:VueJS的双向下拉刷新组件
    vue-tables-2:显示数据的bootstrap样式网格
    vue-virtual-scroller:带任意数目数据的顺畅的滚动
    DataVisualization:数据可视化
    vue-quill-editor:基于Quill适用于Vue2的富文本编辑器
    Vueditor:所见即所得的编辑器
    vue-html5-editor:html5所见即所得编辑器
    vue-msgbox:vuejs的消息框
    vue-slider:vue 滑动组件
    vue-core-image-upload:轻量级的vue上传插件
    vue-slide:vue轻量级滑动组件
    vue-lazyload-img:移动优化的vue图片懒加载插件
    vue-drag-and-drop-list:创建排序列表的Vue指令
    vue-progressive-image:Vue的渐进图像加载插件
    vuwe:基于微信WeUI所开发的专用于Vue2的组件库
    vue-dropzone:用于文件上传的Vue组件
    vue-charts:轻松渲染一个图表
    vue-swiper:易于使用的滑块组件
    vue-images:显示一组图片的lightbox组件
    vue-carousel-3d:VueJS的3D轮播组件
    vue-region-picker:选择中国的省份市和地区
    vue-typer:模拟用户输入选择和删除文本的Vue组件
    vue-impression:移动Vuejs2 UI元素
    vue-datatable:使用Vuejs创建的DataTableView
    vue-instant:轻松创建自动提示的自定义搜索控件
    vue-dragging:使元素可以拖拽
    vue-slider-component:在vue1和vue2中使用滑块
    vue2-loading-bar:最简单的仿Youtube加载条视图
    vue-datepicker:漂亮的Vue日期选择器组件
    vue-video:Vue.js的HTML5视频播放器
    vue-toast-mobile:VueJS的toast插件
    vue-image-crop-upload:vue图片剪裁上传组件
    vue-tooltip:带绑定信息提示的提示工具
    vue-highcharts:HighCharts组件
    vue-touch-ripple:vuejs的触摸ripple组件
    coffeebreak:实时编辑CSS组件工具
    vue-datasource:创建VueJS动态表格
    vue2-timepicker:下拉时间选择器
    vue-date-picker:VueJS日期选择器组件
    vue-scrollbar:最简单的滚动区域组件
    vue-quill:vue组件构建quill编辑器
    vue-google-signin-button:导入谷歌登录按钮
    vue-svgicon:创建svg图标组件的工具
    vue-float-label:VueJS浮动标签模式
    vue-baidu-map:基于 Vue 2的百度地图组件库
    vue-social-sharing:社交分享组件
    vue2-editor:HTML编辑器
    vue-tagsinput:基于VueJS的标签组件
    vue-easy-slider:Vue 2.x的滑块组件
    datepicker:基于flatpickr的时间选择组件
    vue-chart:强大的高速的vue图表解析
    vue-music-master:vue手机端网页音乐播放器
    handsontable:网页表格组件
    vue-simplemde:VueJS的Markdown编辑器组件
    vue-popup-mixin:用于管理弹出框的遮盖层
    cubeex:包含一套完整的移动UI
    vue-fullcalendar:vue FullCalendar封装
    vue-material-design:Vue MD风格组件
    vue-morris:Vuejs组件封装Morrisjs库
    we-vue:Vue2及weui1开发的组件
    vue-image-clip:基于vue的图像剪辑组件
    vue-bootstrap-table:可排序可检索的表格
    vue-radial-progress:Vue.js放射性进度条组件
    vue-slick:实现流畅轮播框的vue组件
    vue-pull-to-refresh:Vue2的上拉下拉
    vue-form-2:全面的HTML表单管理的解决方案
    vue-side-nav:响应式的侧边导航
    mint-indicator:VueJS移动加载指示器插件
    chartjs:Vue Bulma的chartjs组件
    vue-scroll:vue滚动
    vue-ripple:制作谷歌MD风格涟漪效果的Vue组件
    vue-touch-keyboard:VueJS虚拟键盘组件
    vue-chartkick:VueJS一行代码实现优美图表
    vue-ztree:用 vue 写的树层级组件
    vue-m-carousel:vue 移动端轮播组件
    vue-datepicker-simple:基于vue的日期选择器
    vue-tabs:多tab页轻型框架
    vue-verify-pop:带气泡提示的vue校验插件
    vue-parallax:整洁的视觉效果
    vue-img-loader:图片加载UI组件
    vue-typewriter:vue组件类型
    vue-smoothscroll:smoothscroll的VueJS版本
    vue-city:城市选择器
    vue-tree:vue树视图组件
    vue-ios-alertview:iOS7+ 风格的alertview服务
    dd-vue-component:订单来了的公共组件库
    paco-ui-vue:PACOUI的vue组件
    vue-cmap:Vue China map可视化组件
    vue-button:Vue按钮组件

    二、Vue.js开发框架


    vue.js:流行的轻量高效的前端组件化方案
    vue-admin:Vue管理面板框架
    electron-vue:Electron及VueJS快速启动样板
    vue-2.0-boilerplate:Vue2单页应用样板​
    vue-spa-template:前后端分离后的单页应用开发
    Framework7-Vue:VueJS与Framework7结合
    vue-bulma:轻量级高性能MVVM Admin UI框架
    vue-webgulp:仿VueJS Vue loader示例
    vue-element-starter:vue启动页

    三、Vue.js实用库


    vuex:专为 Vue.js 应用程序开发的状态管理模式
    vuelidate:简单轻量级的基于模块的Vue.js验证
    qingcheng:qingcheng主题
    vue-desktop:创建管理面板网站的UI库
    vue-meta:管理app的meta信息
    vue-axios:将axios整合到VueJS的封装
    vue-svg-icon:vue2的可变彩色svg图标方案
    avoriaz:VueJS测试实用工具库
    vue-framework7:结合VueJS使用的Framework7组件
    vue-bootstrap-modal:vue的Bootstrap样式组件
    vuep:用实时编辑和预览来渲染Vue组件
    vue-online:reactive的在线和离线组件
    vue-lazy-render:用于Vue组件的延迟渲染
    vue-password-strength-meter:交互式密码强度计
    element-admin:支持 vuecli 的 Element UI 的后台模板
    vue-electron:将选择的API封装到Vue对象中的插件
    cleave:基于cleave.js的Cleave组件
    vue-events:简化事件的VueJS插件
    vue-shortkey:应用于Vue.js的Vue-ShortKey 插件
    vue-cordova:Cordova的VueJS插件
    vue-router-transition:页面过渡插件
    vue-gesture:VueJS的手势事件插件
    http-vue-loader:从html及js环境加载vue文件
    vue-qart:用于qartjs的Vue2指令
    vuemit:处理VueJS事件
    vue-websocket:VueJS的Websocket插件
    vue-local-storage:具有类型支持的Vuejs本地储存插件
    lazy-vue:懒加载图片
    vue-bus:VueJS的事件总线
    vue-reactive-storage:vue插件的Reactive层
    vue-notifications:非阻塞通知库
    vue-lazy-component:懒加载组件或者元素的Vue指令
    v-media-query:vue中添加用于配合媒体查询的方法
    vue-observe-visibility:当元素在页面上可见或隐藏时检测
    vue-ts-loader:在Vue装载机检查脚本
    vue-pagination-2:简单通用的分页组件
    vuex-i18n:定位插件
    Vue.resize:检测HTML调整大小事件的vue指令
    vuex-shared-mutations:分享某种Vuex mutations
    vue-file-base64:将文件转换为Base64的vue组件
    modal:Vue Bulma的modal组件
    Famous-Vue:Famous库的vue组件
    leo-vue-validator:异步的表单验证组件
    Vue-Easy-Validator:简单的表单验证
    vue-truncate-filter:截断字符串的VueJS过滤器
    vue-zoombox:一个高级zoombox
    vue-input-autosize:基于内容自动调整文本输入的大小
    vue-lazyloadImg:图片懒加载插件

    四、Vue.js服务端


    nuxt.js:用于服务器渲染Vue app的最小化框架
    express-vue:简单的使用服务器端渲染vue.js
    vue-ssr:非常简单的VueJS服务器端渲染模板
    vue-ssr:结合Express使用Vue2服务端渲染
    vue-easy-renderer:Nodejs服务端渲染

    五、Vue.js辅助工具


    DejaVue:Vuejs可视化及压力测试
    vue-play:展示Vue组件的最小化框架
    vscode-VueHelper:目前vscode最好的vue代码提示插件
    vue-generate-component:轻松生成Vue js组件的CLI工具
    vue-multipage-cli:简单的多页CLI
    VuejsStarterKit:vuejs starter套件

    六、Vue.js应用实例


    koel:基于网络的个人音频流媒体服务
    pagekit:轻量级的CMS建站系统
    vuedo:博客平台
    jackblog-vue:个人博客系统
    vue-cnode:重写vue版cnode社区
    CMS-of-Blog:博客内容管理器
    rss-reader:简单的rss阅读器
    vue-ghpages-blog:依赖GitHub Pages无需本地生成的静态博客
    swoole-vue-webim:Web版的聊天应用
    vue-dashing-js:nuvo-dashing-js的fork
    fewords:功能极其简单的笔记本
    vue-blog:使用Vue2.0 和Vuex的vue-blog

    七、Vue.js Demo示例


    Vue-cnodejs:基于vue重写Cnodejs.org的webapp
    NeteaseCloudWebApp:高仿网易云音乐的webapp
    vue-zhihu-daily:知乎日报 with Vuejs
    vue-wechat:vue.js开发微信app界面
    vue2-demo:从零构建vue2 + vue-router + vuex 开发环境
    eleme:高仿饿了么app商家详情
    vue-demo:vue简易留言板
    maizuo:vue/vuex/redux仿卖座网
    spa-starter-kit:单页应用启动套件
    vue-music:Vue 音乐搜索播放
    douban:模仿豆瓣前端
    vue-Meizi:vue最新实战项目
    zhihudaily-vue:知乎日报web版
    vue-demo-kugou:vuejs仿写酷狗音乐webapp
    VueDemo_Sell_Eleme:Vue2高仿饿了么外卖平台
    vue2.0-taopiaopiao:vue2.0与express构建淘票票页面
    vue-leancloud-blog:一个前后端完全分离的单页应用
    node-vue-server-webpack:Node.js+Vue.js+webpack快速开发框架
    mi-by-vue:VueJS仿小米官网
    vue-fis3:流行开源工具集成demo
    vue2.x-douban:Vue2实现简易豆瓣电影webApp
    vue-demo-maizuo:使用Vue2全家桶仿制卖座电影
    vue-zhihudaily:知乎日报 Web 版本
    vue-adminLte-vue-router:vue和adminLte整合应用
    vue-axios-github:登录拦截登出功能
    Zhihu-Daily-Vue.js:Vuejs单页网页应用
    hello-vue-django:使用带有Django的vuejs的样板项目
    vue-cnode:vue单页应用demo
    x-blog:开源的个人blog项目
    vue-express-mongodb:简单的前后端分离案例
    websocket_chat:基于vue和websocket的多人在线聊天室
    photoShare:基于图片分享的社交平台
    vue-zhihudaily-2.0:使用Vue2.0+vue-router+vuex创建的zhihudaily
    notepad:本地存储的记事本
    vueBlog:前后端分离博客
    vue-ruby-china:VueJS框架搭建的rubychina平台
    Zhihu_Daily:基于Vue和Nodejs的Web单页应用
    vue-koa-demo:使用Vue2和Koa1的全栈demo
    vue2.x-Cnode:基于vue全家桶的Cnode社区
    life-app-vue:使用vue2完成多功能集合到小webapp
    github-explorer:寻找最有趣的GitHub库
    vue-trip:vue2做的出行webapp
    vue-ssr-boilerplate:精简版的ofvue-hackernews-2
    vue-bushishiren:不是诗人应用
    houtai:基于vue和Element的后台管理系统
    ios7-vue:使用vue2.0 vue-router vuex模拟ios7
    Framework7-VueJS:使用移动框架的示例
    cnode-vue:基于vue和vue-router构建的cnodejs web网站SPA
    vue-cli-multipage-bootstrap:将vue官方在线示例整合到组件中
    vue-cnode:用 Vue 做的 CNode 官网
    HyaReader:移动友好的阅读器
    zhihu-daily:轻松查看知乎日报内容
    seeMusic:跨平台云音乐播放器
    vue-cnode:使用cNode社区提供的接口
    zhihu-daily-vue:知乎日报
    sls-vuex2-demo:vuex2商城购物车demo
    vue-dropload:用以测试下拉加载与简单路由
    vue-cnode-mobile:搭建cnode社区
    Vuejs-SalePlatform:vuejs搭建的售卖平台demo
    v-notes:简单美观的记事本
    vue-starter:VueJs项目的简单启动页
    vue-memo:用 vue写的记事本应用

    八、详细分类


    01、UI组件及框架


    element - 饿了么出品的Vue2的web UI工具套件
    mint-ui - Vue 2的移动UI元素
    iview - 基于 Vuejs 的开源 UI 组件库
    Keen-UI - 轻量级的基本UI组件合集
    vue-material - 通过Vue Material和Vue 2建立精美的app应用
    muse-ui - 三端样式一致的响应式 UI 库
    vuetify - 为移动而生的Vue JS 2组件框架
    vonic - 快速构建移动端单页应用
    vue-blu - 帮助你轻松创建web应用
    vue-multiselect - Vue.js选择框解决方案
    VueCircleMenu - 漂亮的vue圆环菜单
    vue-chat - vuejs和vuex及webpack的聊天示例
    radon-ui - 快速开发产品的Vue组件库
    vue-waterfall - Vue.js的瀑布布局组件
    vue-carbon - 基于 vue 开发MD风格的移动端
    vue-beauty - 由vue和ant design创建的优美UI组件
    bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件
    vueAdmin - 基于vuejs2和element的简单的管理员模板
    vue-ztree - 用 vue 写的树层级组件
    vue-tree - vue树视图组件
    vue-tabs - 多tab页轻型框架

    02、滚动scroll组件


    vue-scroller - Vonic UI的功能性组件
    vue-mugen-scroll - 无限滚动组件
    vue-infinite-loading - VueJS的无限滚动插件
    vue-virtual-scroller - 带任意数目数据的顺畅的滚动
    vue-infinite-scroll - VueJS的无限滚动指令
    vue-scrollbar - 最简单的滚动区域组件
    vue-scroll - vue滚动
    vue-pull-to-refresh - Vue2的上拉下拉
    mint-loadmore - VueJS的双向下拉刷新组件
    vue-smoothscroll - smoothscroll的VueJS版本

    03、slider组件


    vue-awesome-swiper - vue.js触摸滑动组件
    vue-slick - 实现流畅轮播框的vue组件
    vue-swipe - VueJS触摸滑块
    vue-swiper - 易于使用的滑块组件
    vue-images - 显示一组图片的lightbox组件
    vue-carousel-3d - VueJS的3D轮播组件
    vue-slide - vue轻量级滑动组件
    vue-slider - vue 滑动组件
    vue-m-carousel - vue 移动端轮播组件
    dd-vue-component - 订单来了的公共组件库
    vue-easy-slider - Vue 2.x的滑块组件

    04、编辑器


    markcook - 好看的markdown编辑器
    eme - 优雅的Markdown编辑器
    vue-syntax-highlight - Sublime Text语法高亮
    vue-quill-editor - 基于Quill适用于Vue2的富文本编辑器
    Vueditor - 所见即所得的编辑器
    vue-html5-editor - html5所见即所得编辑器
    vue2-editor - HTML编辑器
    vue-simplemde - VueJS的Markdown编辑器组件
    vue-quill - vue组件构建quill编辑器

    05、图表


    Echarts
    vue-table - 简化数据表格
    vue-chartjs - vue中的Chartjs的封装
    vue-charts - 轻松渲染一个图表
    vue-chart - 强大的高速的vue图表解析
    vue-highcharts - HighCharts组件
    chartjs - Vue Bulma的chartjs组件
    vue-chartkick - VueJS一行代码实现优美图表

    06、日历


    vue-calendar - 日期选择插件
    vue-datepicker - 日历和日期选择组件
    vue-datetime-picker - 日期时间选择控件
    vue2-calendar - 支持lunar和日期事件的日期选择器
    vue-fullcalendar - 基于vue.js的全日历组件
    vue-datepicker - 漂亮的Vue日期选择器组件
    datepicker - 基于flatpickr的时间选择组件
    vue2-timepicker - 下拉时间选择器
    vue-date-picker - VueJS日期选择器组件
    vue-datepicker-simple - 基于vue的日期选择器

    07、地址选择


    vue-city - 城市选择器
    vue-region-picker - 选择中国的省份市和地区

    08、地图


    vue-amap - 基于Vue 2和高德地图的地图组件
    vue-google-maps - 带有双向数据绑定Google地图组件
    vue-baidu-map- 基于 Vue 2的百度地图组件库
    vue-cmap - Vue China map可视化组件

    09、播放器


    vue-video-player - VueJS视频及直播播放器
    vue-video - Vue.js的HTML5视频播放器
    vue-music-master - vue手机端网页音乐播放器

    10、文件上传


    vue-upload-component - Vuejs文件上传组件
    vue-core-image-upload - 轻量级的vue上传插件
    vue-dropzone - 用于文件上传的Vue组件

    11、图片处理


    vue-lazyload-img - 移动优化的vue图片懒加载插件
    vue-image-crop-upload - vue图片剪裁上传组件
    vue-svgicon - 创建svg图标组件的工具
    vue-img-loader - 图片加载UI组件
    vue-image-clip- 基于vue的图像剪辑组件
    vue-progressive-image - Vue的渐进图像加载插件

    12、提示


    vue-toast-mobile - VueJS的toast插件
    vue-msgbox - vuejs的消息框
    vue-tooltip - 带绑定信息提示的提示工具
    vue-verify-pop - 带气泡提示的vue校验插件

    13、进度条


    vue-radial-progress - Vue.js放射性进度条组件
    vue-progressbar - vue轻量级进度条
    vue2-loading-bar - 最简单的仿Youtube加载条视图

    14、开发框架汇总


    vue-admin - Vue管理面板框架
    electron-vue - Electron及VueJS快速启动样板
    vue-2.0-boilerplate - Vue2单页应用样板
    vue-webgulp - 仿VueJS Vue loader示例
    vue-bulma - 轻量级高性能MVVM Admin UI框架
    vue-spa-template - 前后端分离后的单页应用开发
    Framework7-Vue - VueJS与Framework7结合
    vue-element-starter - vue启动页

    15、实用库汇总


    vuelidate - 简单轻量级的基于模块的Vue.js验证
    qingcheng - qingcheng主题
    vuex - 专为 Vue.js 应用程序开发的状态管理模式
    vue-axios - 将axios整合到VueJS的封装
    vue-desktop - 创建管理面板网站的UI库
    vue-meta - 管理app的meta信息
    avoriaz - VueJS测试实用工具库
    vue-framework7 - 结合VueJS使用的Framework7组件
    vue-lazy-render - 用于Vue组件的延迟渲染
    vue-svg-icon - vue2的可变彩色svg图标方案
    vue-online - reactive的在线和离线组件
    vue-password-strength-meter - 交互式密码强度计
    vuep - 用实时编辑和预览来渲染Vue组件
    vue-bootstrap-modal - vue的Bootstrap样式组件
    element-admin - 支持 vuecli 的 Element UI 的后台模板
    vue-shortkey - 应用于Vue.js的Vue-ShortKey 插件
    cleave - 基于cleave.js的Cleave组件
    vue-events - 简化事件的VueJS插件
    http-vue-loader - 从html及js环境加载vue文件
    vue-electron - 将选择的API封装到Vue对象中的插件
    vue-router-transition - 页面过渡插件
    vuemit - 处理VueJS事件
    vue-cordova - Cordova的VueJS插件
    vue-qart - 用于qartjs的Vue2指令
    vue-websocket - VueJS的Websocket插件
    vue-gesture - VueJS的手势事件插件
    vue-local-storage - 具有类型支持的Vuejs本地储存插件
    lazy-vue - 懒加载图片
    vue-lazyloadImg - 图片懒加载插件
    vue-bus - VueJS的事件总线
    vue-observe-visibility - 当元素在页面上可见或隐藏时检测
    vue-notifications - 非阻塞通知库
    v-media-query - vue中添加用于配合媒体查询的方法
    vuex-shared-mutations - 分享某种Vuex mutations
    vue-lazy-component - 懒加载组件或者元素的Vue指令
    vue-reactive-storage - vue插件的Reactive层
    vue-ts-loader - 在Vue装载机检查脚本
    vue-pagination-2 - 简单通用的分页组件
    vuex-i18n - 定位插件
    Vue.resize - 检测HTML调整大小事件的vue指令
    vue-zoombox - 一个高级zoombox
    leo-vue-validator - 异步的表单验证组件
    modal - Vue Bulma的modal组件
    Famous-Vue - Famous库的vue组件
    vue-input-autosize - 基于内容自动调整文本输入的大小
    vue-file-base64 - 将文件转换为Base64的vue组件
    Vue-Easy-Validator - 简单的表单验证
    vue-truncate-filter - 截断字符串的VueJS过滤器


    十六、服务端

    vue-ssr - 结合Express使用Vue2服务端渲染
    nuxt.js - 用于服务器渲染Vue app的最小化框架
    vue-ssr - 非常简单的VueJS服务器端渲染模板
    vue-easy-renderer - Nodejs服务端渲染
    express-vue - 简单的使用服务器端渲染vue.js


    十七、辅助工具

    DejaVue - Vuejs可视化及压力测试
    vue-generate-component - 轻松生成Vue js组件的CLI工具
    vscode-VueHelper - 目前vscode最好的vue代码提示插件
    vue-play - 展示Vue组件的最小化框架
    VuejsStarterKit - vuejs starter套件
    vue-multipage-cli - 简单的多页CLI


    十八、应用实例

    pagekit - 轻量级的CMS建站系统
    vuedo - 博客平台
    koel - 基于网络的个人音频流媒体服务
    CMS-of-Blog - 博客内容管理器
    vue-cnode - 重写vue版cnode社区
    vue-ghpages-blog - 依赖GitHub Pages无需本地生成的静态博客
    swoole-vue-webim - Web版的聊天应用
    fewords - 功能极其简单的笔记本
    jackblog-vue - 个人博客系统
    vue-blog - 使用Vue2.0 和Vuex的vue-blog
    vue-dashing-js - nuvo-dashing-js的fork
    rss-reader - 简单的rss阅读器

     

    更多相关内容
  • 主要介绍了vue实现父子组件之间的通信以及兄弟组件的通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下
  • 20多个好用的 Vue 组件

    千次阅读 2022-03-30 08:00:02
    作者:lindelof 译者:前端小智 来源:medium ...在本文中,我们将探讨一些最常见的vue js组件。你可以收藏一波。 Table 类 Vue Tables-2 地址:https://github.com/matfish2/vue-tables-2 Vue Tab.

    作者:lindelof
    译者:前端小智
    来源:medium

    有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

    本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

    在本文中,我们将探讨一些最常见的vue js组件。你可以收藏一波。

    Table 类

    Vue Tables-2

    001.png

    地址:https://github.com/matfish2/vue-tables-2

    Vue Tables 2旨在为开发者提供一个功能齐全的工具集,以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外,Vue Tables 2正在不断成长、改进,同时也在获得新的功能。

    特点

    • 可选行及粘性头部
    • 虚拟分页
    • 下载客户组件数据的CSV
    • 有数据层支持的多级分组
    • Tailwind 主题

    Handsontable

    002.png

    地址:https://github.com/handsontable/handsontable/tree/master/wrappers/vue

    handsontable是一款页面端的表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。

    同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作。

    此外,它还适用于React、Angular和Vue。Handsontable 是一个JavaScript组件,它将数据网格功能与电子表格的用户体验相结合。此外,它还提供数据绑定、数据验证、过滤、排序和CRUD操作。

    特点

    • 多列排序
    • 非连续选择
    • 过滤数据和验证数据
    • 导出文件
    • 有条件的格式化
    • 合并单元格
    • 隐藏行/列
    • 上下文菜单和注释

    Ag Grid Vue

    003.png

    地址:https://github.com/ag-grid/ag-grid

    Ag-Grid 是一个基于Vue.js的数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript中实现的,零依赖关系。

    ag-Grid通过包装器组件支持Vue,你可以在应用程序中,就像其他任何Vue组件一样使用ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。你甚至可以使用Vue组件来自定义网格UI和单元格内容/行为。

    Vue Easytable

    005.png

    地址:https://github.com/huangshuwei/vue-easytable

    vue-easytable是我遇到过的最强大的Vue表格组件之一。

    表格组件具有许多内置功能,比如说,单元格省略号、固定/灵活的列大小调整、自定义过滤等等。它有几个特点:

    • 国际化
    • 主题定制
    • 内置主题
    • 虚拟滚动
    • 列固定
    • 表头固定
    • 表头分组

    Vue Good Table

    006.png

    地址:https://github.com/xaksis/vue-good-table

    Vue-Good-Table是一个基于Vue.js的数据表组件,简单、干净,具有排序、列过滤、分页等更多基本功能。它有几个特性:

    • 表搜索和排序
    • 列过滤和分页
    • 复选框表格
    • 行分组
    • 行样式
    • 行多选

    Vue Toastification

    007.png

    地址:https://github.com/Maronato/vue-toastification

    它提供轻巧、简单和漂亮的吐司提示。它有内置的Nuxt支持。而且,它还支持新的Composition API和Vue 3。我们还可以J使用SX来开发自定义组件,提供更加灵活的功能。另外,通用注册允许它在任何应用程序内使用,甚至是React。它有几点特性:

    • 完全用Typescript编写,支持所有类型
    • 支持RTL
    • 定制一切
    • 滑动关闭
    • 使用onClose、onClick和onMounted钩子创建自定义体验
    • 以编程方式删除和更新吐司

    Vue Toasted

    地址:https://github.com/shakee93/vue-toasted

    008.png

    Vue Toasted是 Vue 最好的toast(提示)插件之一。它被Vue,Laravel,NuxtJS 等许多组织所信任,它响应性强,兼容性好,使用方便,吸引人,有丰富的功能、图标、动作等。

    Vue Notifications

    009.png

    地址:https://github.com/se-panfilov/vue-notifications

    Vue Notifications是一个与库无关的通知组件,非阻塞。

    VueNotiments将您的应用程序与通知UI库连接起来。支持miniToastr、VueToasted、VueEasyToast、toastr、iziToast、Noty、swal。

    Vue Awesome Notifications

    010.png

    地址:https://f3oall.github.io/awesome-notifications/

    Awesome Notifications是一个轻量级的,完全可自定义的JavaScrip Vue Awesome Notifications,它是Awesome Notifications库的Vue.js版本。

    Vue Wait

    011.png

    地址:https://github.com/f/vue-wait

    Vue Wait 这是一个用于VUE、Vuex和Nuxt应用的复杂装载器和进度管理组件。

    Vue Wait帮助管理页面上的多个加载状态,状态之间没有任何冲突。基于一个非常简单的想法:通过管理具有多个加载状态的数组(或者Vuex存储),让内置加载程序组件侦听注册的加载程序,并立即进入加载状态。

    Vue Content Loader

    地址:https://github.com/egoist/vue-content-loader

    012.png

    Vue Content Loader是一个基于Vue.js的SVG占位符加载,可自定义的SVG组件,用于创建占位符加载,例如Facebook加载卡。 Vue Content Loader是react-content-loader的Vue实现。

    1. 完全可定制:你可以改变颜色,速度和大小
    2. 创建自己的加载:使用在线工具轻松创建你的自定义加载
    3. 你现在就可以使用它:已经有很多预设了
    4. 性能

    Epic Spinners

    013.png

    地址:https://epic-spinners.epicmax.co/

    EpicSpinners是一组易于使用的纯css打造的网页Loading效果,并且同时整合了Vue组件可以方便的在Vue项目中进行使用,由于是纯css打造,你可以在任意网页项目中自行整合并使用!

    Vue Radial Progress

    014.png

    地址:https://github.com/wyzant-dev/vue-radial-progress

    Vue Radial Progress 这是一个径向进度条效果的加载器组件,使用svg和javascript绘制带有渐变径向进度条效果的加载器,可以用作加载、进度提示。

    ICONS

    Vue Feather Icons

    地址:https://github.com/egoist/vue-feather-icons

    015.png

    Feather 是一套面向设计师和开发者的开源图标库,是一个简单漂亮的开源图标库。 每个图标都设计在一个24×24的网格上,强调简单,一致性和易读性。很多大厂出品的前端框架都内置了这款可以免费商用的图标。

    特点

    • 每一枚图标都是按照统一标准进行设计,具有完美像素对齐;
    • 设计风格一致,完胜那些拼凑混搭的图标库;
    • 覆盖多种开发场景的支持,对开发者非常友好。

    Vue Awesome

    地址:https://github.com/Justineo/vue-awesome

    016.png

    Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,不用设计师,我们可以直接在Font Awesome中找到并且使用。个人感觉Font Awesome的图标还是很齐全的,绝大多数的图标它都包含了,而且支持各种框架。

    Vue Material Design Icons

    地址:https://github.com/robcresswell/vue-material-design-icons

    一个作为单文件组件的SVG Material Design图标集合。此外,这个库是一个Vue单文件组件的集合,用于渲染Material Design图标。此外,它还包括一些CSS,有助于使图标的缩放更容易一些。

    Charts

    Vue Apexcharts

    地址:https://github.com/apexcharts/vue-apexcharts

    017.png

    Apexcharts是一个现代的JavaScript图表库/可通过简单的API构建交互式图表和可视化。Vue Apexcharts是ApexCharts的Vue.js组件。

    Vue Echarts

    地址:https://github.com/Justineo/vue-echarts

    018.png

    vue-echarts是基于echarts封装实现的一个组件库,直接按照正常的组件引用方式,安装引用即可,具体的安装和引用读者可以直接阅读vue-echarts技术文档。

    Vue Chartjs

    地址:https://github.com/apertureless/vue-chartjs

    019.png

    vue-chartjs 是一个 Vue 对于 Chart.js 的封装,让用户可以在Vue中轻松使用Chart.js,很简单的创建可复用的图表组件,非常适合需要简单的图表并尽可能快地运行的人。 vue-chartjs抽象了基本逻辑,同时也暴露了Chart.js对象,让用户获得最大的灵活性。

    V-Charts

    地址:https://github.com/ElemeFE/v-charts

    020.png

    V-Charts 是基于 Vue2.0 和 Echarts 封装的图标组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,就可以生成常见的图表。

    时间

    Vue Timer Hook

    地址:https://github.com/riderx/vue-timer-hook

    021.png

    Vue3 计时器模块的灵感来自 react-timer-hook。此外,它是一个自定义的钩子,用来处理vue 3 组件中的定时器、秒表和时间逻辑/状态。

    Vue Horizontal Timeline:

    地址:https://github.com/guastallaigor/vue-horizontal-timeline

    022.png

    Vue Horizontal Timeline 是一个用Vue.js制作的简单的水平时间线组件。

    代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

    原文:https://medium.com/js-dojo/20-usefulue-js-components-2022-3bf9fbe5b556

    交流

    有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

    本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

    展开全文
  • vue组件

    千次阅读 2022-05-19 09:10:36
    1.Vue组件的定义、注册方式和模板使用 1.1 组件的定义 定义组件 定义组件名的方式有两种 1.2 组件的分类 1.3 引用模版 2. 组件间数据的通信 2.1 父子组件 2.2 组件间数据通信 2.2.1 子组件访问父组件的数据...

    目录

    1.Vue组件的定义、注册方式和模板使用

    1.1 组件的定义

    定义组件

    定义组件名的方式有两种

    1.2 组件的分类

    1.3 引用模版

    2. 组件间数据的通信

    2.1 父子组件

    2.2 组件间数据通信

    2.2.1 子组件访问父组件的数据(父传子)

    2.2.2 父组件访问子组件的数据(子传父)

    2.2.3 非父子通信

    2.2.4 总结组件之间的通讯

    2.3 单向数据流

    3.过滤器

    过滤器分为两种

    过滤器使用地方两个位置

    全局过滤器

    局部过滤器

    4.路由

    4.1 定义

    4.2 分类

    4.2.1 后端路由

    4.2.2 前端路由

    4.3 Vue 路由

    嵌套路由

    5.使用axios进行ajax操作

    5.1 Axios简介

    5.2 Axios特点

    5.3 Axios基本用法

    get和post的区别

    Vue中axios中箭头函数的this和function(response)函数体中的this的区别

    Axios的get请求代码示例

    Axios的post请求和传参方式代码示例

    ​编辑

    后端代码


    1.Vue组件的定义、注册方式和模板使用

    1.1 组件的定义

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码.

    vue组件是把页面(html代码,CSS代码)进行模块化

    如下图所示,一个页面分四个部分,每个部分是个vue组件,而页面成了vue组件的容器。

     vue.js中创建组件有三个步骤:定义组件,注册组件以及使用组件

    定义组件

    • 方式1:先创建一个组件构造器,然后由组件构造器创建组件.如:var myCom =Vue.extend({})

    • 方式2:使用Vue.component()直接创建组件。

      Vue.component('组件名称,{}');{}相当于创建vue对象传入的选项参数

    定义组件名的方式有两种

    • 使用 kebab-case:使用 kebab-case (短横线分隔命名) 定义一个组件(kebab发音/kI'ba:b/)my-com     myCom     <my-com></my-com>     <myCom></myCom>

    • 使用 PascalCase:(驼峰式命名) 定义一个组件

    当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>。当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name><MyComponentName> 都是可接受的。

    1.2 组件的分类

    • 全局组件

    • 局部组件

      通过选项components定义,但只能在当前Vue实例中使用

    1.3 引用模版

    将组件内容放到<template>中引用。

    注意:template组件中,有且只有一个根元素

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>组件定义和使用</title>
            <script src="../js/vue.js"></script>
        </head>
        <body>
            <!--浏览器解析引擎不能解析 ,因为不是标准的html标签, 也没有vue去挂载, 跟vue没有关系-->
            <global-component-a></global-component-a>
    
            <div id="app1">
                <p>{{message}}</p>
                <!--使用全局组件-->
                <!--全局组件, 所有的vue实例对象都能解析-->
                <global-component-a></global-component-a>
                <!--使用局部组件a-->
                <component-a></component-a>
                <!--使用局部组件b-->
                <component-b></component-b>
            </div>
            <div id="app2">
                <p>{{message}}</p>
                <!--使用全局组件-->
                <global-component-a></global-component-a>
            </div>
            <div id="app3">
                <p>{{message}}</p>
                <!--使用全局组件-->
                <global-component-a></global-component-a>
                <!--使用局部组件a-->
                <component-a></component-a>
                <!--使用局部组件b-->
                <component-b></component-b>
                <!--组件B名称是componentB, 但是使用组件短中线格式<component-b></component-b>-->
                <!--不识别-->
                <componentB></componentB>
            </div>
        </body>
    
        <!-- 定义模板 -->
        <template id="myTemplate">
            <!-- template模板中里面只能定义一个根元素 -->
            <div>
                <h3>{{info}}</h3>
                <a href="http://www.baidu.com">百度</a>
            </div>
        </template>
    
        <script>
            // 定义全局组件  Vue.component('组件名称,{}');{}相当于创建vue对象传入的选项参数
            Vue.component('global-component-a', {
                template: `#myTemplate`,
                // 因为组件是会被多次引用, 就会创建多个组件对象, 为了防止多个组件对象的数据相互干扰, 数据也要跟着组件对象创建多个
                data() {
                    return {
                        info: "hello",
                    }
                }
            });
            let vm1 = new Vue({
                el: "#app1",
                // 有时会出错
                // data:{
                //     message: "我是app1"
                // }
                data() {
                    return {
                        message: "我是app1",
                    }
                }
            });
            let vm2 = new Vue({
                el: "#app2",
                data() {
                    return {
                        message: "我是app2",
                    }
                    //下面的程序返回null
                    // return
                    // {
                    //     message: "我是app2"
                    // }
                }
            });
    
            let vm3 = new Vue({
                el: "#app3",
                data() {
                    return {
                        message: "我是app3",
                    }
                },
                //定义局部组件  只能用在app3挂载的dom对象上
                components: {
                    //可以定义多个组件
                    //格式  组件名称:{}   {}相当于创建vue对象传入的选项参数
                    "component-a": {
                        template: `#myTemplate`,
                        data() {
                            return {
                                info: "局部组件a的hello",
                            }
                        }
                    },
                    //组件命名名称推荐使用短中线
                    "componentB": {
                        template: `#myTemplate`,
                        data() {
                            return {
                                info: "局部组件b的hello",
                            }
                        }
                    }
                }
            })
        </script>
    </html>

    2. 组件间数据的通信

    2.1 父子组件

    在一个组件内部定义另一个组件,称为父子组件

    子组件只能在父组件内部使用

    默认情况下,子组件无法访问父组件中的数据,每个组件实例的作用域是独立的

    2.2 组件间数据通信

    2.2.1 子组件访问父组件的数据(父传子)

    • 在调用子组件时,绑定想要获取的父组件中的数据在子组件内部,使用props选项声明获取的数据,即接收来自父组件的数据。
    • 父组件通过props向下传递数据给子组件
    • 注:组件中的数据存在方式共有三种:data、props、computed

    props传递数据两种形式

    • 数组方式: props:['msg', 'username', 'age', 'userObj']
    • 对象方式:该方式提供了对数据的校验、类型监测、默认值设置操作。

    prop命名,可以在在组件中使用postTitle(驼峰名称),在html中是使用短横线命名post-title,如下代码示例

    Vue.component('blog-post', {
      // 在 JavaScript 中是驼峰命名的
      props: ['postTitle'],
      template: '<h3>{{ postTitle }}</h3>'
    })
    <!-- 在HTML中是短横线的 -->
    <blog-post post-title="hello!"></blog-post>

    父组件传子组件的代码实例

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>子组件访问父组件的数据(父传子)</title>
            <script src="../js/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <h2>{{message}}</h2>
                <!--使用局部组件-->
                <!--局部组件props数组定义的属性名称, 在html使用时, v-bind属性绑定, 属性名称是短横线格式-->
                <component-a :parent-message="message"></component-a>
            </div>
        </body>
        <template id="myTemplate">
            <div>
                <p>{{childMessage}}</p>
                <p>父组件传入的值:{{parentMessage}}</p>
            </div>
        </template>
        <script>
            //定义组件对象
            let componentA = {
                template: `#myTemplate`,
                data() {
                    return {
                        childMessage: "子组件定义的childMessage的值"
                    }
                },
                //通过props属性定义的数组, 来定义外界传入组件的值
                //定义属性名称是驼峰格式
                props: ["parentMessage"]
            }
            let vm = new Vue({
                el: "#app",
                data() {
                    return {
                        message: "父的message值"
                    }
                },
    
                //注册局部组件
                components: {
                    "component-a": componentA
                }
            })
        </script>
    </html>

    2.2.2 父组件访问子组件的数据(子传父)

    • 第一步:在子组件中使用 vm.$emit(事件名,数据) 触发一个自定义事件,事件名自定义。

    • 第二步:父组件在使用子组件的地方监听子组件触发的事件,并在父组件中定义方法,用来获取数据。 

    • 总结:子组件通过events(事件)给父组件发送消息,实际上就是子组件把自己的数据发送到父组件

     <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>父组件访问子组件的数据(子传父)</title>
            <script src="../js/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <h2>{{info}}</h2>
                <!--使用局部子组件-->
                <!--@itemClick绑定自定义的子组件itemClick事件到父组件到回调方法上-->
                <component-a @item-click="parentClick"></component-a>
            </div>
        </body>
        <template id="myTemplate">
            <div>
                <!--根据分类展示多个按钮, 当点击按钮会调用方法btnClick并把每一类的对象传进去-->
                <input type="button" v-for="item in categories" v-bind:value="item.name" @click="btnClick(item)">
            </div>
        </template>
        <script>
            //定义组件
            let componentA = {
                template: `#myTemplate`,
                data() {
                    return {
                        //分类
                        categories: [
                            {id: 1, name: "电脑"},
                            {id: 2, name: "衣帽"},
                            {id: 3, name: "零食"},
                            {id: 4, name: "生鲜"}
                        ],
                    }
                },
                methods: {
                    btnClick(item) {
                        //触发自定义的事件, 同时把item事件传进去
                        //$emit("自定义的事件名称", 数据) 触发自定义的事件
                        //自定义事件的名称, 全部小写字母或短横线, 不能使用驼峰, 因为html不区分大小写
                        this.$emit("item-click", item);
                    }
                }
            };
            let vm = new Vue({
                el: "#app",
                data() {
                    return {
                        info: "哈哈",
                    }
                },
                //注册组件
                components: {
                    "component-a": componentA,
                },
                methods: {
                    //父组件的回调函数, 接收参数(参数是子组件触发自定义事件传进来的)
                    parentClick(item) {
                        this.info = `子组件点击了按钮, 父组件收到子组件数据id为:${item.id},name为:${item.name}`;
                    }
                }
            })
        </script>
    </html>

    2.2.3 非父子通信

    创建一个Vue实例作为中央事件总线,通过它来监听($on)和触发($emit)事件。适用于组件间全部通信方式。

    //实例Vue实例作为中央事件总线
    var Event=new Vue();
    //发送事件
    Event.$emit(事件名,数据);
    //监听事件
    Event.$on(事件名,data => {});

    假设兄弟组件有三个,分别是 A、B、C 组件,C 组件如何获取 A 或者 B 组件的数据

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="../js/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <!--使用ABC三个组件-->
                <my-a></my-a>
                <my-b></my-b>
                <my-c></my-c>
            </div>
        </body>
        <!--定义A、B、C三个组件的显示模板-->
        <template id="a">
            <div>
                <h3>{{msg}}</h3>
                <input type="button" :value="msg" @click="send()">
            </div>
        </template>
        <template id="b">
            <div>
                <h3>{{msg}}</h3>
                <input type="button" :value="msg" @click="send()">
            </div>
        </template>
        <template id="c">
            <div>
                <h3>{{msg}}</h3>
                <p>{{name}}</p>
                <p>{{age}}</p>
            </div>
        </template>
        <script>
            //空的vue对象 空的vue触发事件和绑定时间,完成数据传递
            let Event = new Vue();
            //定义组件A、B、C
            let A = {
                template: `#a`,
                data() {
                    return {
                        msg: "A组件",
                        name: "Tom",
                    }
                },
                methods: {
                    send() {
                        //$emit触发自定义的事件把数据传出去
                        Event.$emit("data-a", this.name);
                    }
                }
            };
            let B = {
                template: `#b`,
                data() {
                    return {
                        msg: "B组件",
                        age: 18,
                    }
                },
                methods: {
                    send() {
                        //$emit触发自定义的事件把数据传出去
                        Event.$emit("data-b", this.age);
                    }
                }
            };
            let C = {
                template: `#c`,
                data() {
                    return {
                        msg: "C组件",
                        name: '',
                        age: ''
                    }
                },
                //vue的生命周期钩子函数  挂载完成之后
                mounted() {
                    //$on()绑定自定义事件  $on("事件名称", 回调方法)
                    Event.$on("data-a", (name) => {
                        this.name = name;
                    });
                    Event.$on("data-b", age => this.age = age);
                }
            };
            //创建vue对象
            let vm = new Vue({
                el: "#app",
                components: {
                    //注册三个组件A、B、C
                    "my-a": A,
                    "my-b": B,
                    "my-c": C,
                }
            })
        </script>
    </html>

    2.2.4 总结组件之间的通讯

    2.3 单向数据流

    props是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来,即子组件中使用的父组件数据发生变化,无法传导给父组件。而且不允许子组件直接修改父组件中的数据,会直接报错,这样更有利于组件间的解耦

    解决方式:

    • 方式1:如果子组件想把它作为局部数据来使用,可以将数据存入另一个变量中再操作,不影响父组件中的数据。

    • 方式2:如果子组件想修改数据并且同步更新到父组件

      • 可以将父组件中的数据包装成对象,然后在子组件中修改对象的属性(因为对象是引用类型,指向同一个内存空间),推荐使用。

    3.过滤器

    过滤数据是我们日常开发中必然会用到的。 常见的场景:当我们从后端请求到数据列表时,我们需要对其中符合条件的数据进行筛选、当我们拿到数据,我们希望把英文首字母大写,等等。

    过滤器分为两种

    • 单个组件的过滤器,也叫做局部过滤器,

    • vue实例全局的过滤器,它可以被应用在任何地方。

    过滤器使用地方两个位置

    • {{ message | filterA }}双括号插值内

    • <h1 v-bind:id="message | filterA">{{ message }}</h1>v-bind绑定的值的地方

    过滤器也可以使用多个,会依次执行

    例如:{{ message | filterA |filterB }} 这个例子中会把message 的当做参数传入A过滤器进行过滤,A过滤器过滤完的数据返回值会传入B过滤器

    全局过滤器

    Vue.filter("过滤器名称",函数);

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>全局过滤器</title>
            <script src="../js/vue.js"></script>
        </head>
        <body>
            <div id="app1">
                <!--插值表达式  使用过滤器-->
                <h2>{{message | upperCase}}</h2>
            </div>
            <div id="app2">
                <h2>{{message | upperCase}}</h2>
            </div>
        </body>
        <script>
            //定义全局过滤器 Vue.filter("过滤器的名称", 函数/方法);
            Vue.filter("upperCase", (value) => {
                //value是数据过滤中传入的数据
                //注意点: 过滤器的函数一定要有返回值
                if (!value) return "";
                value = value.toString();
                //把字符转换成大写
                return value.toUpperCase();
            });
            //创建vue对象
            let vm1 = new Vue({
                el: "#app1",
                data() {
                    return {
                        message: "Hello world",
                    }
                }
            });
            let vm2 = new Vue({
                el: "#app2",
                data() {
                    return {
                        message: "gou zai zai",
                    }
                }
            });
        </script>
    </html>

    局部过滤器

    定义局部的过滤器 定义格式:fliters:{过滤器名称:函数}

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="../js/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <component-a :msg="message"></component-a>
            </div>
        </body>
        <template id="myTemplate">
            <!--capitalize  局部过滤器只能用在 自定义组件挂载template页面中-->
            <h3>{{msg | capitalize}}</h3>
        </template>
        <script>
            //定义组件对象
            let componentA = {
                template: `#myTemplate`,
                props: ["msg"],
                //定义注册局部过滤器
                filters: {
                    //es6 过滤器名称:匿名函数
                    //或者 过滤器名称(){}
                    capitalize(value) {
                        if (!value) return "";
                        value = value.toString();
                        //转换首字母大写
                        value = value.charAt(0).toUpperCase() + value.substring(1);
                        //一定要返回值
                        return value;
                    }
                }
            }
            //创建vue对象
            let xm = new Vue({
                el: "#app",
                data() {
                    return {
                        message: "ddd",
                    }
                },
                //注册局部组件
                components: {
                    "component-a": componentA,
                }
            });
        </script>
    </html>

     

    4.路由

    4.1 定义

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。

    4.2 分类

    4.2.1 后端路由

    例如分配一个站点,服务器地址是:http://192.168.1.200:8899,在这个网站中提供了三个界面

    http://192.168.1.200:8899/index.html          主页
    http://192.168.1.200:8899/about/about.html    关于我们页面
    http://192.168.1.200:8899/feedback.html       反馈界面

    当我们在浏览器输入 http://192.168.1.200:8899/index.html 来访问界面的时候,web 服务器就会接收到这个请求,然后把 index.html 解析出来,并找到相应的 index.html 并展示出来,这就是路由的分发,路由的分发是通过路由功能来完成的

    4.2.2 前端路由

    1、虽然前端路由和后端路由的实现方式不一样,但是原理都有是相同的,其中一个方式,前端路由的功能都是通过 hash 「散列值」 来实现的,hash 能兼容低版本的浏览器

    2、后端路由每次访问一个页面都要向浏览器发送请求,然后服务端再响应解析,在这个过程中肯定会存在延迟,但是前端路由中访问一个新的界面的时候只是浏览器的路径改变了,没有和服务端交互「所以不存在延迟」,这个对用户体验来说是大大的提高。如下所示:

    http://192.168.1.200:8080/#/index.html
    http://192.168.1.200:8080/#/about/about.html
    http://192.168.1.200:8080/#/feedback.html

    由于 web 服务器不会解析 # 后面的东西[所以通过 hash 能提高性能],但是客户端的 js 可以拿到 # 后面的东西,有一个方法是 window.location.hash 来读取,使用这个方法来匹配到不同的方法上

    3、举个例子

    http://www.xxx.com/path/a/b/c.html?key1=Tiger&key2=Chain&key3=abc#/path/d/e.html

    我们把这个地址分析一下

    http:协议
    www.xxx.com:域名
    /path/a/b/c.html:路由,即服务器上的资源
    ?key1=Tiger&key2=Chain&key3=abc:这 Get 请求的参数
    #/path/d/e.html:hash 也叫散列值,也叫锚点

    上面的 hash 是和浏览器交互的,其它的都是和服务器进行交互

    4.3 Vue 路由

    Vue 中的路由,推荐使用官方支持的 vue-router

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="../js/vue.js"></script>
            <script src="../js/vue-router-3.5.1.js"></script>
        </head>
        <body>
            <div id="app">
                <!-- 使用vue-router -->
                <!-- router-link  生成<a href></a>超链接  router-link to属性就是a标签的href
                只是为了方便点击 跟URL#后面的部分有关 与超链接无关 router-link to有没有都可 -->
                <router-link to="/main">跳转到main</router-link>
                <router-link to="/message">跳转到message</router-link>
                <router-link to="/mine">跳转到mine</router-link>
                <div>aaaaaaaaa</div>
                <!-- 路由插座, 路由配置中URL对应的组件 显示的位置, 配置几个显示几个-->
                <router-view></router-view>
                <input type="button" value="打印" @click="method1">
            </div>
        </body>
        <!--定义模板-->
        <template id="t_main">
            <div style="width: 400px; height: 400px; background: orangered">
                <h1>{{title}}</h1>
            </div>
        </template>
        <template id="t_message">
            <div style="width: 400px; height: 400px; background: limegreen">
                <h1>{{title}}</h1>
            </div>
        </template>
        <template id="t_mine">
            <div style="width: 400px; height: 400px; background: yellow">
                <h1>{{title}}</h1>
            </div>
        </template>
        <script>
            //定义三个组件(组件构造函数)
            //Vue.extend  表示通过 vue 继承 返回vue的子构造函数
            //这里只是构造函数 但是还没有实例化 所以还不是一个组件对象
            //Main是构造函数并且继承vue的构造函数
            //如果new main()  创建vue对象
            let Main = Vue.extend({
                template: `#t_main`,
                data() {
                    return {
                        title: "main"
                    }
                }
            });
            //自定义继承vue的构造函数  Message 表示函数, 首字母大写
            let Message = Vue.extend({
                template: `#t_message`,
                data() {
                    return {
                        title: "message"
                    }
                }
            });
            //mine 表示对象、变量, 首字母小写
            let mine = {
                template: `#t_mine`,
                data() {
                    return {
                        title: "mine"
                    }
                }
            };
    
            //配置路由,数组
            let routes = [
                //path是URL路径, component是组件的构造函数或者组件对象
                {path: "/", component: Main},
                {path: "/main", component: Main},
                {path: "/message", component: Message},
                {path: "/mine", component: mine},
            ]
            //创建vue-router对象
            let router = new VueRouter({
                routes,//相当于routes:routes
            })
            //创建vue对象
            let vm = new Vue({
                el: "#app",
                router,  //相当于 router:router, router也是选项 跟el、method、data是平级关系
                methods: {
                    method1() {
                        //打印三个组件
                        console.dir(Main);
                        console.dir(Message);
                        console.dir(mine)
                    }
                }
            });
        </script>
    </html>

    嵌套路由

    实际应用界面,通常由多层嵌套的组件组合而成,比如,我们 “首页”组件中,还嵌套着 “登录”和 “注册”组件,那么URL对应就是/home/login和/home/register

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>嵌套路由</title>
            <script src="../js/vue.js"></script>
            <script src="../js/vue-router-3.5.1.js"></script>
        </head>
        <body>
            <div id="app">
                <router-link to="/home">home</router-link>
                <router-link to="/news">news</router-link>
                <!--路由插座-->
                <router-view></router-view>
            </div>
        </body>
    
        <!--定义四个组件对应的模板-->
        <template id="t_home">
            <div style="height: 500px;width: 500px;background: #73e373">
                <h1>{{title}}</h1>
                <router-link to="/home/login">登录</router-link>
                <router-link to="/home/register">注册</router-link>
                <!--显示子路由(注册登录)-->
                <router-view></router-view>
            </div>
        </template>
        <template id="t_news">
            <div style="height: 500px;width: 500px;background: rgba(152,119,239,0.96)">
                <h1>{{title}}</h1>
            </div>
        </template>
        <template id="t_login">
            <div style="height: 200px;width: 200px;background: #f3e06a">
                <h1>{{title}}</h1>
            </div>
        </template>
        <template id="t_register">
            <div style="height: 200px;width: 200px;background: rgba(81,115,236,0.99)">
                <h1>{{title}}</h1>
            </div>
        </template>
    
        <script>
            //定义四个组件
            //首页组件
            let componentHome = {
                template: `#t_home`,
                data() {
                    return {
                        title: "Home",
                    }
                }
            };
            //新闻组件
            let componentNews = {
                template: `#t_news`,
                data() {
                    return {
                        title: "News",
                    }
                }
            };
            //登录组件
            let componentLogin = {
                template: `#t_login`,
                data() {
                    return {
                        title: "Login",
                    }
                }
            };
            //注册组件
            let componentRegister = {
                template: `#t_register`,
                data() {
                    return {
                        title: "Register",
                    }
                }
            };
    
            //配置(注册)路由
            let routes = [
                //component组件嵌套路由
                {
                    path: '/home',
                    component: componentHome,
                    //子路由
                    children: [
                        //登录
                        {path: '/home/login', component: componentLogin},
                        {path: '/home/register', component: componentRegister}
                    ]
                },
                {path: '/news', component: componentNews},
                //访问 #/ 会重新跳转到 # 后面
                {path: '/', redirect: "/home"},
            ]
            //创建vue-router对象
            let router = new VueRouter({routes});
            //创建vue对象
            let vm = new Vue({
                el: "#app",
                router,
            })
        </script>
    </html>

    5.使用axios进行ajax操作

    5.1 Axios简介

    vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。

    axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护。

    参考:GitHub上搜索axios,查看API文档 GitHub - axios/axios: Promise based HTTP client for the browser and node.js

    5.2 Axios特点

    Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。本质上也是对原生XHR(XmlHttpRequest)的封装,只不过它是Promise 的实现版本,符合新的ES规范,有如下特点:

    • 从浏览器中创建 XMLHttpRequests
    • 从 node.js 创建 http 请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御 XSRF

    5.3 Axios基本用法

    axios({options})

    axios.get(url,{options});

    GET传参方式:

            1.通过url传参

            2.通过params选项传参

    POST传参方式:

            axios.post(url,data,{options});

    默认情况下,axios将JavaScript对象序列化为JSON。要以application / x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。

    传值方式:

            1.自己拼接为键值对

            2.使用transformRequest,在请求发送前将请求数据进行转换

            3.如果使用模块化开发,可以使用qs模块进行转换

    get和post的区别

    Vue中axios中箭头函数的this和function(response)函数体中的this的区别

    1、在methods下的函数this指向的是当前创建的vue实例,

    2、axios与后台交互后回调函数的内部的this指向window而并非指向当前的vue实例,

    3、若想拿到后台回传的数据更新data里的数据,不能在回调函数中直接使用this,要用外部函数定义的变量(如:_this)存储的this,也就是当前vue的实例。

    4、使用箭头函数之后,箭头函数指向的函数内部的this已经绑定了外部的vue实例了

    Axios的get请求代码示例

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>axios请求</title>
            <script src="../js/vue.js"></script>
            <script src="../js/axios-0.21.1.js"></script>
        </head>
        <body>
            <div id="app">
                <input type="button" value="sendAxiosGet1" @click="sendAxiosGet1">
                <table border="1" cellspacing="0">
                    <tr>
                        <td v-for="value in columnName">{{value}}</td>
                    </tr>
                    <tr v-for="student in students">
                        <td>{{student.id}}</td>
                        <td>{{student.name}}</td>
                        <td>{{student.age}}</td>
                        <td>{{student.email}}</td>
                    </tr>
                </table>
            </div>
        </body>
        <script>
            let vm = new Vue({
                el: "#app",
                data() {
                    return {
                        columnName: {
                            no: "编号",
                            name: "姓名",
                            age: "年龄",
                            email: "邮箱"
                        },
                        students: [{
                            "id": 1001,
                            "name": "锺勇",
                            "age": 20,
                            "email": "t@t.com"
                        }]
                    }
                },
                methods: {
                    //发送axios的get请求
                    sendAxiosGet1() {
                        //把当前vue对象赋值给_this
                        let _this = this;
                        //axios().then().catch();  格式
                        axios({
                            url: "http://rap2api.taobao.org/app/mock/238982/students",
                            //method表示get/post请求
                            method: "get",
                            //请求服务器时参数
                            params: {},
                            //服务端响应(返回)的数据格式
                            responseType: "json",
                            //服务端响应数据编码
                            responseEncoding: "utf-8"
                        }).then(function (response) {     //请求成功后的回调函数
    
                            console.dir(response);
                            //response.data  服务端返回的数据
                            console.dir(response.data)
                            console.dir(response.data.students)
                            console.log(this)//window对象
                            console.log(_this);//vue对象
    
                            //response.data固定的, students自定义
                            _this.students = response.data.students;
    
                        }).catch(function (e) {
                            console.dir(e);
                        });     //请求失败后的回调函数
                    }
                }
            })
        </script>
    </html>

     

    Axios的post请求和传参方式代码示例

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>axios请求</title>
            <script src="../js/vue.js"></script>
            <script src="../js/axios-0.21.1.js"></script>
            <script src="../js/qs-6.10.1.js"></script>
        </head>
        <body>
            <div id="app">
                <input type="button" value="sendAxiosGet1" @click="sendAxiosGet1">
                <input type="button" value="sendAxiosGet2" @click="sendAxiosGet2">
                <input type="button" value="sendAxiosGet3" @click="sendAxiosGet3">
                <input type="button" value="sendAxiosPost1" @click="sendAxiosPost1">
                <input type="button" value="sendAxiosPost2" @click="sendAxiosPost2">
                <input type="button" value="sendAxiosPost3" @click="sendAxiosPost3">
                <table border="1" cellspacing="0">
                    <tr>
                        <td v-for="value in columnName">{{value}}</td>
                    </tr>
                    <tr v-for="student in students">
                        <td>{{student.id}}</td>
                        <td>{{student.name}}</td>
                        <td>{{student.age}}</td>
                        <td>{{student.email}}</td>
                    </tr>
                </table>
            </div>
        </body>
        <script>
            let vm = new Vue({
                el: "#app",
                data() {
                    return {
                        columnName: {
                            no: "编号",
                            name: "姓名",
                            age: "年龄",
                            email: "邮箱"
                        },
                        students: [{
                            "id": 1001,
                            "name": "锺勇",
                            "age": 20,
                            "email": "t@t.com"
                        }]
                    }
                },
                methods: {
                    //发送axios的get请求
                    sendAxiosGet1() {
                        //把当前vue对象赋值给_this
                        let _this = this;
                        //axios().then().catch();  格式
                        axios({
                            url: "http://rap2api.taobao.org/app/mock/238982/students",
                            method: "get",    //method表示get/post请求
                            params: {},    //请求服务器时参数
                            responseType: "json",    //服务端响应(返回)的数据格式
                            responseEncoding: "utf-8",    //服务端响应数据编码
                        }).then(function (response) {     //请求成功后的回调函数
                            console.dir(response);
                            //response.data  服务端返回的数据
                            console.dir(response.data)
                            console.dir(response.data.students)
                            console.log(this)//window对象
                            console.log(_this);//vue对象
    
                            //response.data固定的, students自定义
                            _this.students = response.data.students;
    
                        }).catch(function (e) {
                            console.dir(e);
                        });     //请求失败后的回调函数
                    },
                    sendAxiosGet2() {
                        axios({
                            //请求的地址
                            url: "http://rap2api.taobao.org/app/mock/238982/students",
                            //get 请求参数, get请求就会把数据拼接到url上
                            //http://rap2api.taobao.org/app/mock/238982/students?p1=A&p2=B
                            //params: {p1: 'A', p2: 'B'}转换成  ?p1=A&p2=B
                            params: {p1: 'A', p2: 'B'},
                            //请求方法
                            method: "get",
                            //响应的数据类型
                            responseType: "json",
                            //响应的数据编码
                            responseEncoding: "utf-8",
                        }).then((response) => {
                            //服务端返回的数据 response.data
                            console.log(response.data);
                            console.log(this);//this表示vue对象
                            this.students = response.data.students;
                        }).catch(e => {//异常信息
                            console.log(e);
                        });
                    },
                    sendAxiosGet3() {
                        //axios.get("请求地址", {})  返回Promise对象
                        axios.get("http://192.168.80.254:8080/student/list", {
                            params: {pageNo: 1, pageSize: 10},//转换成 ?pageNo=1&pageSize=10
                            responseType: "json",
                            responseEncoding: "utf-8",
                        }).then(response => {
                            this.students = response.data.students;
                        }).catch(e => {
                            console.log(e);
                        });
                    },
                    sendAxiosPost1() {
                        axios({
                            url: "http://192.168.80.254:8080/student/list",
                            method: "post",
                            data: {p1: 'A', p2: 'B'},
                            responseType: "json",
                            responseEncoding: "utf-8",
                        }).then(response => {
                            this.students = response.data.students;
                        }).catch(e => {
                            console.log(e);
                        });
                    },
                    sendAxiosPost2() {
                        //String类型
                        let requestData = Qs.stringify({p1: "A", p2: "B"})
                        console.log(requestData);//p1=A&p2=B
                        //typeof返回对应数据类型
                        console.log(typeof (requestData));//String
                        //form-data
                        //FormData对象  上传文件和提交数据使用
                        let formData = new FormData();
                        formData.append("pageNo", "1");
                        formData.append("pageSize", "10");
                        console.log(formData.get("pageNo"));
                        axios({
                            url: "http://192.168.80.254:8080/student/list",
                            method: "post",
                            //告诉服务端参数提交是form-data格式 id=1&name=zhangsan
                            headers: {"Content-Type": "application/x-www-form-urlencoded"},
                            //Qs.stringify 把json数据转化成p1=A&p2=B格式(form-data格式)
                            data: Qs.stringify({p1: "A", p2: "B"}),
                            responseType: "json",
                            responseEncoding: "utf-8",
                        }).then(response => {
                            this.students = response.data.students;
                        }).catch(e => {
                            console.log(e);
                        });
                    },
                    sendAxiosPost3() {
                        let data = Qs.stringify({p1: "A", p2: "B"});
                        // post方法  用于post提交
                        // axios.post(url,data,{}).then().catch()
                        axios.post("http://192.168.80.254:8080/student/list", data, {
                            //告诉服务端参数提交是form-data格式 id=1&name=zhangsan
                            headers: {"Content-Type": "application/x-www-form-urlencoded"},
                            responseType: "json",
                            responseEncoding: "utf-8",
                        }).then(response => {
                            this.students = response.data.students;
                        }).catch(e => {
                            console.log(e);
                        });
                    }
                }
            })
        </script>
    </html>

     

    后端代码

    @WebServlet(urlPatterns = {"/student/list"})
    public class StudentServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            doPost(req,resp);
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String p1 = req.getParameter("p1");
            String p2 = req.getParameter("p2");
            System.out.println("p1=" + p1 + ",p2=" + p2);
            //设置响应数据格式和编码
            resp.setContentType("application/json;charset=utf-8");
            //允许跨域请求(后台允许跨域请求)
            resp.setHeader("Access-Control-Allow-Origin", "*");
            //获取数据
            List<Student> students = getStudents();
            Result result = new Result(students);
            //使用Gson把result对象转换json字符串
            Gson gson = new Gson();
            String json = gson.toJson(result);
            //输出json字符串到前端
            resp.getWriter().write(json);
        }
    
        /**
         * 获取学生数据集合
         *
         * @return
         */
        private List<Student> getStudents() {
            List<Student> students = new ArrayList<>();
            students.add(new Student(1L,"李四",20,"mm@163.com"));
            students.add(new Student(2L,"王五",21,"mm@163.com"));
            students.add(new Student(3L,"赵六",22,"mm@163.com"));
            students.add(new Student(4L,"钱七",23,"mm@163.com"));
            students.add(new Student(5L,"贵八",24,"mm@163.com"));
            return students;
        }
    }
    
    
    
    public class Result {
        List<Student> students;
    
        public Result() {
        }
    
        public Result(List<Student> students) {
            this.students = students;
        }
    
        public List<Student> getStudents() {
            return students;
        }
    
        public void setStudents(List<Student> students) {
            this.students = students;
        }
    }
    
    
    
    public class Student {
        private Long id;
        private String name;
        private Integer age;
        private String email;
    
        public Student() {
        }
    
        public Student(Long id, String name, Integer age, String email) {
            this.id = id;
            this.name = name;
            this.age = age;
            this.email = email;
        }
    
        public Long getId() {
            return id;
        }
    
        public void setId(Long id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public Integer getAge() {
            return age;
        }
    
        public void setAge(Integer age) {
            this.age = age;
        }
    
        public String getEmail() {
            return email;
        }
    
        public void setEmail(String email) {
            this.email = email;
        }
    }

    展开全文
  • vue组件封装

    千次阅读 2021-02-25 18:31:12
    1、封装组件的目的 把业务逻辑相同,高度重复的代码封装起来,为了提高代码的复用,减少代码的冗余。 2、组件使用 (1)引用 import navs from '@/views/nav/index' (2)注册 components:{ 'v-nav':navs } (3)...

    1、封装组件的目的
    把业务逻辑相同,高度重复的代码封装起来,为了提高代码的复用,减少代码的冗余。
    2、组件使用
    (1)引用

    import navs from '@/views/nav/index'
    

    (2)注册

    components:{
      'v-nav':navs
    }
    

    (3)使用

    < v-nav> < /v-nav>
    

    3、组件三要素

    属性:props属性 ,inheritAttrs属性
    事件:event
    插槽:slot

    (1)属性:
    数据从父组件传到子组件props属性

    父对子传参,就需要用到 props,通常的 props 是这样的:

    props:[‘data’,‘type’]

    但是通用组件的的应用场景比较复杂,对 props 传递的参数应该添加一些验证规则,常用格式如下:

    props:{
    // 基础类型检测 (`null` 意思是任何类型都可以)
     propA: Number,
     // 多种类型
     propB: [String, Number]
      // 必传且是字符串
        propC: {
          type: String,
          required: true //必须传
        },
         // 数字,有默认值
        propD: {
          type: Number,
          default: 100  //default默认值,默认是100
        },
        // 数组/对象的默认值应当由一个工厂函数返回
        propE: {
          type: Object,
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: {
          validator: function (value) {
            return value > 10
          }
        }
    

    inheritAttrs属性
    vue官网对于inheritAttrs的属性解释:如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false。

    举个例子来验证一下。

    父组件 parent-component.vue

    <template>
     <div class="parent">
        <child-component aaa="1111"></child-component>
      </div>
    </template>
    <script>
    import ChildComponent from './child-component'
    export default {
      components: {
        ChildComponent
      }
    }
    </script>
    

    子组件 child-component.vue 设置 inheritAttrs: true(默认)

    <template>
      <div class="child">子组件</div>
    </template>
    <script>
    export default {
      inheritAttrs: true,
      mounted() {
        console.log('this.$attrs', this.$attrs)
      }
    }
    </script>
    

    最后渲染的结果:

    Elements

    Console
    在这里插入图片描述
    子组件 child-component.vue 设置 inheritAttrs: false

    <template>
      <div class="child">子组件</div>
    </template>
    <script>
    export default {
      inheritAttrs: fasle,
      mounted() {
        console.log('this.$attrs', this.$attrs)
      }
    }
    </script>
    

    最后渲染的结果:

    Elements
    在这里插入图片描述
    Console
    在这里插入图片描述

    总结:

    由上述例子可以看出,前提:子组件的props中未注册父组件传递过来的属性。

    1.当设置inheritAttrs: true(默认)时,子组件的顶层标签元素中(本例子的div元素)会渲染出父组件传递过来的属性(本例子的aaa=“1111”)。

    2.当设置inheritAttrs: false时,子组件的顶层标签元素中(本例子的div元素)不会渲染出父组件传递过来的属性(本例子的aaa=“1111”)。

    3.不管inheritAttrs为true或者false,子组件中都能通过$attrs属性获取到父组件中传递过来的属性。

    (2)events:子组件触发父组件事件
    在通用组件中,通常会需要有各种事件,比如复选框的 change 事件,或者组件中某个按钮的 click 事件,有时子组件需要触发一个事件,并传递给父组件。

    // 子组件方法:触发父组件方法,并传递参数data到父组件
    handleSubmit(data){
        this.$emit('submitToParent', data)
    }
    
    // 父组件调用子组件
    <child-component @submitToParent="parentSubmit"></child-component>
    ... ...
    // 父组件中被触发的方法,接受到子组件传来的参数
    parentSubmit(data){
        // 父组件的逻辑处理
    }
    

    父组件中的逻辑要放在父组件处理,子组件基于父组件的数据做的逻辑放在子组件中处理; 这样既降低了耦合性,也保证了各自的数据不被污染

    (3)留一个 slot
    一个通用组件,往往不能够完美的适应所有应用场景 所以在封装组件的时候,只需要完成组件 80% 的功能,剩下的 20% 让父组件通过 solt 解决。
    例如:
    上面是一个通用组件,在某些场景中,右侧的按钮是 “处理” 和 “委托”。在另外的场景中,按钮需要换成 “查看” 或者 “删除” 在封装组件的时候,就不用写按钮,只需要在合适的位置留一个 slot,将按钮的位置留出来,然后在父组件写入按钮。

    子组件
    <div class="child-btn">
        <!-- 具名插槽 -->
        <slot name="button"></slot>
        <!-- 匿名插槽(每个组件只能有一个) -->
        <slot><slot>
    </div>
     
    父组件
    <child>
        <!-- 对应子组件中button的插槽 -->
        <button slot="button">slot按钮</button>
    </child>
    

    开发通用组件的时候,只要不是独立性很高的组件,建议都留一个 slot,即使还没想好用来干什么。

    开发过程中,常常需要在子组件内添加新的内容,这时候可以在子组件内部留一个或者多个插口

    (4)子组件改变父组件的数据
    当我们把父元素的数据给子组件时,要传一个非基础类型,即传递对象or数组,子组件通过访问对象中的属性操作数据,因为对象和数组是传引用,所以在子组件中修改的时候,父组件也会同步改变,如下:

    // 父组件要props传递给子组件的数据
    data:{
        info:'父组件信息'
    }
     
    // 子组件
     <template id="tpl">
        <div>
            <button @click="change">change</button>
            <p>{{data.info}}</p>
        </div>
    </template>
    ... 省略部分无关代码 ...
    props:['data'],
    methods:{
        change(){
            this.data.info = 'change info'
        }
    }
    

    当子组件点击change按钮改变数据的时候,父组件也会同步改变
    (5)、vue组件封装v-model
    首先来理解下 v-model

    <input v-model="something">
    
    <input
      v-bind:value="something"
      v-on:input="something = $event.target.value">
    

    与组件一起使用时,简化为

    <custom-input
      :value="something"
      @input="value => { something = value }">
    </custom-input>
    

    所以对于一个组件来说v-model,它应该

    1.接受value道具
    2.用新值发出一个input事件

    一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目。model 选项可以用来避免这样的冲突:

    <template>
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
    </template>
    <script>
    export default {
        name: 'base-checkbox',
        model:{
            prop: 'checked',
            event: 'change'
        },
        props: {checked: Boolean}
    }
    

    现在在这个组件上使用 v-model 的时候:

    <base-checkbox v-model="lovingVue"></base-checkbox>
    

    这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的属性将会被更新。

    我们来继续看嵌套组件时怎么再封装一个v-model,我们新建一个组件special-checkbox里面包含上面的组件base-checkbox,如何将子父组件的v-model打通

    <template>
      <base-checkbox v-model="newlovingVue"></base-checkbox>
    </template>
    <script>
    export default {
        name: 'special-checkbox ',
        model:{
            prop:'lovingVue',//要存在于proops
            event:'change'//当组件的值发生改变时要emit的事件名
        },
        props: ['lovingVue'],
        data:function(){
            return{//要重新定义一个data,赋值为props中的值,因为组件时单数据流,不能直接修改props
                newlovingVue:this.lovingVue
            } 
        },
        watch:{//这里检测data中的值,一旦发生变化就提交事件到父组件
            newlovingVue:function(newVal,oldVal){
                this.$emit('change',newVal)
            }
        }
    }
    </script>
    

    现在使用这个二次封装的组件的时候

    <special-checkbox v-model="lovingVue"></base-checkbox>
    

    (6)、子组件发射事件,父组件接收事件

    自组件通过this.$emit(“inChange”,index)进行发射事件,inChange为事件名称,index为参数。

    <template>
      <div class="child">
        <v-switch v-model="item.in_switch" :label="item.in_switch? 'on':'off' " @change="inChange(index)"></v-switch>
      </div>
    </template>
    <script>
    
    export default {
     	 props:{
            item: Object,
            index: Number
        },
        
        methods:{
            inChange(index){
                // 父组件监听 inChange事件,将index传过去,将处理逻辑放在父组件
                this.$emit("inChange",index);
            }
        }
    }
    </script>
    

    父组件接收

    <template>
      <div class="parent">
    	  // 注意这里inChange的参数可有可无
    	  <child :item="item" :index="index" @inChange="inChange" />
      </div>
    </template>
    import child from "../child";
    
    export default {
      
      components: {
       child
      },
      data() {
    	    return {
    		    item: {
    		          in_switch: true,
    		        },
    		    index: 0
    	    }
    	  },
      methods:{
        // inchange事件处理,有index参数
        inChange(index){
           console.log( index)
        },
      }
    }
    </script>
    
    展开全文
  • Vue常用组件库集合---kalrry

    千次阅读 2022-01-08 04:15:45
    Vue.js常用插件集合---kalrry前言一、Vue.js UI组件二、Vue.js开发框架三、Vue.js实用库四、Vue.js服务端五、Vue.js辅助工具六、Vue.js应用实例七、Vue.js Demo示例八、详细分类01、UI组件及框架02、滚动scroll组件...
  • Vue组件

    千次阅读 2021-12-10 19:44:22
    一、组件化 1.1简介 组件(component
  • Vue组件封装

    千次阅读 2021-10-06 10:58:04
    组件是什么? ...组件是可复用的Vue实例, 把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。...Vue组件封装过程 ● 首先,使用Vue.extend()创建一个组件 ●
  • Vue 组件化开发

    千次阅读 2021-12-07 00:21:40
    功能组件「UI组件库中提供的一般都是功能组件:element/iview/antdv/vant/cube..」 + 一般UI组件库提供的功能组件就够用了 + 偶尔UI组件库中不存在的,才需要自己封装「难点」 + 我们经常会把功能组件进行...
  • 如何对vue模块进行功能封装,vue组件封装技巧 当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用。与其让自己或他人面临这种...
  • vue组件使用方法

    千次阅读 2021-10-23 21:19:51
    vue组件使用方法复习 创建实例化Vue对象 第一部分代码段 <div id="vue-app-one"> 这里是:{{name}} </div> <div id="vue-app-two"> 这里是:{{name}} //创建按钮事件 当执行按钮事件时,改变...
  • vue组件缓存

    千次阅读 2022-06-28 20:54:34
    先来看看官网对keep-alive的一些功能说明:组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。就可以使用到keep-alive,它可以用来进行动态组件的缓存组件复用,提高性能 缓存不...
  • Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值,需要的朋友参考下吧
  • Vue组件封装的过程

    千次阅读 多人点赞 2020-09-09 18:02:16
    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 ...在较高层面上,组件是自定义元素,Vue.js的...vue组件功能 能够把页面抽象成多个相对独立的模块 实现代码重用,提高开发效率和代码
  • Vue开发中常用组件

    千次阅读 2019-04-09 16:13:40
    1. vue-countTo (它是一个vue组件,将在指定的持续时间内计入目标数) 安装使用: npm install vue-count-to 例子: <template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'>&...
  • vue组件以及插槽

    千次阅读 2022-03-24 20:22:42
    组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。 组件化和模块化的不同: 模块化:是从代码逻辑的角度...
  • 页面组件功能组件 目标 一、页面组件功能组件的概念 组件分为两种:`页面组件` 和 `功能组件`。 功能组件的使用 目标 掌握页面组件功能组件 一、页面组件功能组件的概念 组件分为两种:页面组件功能组件...
  • Vue组件通信的六种方式

    千次阅读 2022-02-02 11:32:59
    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法...本文总结了vue组件间通信的几种方式,如props、$emit/$on、vuex、$parent / $children、$attrs/$listen
  • Vue组件开发——异步组件

    千次阅读 2022-02-10 01:25:02
    一、引入 我们在讲异步组件之前,我们再来回顾一下webpack...二、vue中的异步组件 通过上面的webpack配置我们明白了为什么要进行分包操作,此时我们想一个问题,如果一个网站的页面在用户第一次浏览器时就将全部页面
  • vue 组件分类

    千次阅读 2020-01-20 12:22:02
    vue 组件分类 一. 简介 之所以写这篇文章,是因为前段时间作为面试官,陆陆续续面试了几十个人,其中一个问题就是 "vue组件分类都有哪些?" ,令人惊讶的是大多数人都只回答了全局组件和局部组件,难道vue组件...
  • Vue 项目打包、组件打包使用 vue-cli 脚手架项目打包步骤 使用 vue-cli 脚手架新建项目 新建vue项目的过程见:https://blog.csdn.net/qq_37248504/article/details/107169812 打包配置说明 打包的配置在build下 ...
  • vue组件间传值的几种方法

    千次阅读 多人点赞 2022-02-10 19:08:41
    一丶父子组件传值 先在父组件中给子组件的自定义属性绑定一个 父组件的变量 <template class="father"> <child :自定义属性名="父组件的变量"></child> <template > 在子组件的props...
  • Vue组件之全局组件与局部组件

    千次阅读 2021-01-17 14:31:06
    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,...
  • 封装Vue组件的原则及技巧

    千次阅读 2021-08-03 13:26:44
    封装Vue组件的原则及技巧 Vue的组件系统 Vue组件的API主要包含三部分:prop、event、slot props表示组件接收的参数,最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,此外还可以通过...
  • 面试官:谈一下你对Vue组件化的理解

    千次阅读 多人点赞 2022-03-20 21:27:52
    假设说采取传统开发网页的方式去开发一个系统,在一定程度上,会...为了避免这些弊端可以采取组件化设计去开发一个多人协作、功能又较多的项目,组件化开发带来的可维护性和可复用性可以提升开发效率、降低代码耦合度。
  • vue组件传值的三种方式

    千次阅读 2022-03-14 14:57:25
    一:父组件给子组件传值 1:这是父组件页面把actionNum数组内容传递给子页面,这里由于父组件加载的原因我们使用v-if <template> <div class="home"> <p @click="getMessage">点我把数据...
  • Vue组件引入报错解决方法

    千次阅读 2022-02-22 15:42:58
    异步引入产生的组件延迟引入,一个同步异步问题。
  • Vue组件化编程

    万次阅读 多人点赞 2022-07-08 10:22:21
    Vue组件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 119,959
精华内容 47,983
热门标签
关键字:

常用的vue组件功能