精华内容
下载资源
问答
  • 通过图文形式给大家介绍了vue项目的骨架及常用组件的相关知识,对此有兴趣的朋友跟着小编一起学习参考下吧。
  • UI组件框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ... vuetify- 为移动而生的Vue JS 2组件框架 vonic- 快速构建移动端单页应用 vue-blu- 帮助...

    UI组件及框架

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

    滚动scroll组件

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

    slider组件

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

    编辑器

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

    图表

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

    日历

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

    地址选择

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

    地图

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

    播放器

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

    文件上传

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

    图片处理

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

    提示

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

    进度条

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

    开发框架汇总

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

    实用库汇总

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

    服务端

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

    辅助工具

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

    应用实例

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

    Demo示例

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

    其他实用插件汇总

    1. vue-dragging- 使元素可以拖拽
    2. Vue.Draggable- 实现拖放和视图模型数组同步
    3. vue-picture-input- 移动友好的图片文件输入组件
    4. rubik- 基于Vuejs2的开源 UI 组件库
    5. VueStar- 带星星动画的vue点赞按钮
    6. vue-tables-2- 显示数据的bootstrap样式网格
    7. DataVisualization- 数据可视化
    8. vue-drag-and-drop-list- 创建排序列表的Vue指令
    9. vuwe- 基于微信WeUI所开发的专用于Vue2的组件库
    10. vue-typer- 模拟用户输入选择和删除文本的Vue组件
    11. vue-impression- 移动Vuejs2 UI元素
    12. vue-datatable- 使用Vuejs创建的DataTableView
    13. vue-instant- 轻松创建自动提示的自定义搜索控件
    14. vue-slider-component- 在vue1和vue2中使用滑块
    15. vue-touch-ripple- vuejs的触摸ripple组件
    16. coffeebreak- 实时编辑CSS组件工具
    17. vue-datasource- 创建VueJS动态表格
    18. handsontable- 网页表格组件
    19. vue-bootstrap-table- 可排序可检索的表格
    20. vue-google-signin-button- 导入谷歌登录按钮
    21. vue-float-label- VueJS浮动标签模式
    22. vue-tagsinput- 基于VueJS的标签组件
    23. vue-social-sharing- 社交分享组件
    24. vue-popup-mixin- 用于管理弹出框的遮盖层
    25. cubeex- 包含一套完整的移动UI
    26. vue-fullcalendar- vue FullCalendar封装
    27. vue-material-design- Vue MD风格组件
    28. vue-morris- Vuejs组件封装Morrisjs库
    29. we-vue- Vue2及weui1开发的组件
    30. vue-form-2- 全面的HTML表单管理的解决方案
    31. vue-side-nav- 响应式的侧边导航
    32. mint-indicator- VueJS移动加载指示器插件
    33. vue-ripple- 制作谷歌MD风格涟漪效果的Vue组件
    34. vue-touch-keyboard- VueJS虚拟键盘组件
    35. vue-parallax- 整洁的视觉效果
    36. vue-typewriter- vue组件类型
    37. vue-ios-alertview- iOS7+ 风格的alertview服务
    38. paco-ui-vue- PACOUI的vue组件
    39. vue-button- Vue按钮组件

    vue前端UI框架收集

    基于 vue 的ui框架

    手机 电脑 兼容框架

    vuetifyjs

    vuetifyjs是比较流行的基于vue的前端ui框架,作者John Leider来自国外,vuetifyjs组件众多,并且电脑端,移动端通用一套代码

    image

    电脑端

    Element-UI

    Element是由国内饿了么团队开发的一套桌面端vue ui框架,也是国内使用最多的ui前端框架,我们日常开发中所用到的功能基本已经都内置好,并且ui风格高度可自定义

    image

    iviewui

    iview是由国内试图科技公司团队开发的基于 Vue.js 的高质量企业级 UI 组件库,具有业界影响力的免费开源软件 丰富的组件和功能,满足绝大部分网站场景,提供开箱即用的 Admin 系统 和 高阶组件库,极大程度节省开发成本,提供专业、优质的一对一技术支持,友好的 API ,自由灵活地使用空间,可自定义主题

    image

    VueStrap

    VueStrap是基于Bootstrap开发的vue前端框架,他不依赖jquery,但是需要bootstrap css (3.xx)的样式

    vue-blu

    Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。

    image

    at-ui

    AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站中后台产品。是由京东凹凸实验室团队开发的前端框架

    image

    buefy

    基于Bulma的Vue.js的轻量级 UI组件

    image

    vue-beauty

    vue-beauty 是一套基于 vue.js 和 ant-design样式 的PC端 UI 组件库,旨在帮助开发者提升产品体验和开发效率、降低维护成本。

    手机端

    mint-ui

    mint是由国内饿了么团队专为移动端开发的一套vue ui框架,主要应用在移动端,内置众多组件

    image

    vant

    vant 是由有赞团队开发的专门用于手机端的vue框架,vant 轻量、可靠的移动端 Vue 组件库,60+ 高质量组件、 90% 单元测试覆盖率、完善的中英文文档和示例

    image

    nutui

    nutui 是由京东团队开发的专门用于手机端的vue框架,NutUI是一套京东风格的移动端组件库,开发和服务于移动Web界面的企业级前中后台产品。

    image

    Cube-UI

    Cube UI 由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障,基于 Vue.js 实现的精致移动端组件库。

    image

    VUX

    VUX 一个凑合的 Vue.js 移动端 UI 组件库, 它是由个人开发和维护的一套框架

    image

    vonic

    vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。它也是由个人开发和维护的一套框架

    image

     

    转载于:https://www.cnblogs.com/liumingblog/p/13207726.html

                   https://www.cnblogs.com/qwguo/p/13269437.html 

    展开全文
  • Vue常用组件通信传值方法 渐进式JavaScript框架----vue,是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第...

    Vue中常用组件通信传值方法

    渐进式JavaScript框架----vue,是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。接下来介绍下Vue在实际项目开发中一些比较常用的组件传值通信方法。

    在这里插入图片描述

    1.父子组件通信($emit、props)

    • 父传子
    父组件中用:或v-bind来进行数据绑定
    import子组件的位置,用component局部注册子组件

    App.vue

    <template>
      <div id="app">
        <span>我是父组件</span>
        <child :message="message"/>
      </div>
    </template>
    <script>
    import Child from './views/Child/index.vue'
    export default {
      name: 'App',
      components: {
        'child':Child
      },
      data(){
        return{
          message:'我是父组件的值'
        }
      },
    }
    </script>
    

    在子组件中用props,以对象的形式来接收子组件

    Child.vue

    <template>
      <div>
          <span>我是子组件</span>
          <p>来自父组件的值:{{message}}</p>
      </div>
    </template>
    <script>
    export default {
      name:'Child',
      props: {
        message:{
          type:String,
          default:''
        }
      }
    }
    </script>
    
    • 子传父

    子组件给父组件传递主要用$emit来传递,示例如下

    Child.vue

    <template>
      <div>
          <span>我是子组件</span>
          <p>来自父组件的值:{{message}}</p>
          <button @click="sendData">点我发送</button>
      </div>
    </template>
    
    <script>
    export default {
      name:'Child',
      props: {
        message:{
          type:String,
          default:''
        }
      },
      data(){
        return {
          childMessage:'我是来自子组件的值'
        }
      },
      methods:{
        sendData(){
          this.$emit('confirm',this.childMessage)
        }
      }
    }
    </script>
    <style>
    </style>
    

    App.vue

    <template>
      <div id="app">
        <span>我是父组件</span>
        <child :message="message" @confirm="confirm"/>
      </div>
    </template>
    
    <script>
    import Child from './views/Child/index.vue'
    export default {
      name: 'App',
      components: {
        'child':Child
      },
      data(){
        return{
          message:'我是父组件的值'
        }
      },
      methods:{
        confirm(val){
          alert(val)
        }
      }
    }
    </script>
    
    <style>
    </style>
    
    

    在父组件调用子组件的地方绑定一个@confirm

    这个confirm哪来的呢?就是子组件在emit中定义好的
    this.$emit('confirm',this.childMessage)
    
    • 第一个入参是事件名,第二个是具体的值

    父组件中不需要在接收的时候定义任何形参,默认的第一个形参就是子组件过来的值

    confirm(val){
      alert(val)
    }
    

    这样就实现了子组件中按钮点击触发事件,把子组件中的任意参数带过来。

    2.$ref $refs

    vue中使用ref可以取到子组件中的变量或方法

    怎么使用呢?
    只需要在子组件标签定义

    <child ref="childRef"/>
    
    使用的时候
    this.$refs.childRef.childFunc()
    this.$refs.childRef.childMessage
    

    这里this.$refs.childRef就表示了子组件这个对象了,可以分别取其中的值的方法

    App.vue

    <template>
      <div id="app">
        <span>我是父组件</span>
        <button @click="fun">点我</button>
        <child ref="childRef"/>
      </div>
    </template>
    
    <script>
    import Child from './views/Child/index.vue'
    export default {
      name: 'App',
      components: {
        'child':Child
      },
      data(){
        return{
          message:'我是父组件的值'
        }
      },
      methods:{
        fun(){
          this.$refs.childRef.childFunc()
          console.log(this.$refs.childRef.childMessage);
        }
      }
    }
    </script>
    
    <style>
    </style>
    
    

    Child.vue

    <template>
      <div>
          <span>我是子组件</span>
      </div>
    </template>
    
    <script>
    export default {
      name:'Child',
      data(){
        return {
          childMessage:'我是来自子组件的值'
        }
      },
      methods:{
        childFunc(){
          alert('我是子组件')
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    

    3.$router路由传参

    我们在Demo1组件即将跳转到另一个组件的时候往this.$router里面装一个参数进去

    this.$router.param = param
    

    在Demo2组件create的时候打印一下这个

    console.log(this.$router.param);
    

    就可以看到Demo1带过来的参数了

    Demo1.vue

    <template>
      <div>
        <button @click="goChild">child</button>
      </div>
    </template>
    
    <script>
    export default {
        name:'Parent',
        methods:{
          goChild(){
            let name = 'child'
            let param = {
              msg:'test'
            }
            this.$router.param = param
            this.$router.push({ name: name})
          }
        }
    }
    </script>
    

    Demo2.vue

    <template>
      <div>
          <button @click="goParent">parent</button>
      </div>
    </template>
    
    <script>
    export default {
      name:'Child',
      created(){
        console.log(this.$router.param);
      },
      methods:{
        goParent(){
          let name = 'parent'
          this.$router.push({ name: name})
        },
      }
    }
    </script>
    

    4.Vuex

    getter.js

    先定义好使用的vuex变量

    const getters = {
        msg: (state) => state.info.msg,
    }
    
    export default getters
    

    info.js

    const state = {
        msg:null,
    }
    
    const mutations = {
        setMsg(state, payload) {
            state.msg = payload
            console.log(444,state.msg);
          },
    }
    
    export default {
        namespaced: true,
        state,
        mutations,
    }
    

    全局注册vuex

    import Vue from 'vue'
    import Vuex from 'vuex'
    import info from './modules/info'
    import getters from './getters'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        modules: {
          info,
        },
        getters,
    })
    

    使用时只需要设置和获取即可

    设置
    this.$store.commit('info/setMsg',param)
    
    获取
    this.$store.getters.msg
    
    展开全文
  • vue常用组件框架

    千次阅读 2019-01-14 21:29:36
    饿了么团队开源一个基于vue 组件库 elementUI PC官网 http://element.eleme.io/ MintUI 移动端 http://mint-ui.github.io/ iView 是一套基于 Vue.js 的 UI 组件库,主要服务于 PC 界面的中后台产品。...

    饿了么团队开源一个基于vue 组件库
    elementUI   PC官网 http://element.eleme.io/
    MintUI 移动端 http://mint-ui.github.io/
    iView 是一套基于 Vue.js 的 UI 组件库,主要服务于 PC 界面的中后台产品。https://www.iviewui.com/components/layout

    https://myronliu347.github.io/vue-carbon   vue-carbon  组件UI库web
    --------------------- 
    作者:大灰狼的小绵羊哥哥 
    来源:CSDN 
    原文:https://blog.csdn.net/sinat_17775997/article/details/54133687 
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • 前端vue框架常用难点

    2021-01-26 21:24:32
    一、父子组件的双向数据绑定,所以在子组件是不允许修改父组件的属性的 解决办法:在子组件data中定义一个父组件传递过来的副本,再把该副本利用this.$emit("","")给传回去,父组件利用自定义事件接受该值 <...

    一、父子组件的双向数据绑定,所以在子组件是不允许修改父组件的属性的

    解决办法:在子组件data中定义一个父组件传递过来的副本,再把该副本利用this.$emit("","")给传回去,父组件利用自定义事件接受该值

    <template>
    	<!-- pagination -->
    	<div class="pagination-container" v-show="total/10 > 1 ">共 {{ total }}条
            <el-pagination background @current-change="dealChange" :current-page.sync="currPage" layout="prev,pager,next" :page-size="16" :total="total">
    		</el-pagination>
    	</div>
    </template>
    <script>
    export default {
    	name: 'pagination',
    	props:[ 'total', 'page'],
        data(){
    		return {
    			currPage: this.page;
            }
        },
        methods:{
    //父子组件的双向数据绑定,所以在子组件是不允许修改父组件的属性的,控制台会报如下错误:
    //[Vue warn]:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
    // Instead,use a data or computed property based on the prop's value.Prop being mutated:"page"
    //解决办法
    //在子组件data中定义一个父组件传递过来的副本,再把该副本利用this.$emit("","")给传回去,父组件利用自定义事件接受该值
            dealchange(){
                //this.$emit("function",param);   //其中function为父组件定义函数,param为需要传递参数
                this.$emit("change", this.currPage);
            }
        }
    }
    </script>
    
    

    在父组件中子组件引用处添加函数:

    // v-on:function="function1"; 
    // 其中function为子组件中定义函数(change),function1为父组件定义函数--用于接收子组件传值并进行相应数据处理,可定义为同一名称
    //	v-on:可用@代替 @function="function1" ,@为v-on:的简写
    <pagination ref="pagination"  @change="handleClose"/>
    // val及为子组件中currPage,即接收的子组件参数
    // 子组件抛出值 this.$emit('input', val) ,input方法,父组件接收可以用v-model="val" 
    <script>
        handleClose(val){
        	this.currPage = val;
        },
    </script>
    
    

    v-model用法

    <div id="app">
        <label for="male">
        <input type="radio" id="male" value="" v-model="sex"></label>
        <label for="female">
        <input type="radio" id="female" value="" v-model="sex"></label>
        <h2> 您选择的性别是:{{sex}} </h2>
    </div>
    <script src="../js/vue.js "></script>
    <script>
        const app = new Vue({el: '#app ',
            data: {
                message:'你好啊',
                sex:'男',
            }
        })
    </script>
    
    

    二、props 的 数组/对象的默认值应当由一个工厂函数返回

    props: {
    	activeTab: {
            type:Number,
            default: 0,
        },
        data: {
            type: Array,
            default: ()=>[],
        }
        obj: {
            type: object,
            default: () => { msg: "hello"},
        }
    }
    

    三、嵌套路由(子路由)

    使用vue-router的步骤:

    第一步:创建路由组件
    /* index.js */
    //配置路由相关的信息
    import VueRouter from 'vue-router' 
    import Vue from 'vue'
    import Home from '../components/Home'
    import About from '../components /About'
    
    // 1.导入路由对象,并且调用Vue.use(VueRouter)
    Vue.use(VueRouter)
    // 2.创建VueRouter对象
    const routes = [
        {
            path: '/home',
        	component: Home,
        },
    	{
    		path: '/about',
            component: About,
        }
    ]
    const router = new VueRouter({//配置路由和组件之间的应用关系
        routes,
    })
    
    
    第二步:配置路由映射:组件和路径映射关系
    第三步:使用路由:通过和
    <template>
    <!-- <router-link>:该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签.
    <router-view>:该标签会根据当前的路径,动态渲染出不同的组件.
    网页的其他内容,比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级.
    在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变.-->
    	<div id="app">
         	<router-link to="/home">首页</router-link>
          	<router-link to="/about">关于</router-link>
          	<router-view></router-view>
       	</div>
    </template>
    <script>
    export default {
        name: 'App'
    }
    </script>
    <style></style>
    
    展开全文
  • Vue 常用组件

    2020-06-12 11:59:06
    UI组件 框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 ...vuetify- 为移动而生的Vue JS 2组件框架 vonic- 快速构建移动端单页应用 vue-blu- 帮助你轻松创建web应...
  • Vue常用组件插件

    2020-09-10 16:03:36
    vue常用组件插件UI组件element- 饿了么出品的Vue2的web UI工具套件Vux- 基于Vue和WeUI的组件库mint-ui- Vue 2的移动UI元素iview- 基于 Vuejs 的开源 UI 组件库Keen-UI- 轻量级的基本UI组件合集vue-material- 通过Vue...
  • vue.cli中的安装使用步骤是?有哪几大特性? css的预编译,使用步骤如下: 第一步:用npm 下三个loader(sass-loader、css-loader、node-sass) 第二步:在build目录找到webpack.base.config.js,在那个extends属性...
  • Vue框架常用知识点 文章目录Vue框架常用知识点知识点解释第一个vue应用模板语法计算属性与侦听器条件渲染、列表渲染、Class与Style绑定 知识点解释 vue框架知识体系 【1】基本概念(条件渲染、列表渲染、时间绑定、...
  • Vue常用外部组件使用

    2019-05-24 15:19:48
    1、Vue使用axios ...//引入vue框架 import Vue from 'vue' //引入资源请求插件 import axios from 'axios' import { stringify } from 'querystring'; //axios 配置 axios.defaults.timeout = 5000;...
  • vue常用UI组件

    2020-01-06 08:39:04
    1.Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链...
  • 一、UI组件框架 二、滚动scroll组件 三、slider组件 四、编辑器 五、图表 六、日历 七、地址选择 八、地图 九、播放器 十、文件上传 十一、图片处理 十二、提示 十三、进度条       &...
  • 移动端框架: ...Vux是基于 WeUI 和 Vue.js 的移动端UI组件库,提供丰富的组件满足移动端(微信)页面常用业务需求,可以说相当全面了。 2、Mint-UI GitHub地址 中文文档 在线预览 Mint-UI由饿了么...
  • 饿了么前端团队开发的移动端组件库3、Vant(mob):有赞团队开发的移动端组件库4、cube-ui(mob):滴滴团队开发的移动端组件库5、MUI(mob):最接近原生APP体验的高性能前端框架6、Muse-ui(mob):基于 Vue 2.0 优雅的 ...
  • vue常用的UI框架

    2021-05-09 18:04:22
    Vue-ElementUI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 中文官网:Vue-ElementUI Vue-Vant Vue-Vant,一套与vue相结合的移动端UI解决方案。 中文官网:Vue-Vant
  • Vue常用组件库的比较分析(pc端)

    千次阅读 2019-04-30 15:25:48
    Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 能完美地驱动复杂的单页应用。 本篇文章就是对pc端的...
  • 基于Vue常用PC端框架

    千次阅读 2020-01-03 10:10:42
    PC端框架 该文章来源于:[13个超实用的Vue PC端...Element,一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。 2、iView 一套基于Vue.js的高质量UI组件库 3、vue-element-admin vue-element-adm...
  • vue项目常用的ui框架

    千次阅读 2019-09-16 09:44:18
    基于vue的移动端UI框架 1.vonic >>>>>>>>>基于 vue.js 和 ionic 样式的 UI 框架 2.vux >...基于WeUI和Vue(2.x)开发的移动端UI组件库 3.Mint UI >>>>&...
  • 前端常用框架UI组件

    2020-07-30 17:22:01
    文章目录移动端UI组件pc后台UI框架pc端开发PC和移动端常用轮播或滑动组件mescroll上拉刷新,下拉加载框架 移动端UI组件 mint-ui vant pc后台UI框架 element bootstrap easyUI LuLu UI框架 EasyUI是一个...
  • Vue框架面试题 内容主要包括:Vue基础知识点,Vue核心知识点,Vue-cli工程,Vue-router,Vuex,http请求,UI样式,常用功能,深入拓展… Vue基础知识点 Vue特性 Vue项目结构介绍 Vue 常用指令 Vue常用的修饰符 ...
  • 常用的父子组件通信方式。 父组件通过props传递数据给子组件,子组件通过emit发送事件传递数据给父组件。父组件向子组件传值,通过绑定属性来向子组件传入数据,子组件通过 Props 属性获取对应数据。 特点:符合...
  • Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用vue插件,来了个大汇总,方便查找使用,便于工作和学习。很全的vue插件汇总,赶紧收藏下吧! github上的vue汇总...
  • // 常用颜色 $primary : #39f ; $success : #0c6 ; $warning : #f90 ; $danger : #f30 ; // 文字颜色 $text : #737373 ; $text-light : #a6a6a6 ; // 边框颜色 $border : #d9d9d9 ; @import ' ~c-mobile/dist/index...
  • Vue是一款比较流行的JS库,本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一、Vue常用UI组件 element ★11612 – 饿了么出品的Vue2的web UI工具套件 Vux ★7503 – ...
  • 这个要单独写,原文是这么描述vue组件的:组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些...
  • Vue框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢...
  • 在前端项目的开发过程中,少不了需要选择一款组件库作为项目开发的基础,而只要选择对了一款的合适的组件库就能极大的...1.Vue常用组件库 A.element-ui  地址:http://element-cn.eleme.io/#/zh-CN github地...
  • Vue框架入门(一)

    2019-09-10 16:30:41
    vue 是一套构建用户界面的流行的渐进式前端框架vue 只关注视图层, 采用自底向上增量开发的设计。 vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件vue是基于MVVM模式的具体实现。 vue ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 685
精华内容 274
关键字:

vue框架常用组件

vue 订阅