vue 订阅
VUE 是 iOS 和 Android 平台上的一款 Vlog 社区与编辑工具,允许用户通过简单的操作实现 Vlog 的拍摄、剪辑、细调、和发布,记录与分享生活。 [1]  还可以在社区直接浏览他人发布的 Vlog,与 Vloggers 互动。 [2] 展开全文
VUE 是 iOS 和 Android 平台上的一款 Vlog 社区与编辑工具,允许用户通过简单的操作实现 Vlog 的拍摄、剪辑、细调、和发布,记录与分享生活。 [1]  还可以在社区直接浏览他人发布的 Vlog,与 Vloggers 互动。 [2]
信息
软件大小
46.7 MB
开发商
VUE VIDEO CO., LTD.
软件名称
VUE Vlog
更新时间
2019年3月30日
软件版本
3.1.4
软件平台
iOS,Android
软件语言
英文、简体中文
VUE产生背景
随着手机摄像头的发展,越来越多的人开始使用手机拍照和摄像。摄像一般来说要比拍照门槛高,但是视频传播的信息量又远大于照片。VUE 就诞生在这样的背景下,希望用拍照一样简单的操作,帮助用户在手机上拍摄精美的短视频。
收起全文
精华内容
下载资源
问答
  • 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阅读器

     

    更多相关内容
  • vue3.0+Ant Design Vue后台crm管理系统admin

    千人学习 2021-03-06 11:09:55
    使用了Vue3.0全家桶、ant-design-vue2.0,实践vue3.0的新特性以及玩法,vue3.0的Composition API相比于vue2.0的Options API 灵活很多,让我们可以灵活地组合组件逻辑,目前后端admin大部分还是vue2.6;但是未来被vue3...
  • 走在技术前沿之 Vue3.0 新特性全面解析。 全网抢先看,做首批 Vue 3.0 开发者!!! 课程内容包含: 1.Vue 3.0之版本大更新 2.新特性重点关注 3.composition-api(组合式API) 4.初始化Vue 3.0项目 5.setup函数...
  • Vue3.0(正式版)核心技术精讲

    千人学习 2021-04-07 15:53:33
    工作一两年,还在做静态页面,能力停滞不前? 只接过简单的功能需求,没机会用Vue做完整项目?
  • ant-design-vue UI组件使用讲解

    万人学习 2019-06-10 11:26:25
    通过jeecg-boot项目实战,详细介绍 ant-design-vue UI组件使用,细致的讲解每个组件的用法,教你学会如何看ant-design-vue的官方文档。 对于初学入门者来讲,非常实用。
  • vue.js 2.0下载

    千次下载 热门讨论 2016-12-07 11:32:33
    vue.js 前端框架,2.0版本
  • Vue 2项目如何升级到Vue 3?

    千次阅读 2022-05-19 12:06:16
    Vue2项目如何升级到Vue3

    应不应该从 Vue 2 升级到 Vue 3

    应不应该升级?这个问题不能一概而论。

    首先,如果你要开启一个新项目,那直接使用 Vue 3 是最佳选择。后面课程里,我也会带你使用 Vue 3 的新特性和新语法开发一个项目。

    以前我独立使用 Vue 2 开发应用的时候,不管我怎么去组织代码,我总是无法避免在 data、template、methods 中上下反复横跳,这种弊端在项目规模上来之后会更加明显。而且由于 vue-cli 是基于 Webpack 开发的,当项目规模上来后,每执行一下,调试环境就要 1 分钟时间,这也是大部分复杂项目的痛点之一。

    而 Vue 3 的 Composition API 带来的代码组织方式更利于封装代码,维护起来也不会上下横跳

    Vue 3 的正式版已经发布有一年了,无论是辅助工具,还是周边库都已经非常完善了,足以胜任大型的项目开发。并且,现在也有越来越多的公司正在尝试和体验 Vue 3。所以新项目可以直接拥抱 Vue 3 的生态,这也是现在很多团队在做的尝试。

    而且对于 Vue 2,官方还会再维护两年,但两年后的问题和需求,官方就不承诺修复和提供解答了,现在继续用 Vue 2 其实是有这个隐患的。

    Vue 3 也不是没有问题,由于新的响应式系统用了 Proxy,会存在兼容性问题。也就是说,如果你的应用被要求兼容 IE11,就应该选择 Vue 2。而且,Vue 团队也已经放弃 Vue 3 对 IE11 浏览器的支持。

    其实,官方原来是有计划在 Vue 3 中支持 IE11,但后来由于复杂度和优先级的问题,这个计划就搁置了下来。

    不过,站在 2021 看待现在前端的世界,你能发现浏览器和 JavaScript 本身已经有了巨大的发展。大部分的前端项目都在直接使用现代的语言特性,而且微软本身也在抛弃 IE,转而推广 Edge。所以 Vue 官方在重新思考后,决定让 Vue 3 全面拥抱未来,把原来准备投入到 Vue 3 上支持 IE11 的精力转投给 Vue 2.7。

    那么 Vue 2.7 会带来什么内容呢?

    Vue 2.7 会移植 Vue 3 的一些新特性,让你在 Vue 2 的生态中,也能享受 Vue 3 的部分新特性。在 Vue 3 发布之前,Vue 2 项目中就可以基于 @vue/composition-api 插件,使用 Composition API 语法,Vue 2 会直接内置这个插件,在 Vue 2 中默认也可以用 Compositon 来组合代码。
    在这里插入图片描述

    Vue 3 不兼容的那些写法

    通过前面的分析,在选择 Vue 2 还是 Vue 3 这个问题上,相信你现在已经有了自己的取舍。如果最后你依然决定要升级 Vue 3,那我就先带你了解一下 Vue 3 不支持的那些写法、之后为你讲解它的生态现状,最后,我们再进入到实操升级的环节。

    了解一下 Vue 3 不兼容的那些具体语法,除了可以帮你在升级项目后,避免写的代码无法使用,还会让你更好地适应 Vue 3。详细的兼容性变更,官方有一个迁移指南,我在这里就不一一给出了。同样,也为了避免八股文的形式,我在这里介绍几个重要的变更,后面项目中用到一些写法的时候,我再详细地告诉你。即使现在说太多细节,可能你也记不住。

    这一部分内容,主要是针对有 Vue 2 开发经验的,希望更快地适应 Vue 3 的同学。在全面实战 Vue 3 之前,你不必完整阅读官方的指南,因为 Vue 3 的大部分 API 都是对 Vue 2 兼容的。

    首先,我们来看一下 Vue 2 和 Vue 3 在项目在启动上的不同之处。在 Vue 2 中,我们使用 new Vue() 来新建应用,有一些全局的配置我们会直接挂在 Vue 上,比如我们通过 Vue.use 来使用插件,通过 Vue.component 来注册全局组件,如下面代码所示:

    Vue.component('el-counter', {
      data(){
        return {count: 1}
      },
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    let VueRouter = require('vue-router')
    Vue.use(VueRouter)
    

    在上面的代码里,我们注册了一个 el-counter 组件,这个组件是全局可用的,它直接渲染一个按钮,并且在点击按钮的时候,按钮内的数字会累加。

    然后我们需要注册路由插件,这也是 Vue 2 中我们使用 vue-router 的方式。这种形式虽然很直接,但是由于全局的 Vue 只有一个,所以当我们在一个页面的多个应用中独立使用 Vue 就会非常困难。

    看下面这段代码,我们在 Vue 上先注册了一个组件 el-counter,然后创建了两个 Vue 的实例。这两个实例都自动都拥有了 el-couter 这个组件,但这样做很容易造成混淆。

    Vue.component('el-counter',...)
    new Vue({el:'#app1'})
    new Vue({el:'#app2'})
    

    为了解决这个问题,Vue 3 引入一个新的 API ,createApp,来解决这个问题,也就是新增了 App 的概念。全局的组件、插件都独立地注册在这个 App 内部,很好的解决了上面提到的两个实例容易造成混淆的问题。下面的代码是使用 createApp 的简单示例:

    const { createApp } = Vue
    const app = createApp({})
    app.component(...)
    app.use(...)
    app.mount('#app1')
    const app2 = createApp({})
    app2.mount('#app2')
    

    createApp 还移除了很多我们常见的写法,比如在 createApp 中,就不再支持 filter、 o n 、 on、 onoff、 s e t 、 set、 setdelete 等 API。不过这都不用担心,后面我会告诉你怎么去实现类似这些 API 的功能。

    在 Vue 3 中,v-model 的用法也有更改。在后面讲到组件化,也就是我们需要深度使用 v-model 的时候,我会再细讲。 其实 Vue 3 还有很多小细节的更新,比如 slot 和 slot-scope 两者实现了合并,而 directive 注册指令的 API 等也有变化。

    Vue 3 生态现状介绍

    在 Vue 生态中,现在所有官方库的工具都全面支持 Vue 3 了,但仍然有一些生态库还处于候选或者刚发布的状态。所以,升级 Vue 3 的过程中,除了 Vue 3 本身的语法变化,生态也要注意选择。有一些周边的生态库可能还存在不稳定的情况,开发项目的时候我们时刻关注项目的 GitHub 即可。

    Vue-cli4 已经提供内置选项,你当然可以选择它支持的 Vue 2。如果你对 Vite 不放心的话,Vue-cli4 也全面支持 Vue 3,这还是很贴心的。

    vue-router 是复杂项目必不可少的路由库,它也包含一些写法上的变化,比如从 new Router 变成 createRouter;使用方式上,也全面拥抱 Composition API 风格,提供了 useRouter 和 useRoute 等方法。

    Vuex 4.0 也支持 Vue 3,不过变化不大。有趣的是 Vue 官方成员还发布了一个 Pinia,Pania 的 API 非常接近 Vuex5 的设计,并且对 Composition API 特别友好,更优雅一些。在课程后续的项目里,我们会使用更成熟的 Vuex4。

    其他生态诸如 Nuxt、组件库 Ant-design-vue、Element 等等,都有 Vue 3 的版本发布。我开发维护的 Element3 是一个教育项目,我们在组件化章节会详细介绍。除此之外,我们项目中也会使用 Elemen3 来作为组件库。并且在进阶开发篇,我们会自己设计一个类似风格的组件库。

    使用自动化升级工具进行 Vue 的升级

    小项目不用多说,从 Vue 2 升级到 Vue 3 之后,对于语法的改变之处,我们挨个替换写法就可以。但对于复杂项目,我们需要借助几个自动化工具来帮我们过渡。

    首先是在 Vue 3 的项目里,有一个 @vue/compat 的库,这是一个 Vue 3 的构建版本,提供了兼容 Vue 2 的行为。这个版本默认运行在 Vue 2 下,它的大部分 API 和 Vue 2 保持了一致。当使用那些在 Vue 3 中发生变化或者废弃的特性时,这个版本会提出警告,从而避免兼容性问题的发生,帮助你很好地迁移项目。并且通过升级的提示信息,@vue/compat 还可以很好地帮助你学习版本之间的差异。

    在下面的代码中,首先我们把项目依赖的 Vue 版本换成 Vue 3,并且引入了 @vue/compat

    "dependencies": {
    -  "vue": "^2.6.12",
    +  "vue": "^3.2.19",
    +  "@vue/compat": "^3.2.19"
       ...
    },
    "devDependencies": {
    -  "vue-template-compiler": "^2.6.12"
    +  "@vue/compiler-sfc": "^3.2.19"
    }
    

    然后给 vue 设置别名 @vue/compat,也就是以 compat 作为入口,代码如下:

    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        config.resolve.alias.set('vue', '@vue/compat')
        ......
      }
    }
    

    这时你就会在控制台看到很多警告,以及很多优化的建议。我们参照建议,挨个去做优化就可以了。

    在 @vue/compat 提供了很多建议后,我们自己还是要慢慢做修改。但从另一个角度看,“偷懒”是优秀程序员的标志,社区就有能够做自动化替换的工具,比较好用的就是“阿里妈妈”出品的 gogocode,官方文档也写得很详细,就不在这里赘述了。

    自动化替换工具的原理很简单,和 Vue 的 Compiler 优化的原理是一样的,也就是利用编译原理做代码替换。如下图所示,我们利用 babel 分析左边 Vue 2 的源码,解析成 AST,然后根据 Vue 3 的写法对 AST 进行转换,最后生成新的 Vue 3 代码。

    对于替换过程的中间编译成的 AST,你可以理解为用 JavaScript 的对象去描述这段代码,这和虚拟 DOM 的理念有一些相似,我们基于这个对象去做优化,最终映射生成新的 Vue 3 代码。

    展开全文
  • VueVue课后题

    万次阅读 多人点赞 2021-01-20 10:52:12
    vue九章课后题

    Vue课后题

    第1章 Vue.js 基础入门

    一、填空题

    题目
    1.Vue 是一套构建 _ 的渐进式框架1. 用户界面
    2.MVVM 主要包含 3 个部分,分别是 Model、View 和 _2. View Model
    3.Vue 中通过 _ 属性获取相应 DOM 元素3. refs
    4.在进行 Vue 调试时,通常使用 _ 工具来完成项目开发4. vue-devtools
    5.Vue 中页面结构以 _ 形式存在5. 组件

    二、判断题

    1.Vue 与 Angular 和 React 框架不同的是,Vue 设计为自下而上逐层应用。
    2.Vue 完全能够为复杂的单页应用提供驱动。
    3.Vue 是一套构建用户界面的渐进式框架,Vue 的核心只关注视图层。
    4.Vue 中 MVVM 框架主要由 3 部分组成 :Model、View 和 View Model。
    5.Vue 可以在 Node 环境下进行开发,并借助 npm 包管理器来安装依赖。
    全 对   A l l   R i g h t 全对\ All\ Right  All Right

    三、选择题

    1.下列关于 Vue 说法错误的是( )。
    A.Vue 与 Angular 都可以用来创建复杂的前端项目
    B.Vue 的优势主要包括轻量级、双向数据绑定
    C.Vue 在进行实例化之前,应确保已经引入了核心文件 vue.js
    D.Vue 与 React 语法是完全相同的

    2.下列关于 Vue 的优势的说法错误的是( )。
    A.双向数据绑定
    B.轻量级框架
    C.增加代码的耦合度
    D.实现组件化

    3.下列不属于 Vue 开发所需工具的是( )。
    A.Chrome 浏览器
    B.VS Code 编辑器
    C.vue-devtools
    D.微信开发者工具

    4.npm 包管理器是基于( )平台使用的。
    A.Node.js
    B.Vue
    C.Babel
    D.Angular

    5.下列选项中,用来安装 vue 模块的正确命令是( )。
    A.npm install vue
    B.node.js install vue
    C.node install vue
    D.npm I vue

    四、简答题

    1.请简述什么是 Vue。

    一套用于构建用户界面的渐进式框架,本身就是一个 js 文件,与其他大型框架相比,Vue 被设计为可以自底向上逐层应用。

    2.请简述 Vue 优势有哪些。

    1. 轻量级
    2. 双向数据绑定,MVVM 框架
    3. 指令,主要包括内置指令和自定义指令,以“ v- ”开头,作用于 HTML 元素。
    4. 插件,插件用于对 Vue 框架功能进行扩展,通过 MyPlugin.install 完成插件的编写,简单配置后就可以全局使用

    3.请简单介绍 Vue、React 之间的区别。

    Vue 用 DOM 模板,React 依赖虚拟 DOM

    五、编程题

    1.请使用 Vue.js 动手创建 Vue 实例并实现数据的绑定效果。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app"> {{msg}} </div>
        <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            }
        })
        </script>
    </body>
    </html>
    

    2.请手动配置 Vue.js 开发环境。

    1. VS Code 编辑器

    2. Vue 的下载和引入

      官网下载 vue.js,通过 script 引入

      image-20201125223046384
    3. git-bash 命令行管理工具(增强版的 cmd)

    4. Node.js 环境

      为什么要用 Node?
      答:不能给用户源代码,我们选择通过 node 将项目暴露出去,然后普通用户就可以通过浏览器访问咱们的项目
      
      1. 将项目交给 node 管理的过程,称之为项目部署/发布
      2. node 管理项目之后,暴露出一个端口,我们通过 ip + 端口就可以访问 node 管理的这个项目
      3. 我们的电脑如果通过 Node 运行了 Web 项目,那么我们的电脑就可以称之为服务器
      
    5. npm 包管理工具(用来解决 Node.js 代码部署问题)

    6. Chrome 浏览器插件 vue-devtools

    7. webpack 打包工具(代码优化,并打包)

      安装 webpack 和 webpack-cli
      npm install webpack webpack-cli -g
      -g:全局安装,即所有项目都能用
      
    8. 构建 Vue 项目

      1. 安装脚手架
      npm install vue-cli@2.9.x -g
      
      2. 创建 webpack 模板的 Vue 项目
      vue init webpack 项目名
      
      3. 启动项目 npm run dev
      就是运行 webpack-dev-server 官方提供的一个 express server,相当于是已经在开发者模式中发布了
      

    O n e   E n d . One\ End. One End.

    第2章 Vue 开发基础(上)

    一、填空题

    题目
    1.Vue 实例对象通过 __ 方式来创建。1. new
    2.Vue 初始数据在实例对象的 __ 参数中进行定义。2. data
    3.Vue 实例对象中的 el 参数表示 __。3. 唯一根标签
    4.Vue 中实现双向数据绑定的指令是 __。4. v-model
    5.Vue 事件绑定指令是 __。5. @,即 v-on

    二、判断题

    1.在项目中引入了 vue.js 文件,才可以创建 Vue 实例。
    2.Vue 实例对象指令主要包括自定义指令和内置指令,通过指令省去 DOM 操作。
    3.Vue 事件传递方式有冒泡和捕获,默认是冒泡。
    4.Vue 开发提出了组件化开发思想,每个组件都是一个孤立的单元。
    5.在 Vue 中 beforeDestroy 与 destroyed 钩子函数执行后,都可以获取到 Vue 实例。
    T   T   T   T   T T\ T\ T\ T\ T T T T T T

    三、选择题

    1.下列关于 Vue 实例对象说法不正确的是( )。
    A.Vue 实例对象是通过 new Vue({})方式创建的
    B.Vue 实例对象只允许有唯一的一个根标签
    C.通过 methods 参数可以定义事件处理函数
    D.Vue 实例对象中 data 数据不具有响应特性

    2.Vue 实例对象中能够监听状态变化的参数是( )。
    A.watch
    B.filters
    C.watching
    D.components

    3.Vue 中实现数据双向绑定的是( )。
    A.v-bind
    B.v-for
    C.v-model
    D.v-if

    4.在 Vue 中,能够实现页面单击事件绑定的代码是( )。
    A.v-on:enter
    B.v-on:click
    C.v-on:mouseenter
    D.v-on:doubleclick

    5.下面列出的钩子函数会在 Vue 实例销毁完成时执行的是( )。
    A.updated
    B.destroyed
    C.created
    D.mounted

    四、简答题

    1.请简述什么是 Vue 实例对象。

    var vm = new Vue()
    

    vm 就是一个 Vue 实例对象,先通过 Vue 构造器创建实例,然后通过 new 关键字创建对象

    2.请简述什么是 Vue 组件化开发。

    把一个大问题划分成若干小问题,逐个击破

    组件还可复用,降低代码耦合度,提高开发效率

    3.请简单介绍 Vue 数据绑定内置指令的主要内容有哪些。

    v-bind 单向绑定,无交互

    v-model 双向绑定,有交互

    五、编程题

    1.请实现一个比较两个数字大小的页面。

    暂略

    2.请实现一个简单的网页计算器。

    暂略


    T w o   E n d . Two\ End. Two End.

    第3章 Vue 开发基础(下)

    一、填空题

    题目
    1.Vue 实例对象通过 __ 方式来获取。1. vm.$root
    2.Vue 初始数据通过 __ 方式获取。2. vm.$data
    3.Vue 中通过 __ 获取当前实例的子组件。3. vm.$children
    4.Vue 中创建插件提供的方法是 __。4. install
    5.Vue 中通过 __ 创建自定义指令。5. Vue.directive()

    二、判断题

    1.Vue 提供的全局 API 接口 component(),不能用来注册组件。
    2.Vue 中 Vue.config 对象用来实现 Vue 全局配置。
    3.Vue 中 data 选项中的数据具有响应特性。
    4.Vue 中通过 vm .$slots 可以获取子组件实例对象。
    5.Vue 实例对象中通过 $options 可以获取到父作用域下的所有属性。
    F   T   T   F   F F\ T\ T\ F\ F F T T F F

    三、选择题

    1.下列关于 Vue 实例对象接口的说法,错误的是( )。
    A.Vue 实例对象提供了实例可操作方法
    B.Vue 实例对象 $data 数据可以由实例 vm 委托代理
    C.通过 Vue 实例对象可以进行 Vue 全局配置
    D.Vue 实例对象接口同样可以通过 Vue 方式调用

    2.下面关于 Vue 全局配置的说法,错误的是( )。
    A.Vue.config.devtools 可以设置 devtools 调试工具的启用和关闭
    B.Vue.config 是一个对象,包含 Vue 的全局配置
    C.Vue.component() 可以获取 Vue 全局配置对象
    D.Vue.set.config 可以获取到全局配置对象==

    3.下列不属于 Vue 实例对象属性的是( )。
    A. d a t a = = B . data ==B. data==Bcomponent==
    C. p r o p s D . props D. propsDroot

    4.Vue 实例对象获取子组件实例对象的方式是( )。
    A. p a r e n t = = B . parent ==B. parent==Bchildren==
    C. c h i l d D . child D. childDcomponent

    5.下面关于 Vue.mixin 的说法,错误的是( )。
    A.Vue.mixin 是 Vue 提供的全局接口 API
    B.Vue.mixin 可以用来注入组件选项
    C.使用 Vue.mixin 可能会影响到所有 Vue 实例
    D.Vue.mixin 不可以用来注入自定义选项的处理逻辑

    四、简答题

    1.请简述什么是 Vue 插件。

    Vue 插件就是一个对象或函数,需要有 install 方法,可以通过 Vue.use 安装

    let 自定义插件对象,然后写其 install 方法,最后用 Vue.use 安装插件

    image-20201127205607017

    2.请简述 Vue 全局 API 接口的主要内容。

    1. Vue.directive,自定义内置指令,例如 focus
    2. Vue.use,安装插件
    3. Vue.extend,为 Vue 构造器创建一个子类
    4. Vue.set,向响应式对象中添加一个属性,并确保其也是响应式的
    5. Vue.mixin,混入,影响全局 vue 实例

    3.请简单介绍 Vue 实例对象的属性和方法。

    1. vm.$props,接收上级组件向下级传递的数据
    2. vm.options,Vue 实例初始化时传的自定义选项
    3. vm.$el,访问根 DOM 元素
    4. vm.$children,当前实例的直接子组件
    5. vm.$root,组件树的根 Vue 实例
    6. vm.$slot,查看插槽内容
    7. vm.$attrs,组件属性

    五、编程题

    1.请使用插槽 vm .$slots实现一个导航栏结构。

    暂略

    2.请创建一个自定义插件,实现一个登录页面。

    暂略


    T h r e e   E n d . Three\ End. Three End.

    第4章 过渡和动画

    一、填空题

    题目
    1.Vue 提供的内置过渡封装组件是 __。1. transition
    2.在过渡封装组件中使用 __ 属性可以重置过渡中切换类名的前缀。2. name
    3.通过 __ 特性设置节点在初始渲染的过渡。3. appear
    4.在离开的过渡中有 __ __ __ 3 个 class切换。4. v-leave、v-leave-active、v-leave-to
    5.__ 的类名优先级要高于普通的类名。5. 自定义过渡

    二、判断题

    1.函数式组件中的 render() 函数用来创建组件模板。
    2.给过渡元素添加 v-bind:css=“true”,Vue 会跳过 CSS 的检测。
    3.在 @before-enter 阶段可以设置元素开始动画之前的起始样式。
    4.在使用 animate.css 库时,基本的 class 样式名是 animate。
    5.enter 和 leave 动画钩子函数,除 el 参数外还会传入一个 done 作为参数。
    T   F   T   F   T T\ F\ T\ F\ T T F T F T

    三、选择题

    1.下列选项中关于动画钩子函数说法,正确的是( )。
    A.@leave-cancelled 函数只能用于 v-if 中
    B.对于 @enter 来说,当与 CSS 结合使用时,回调函数 done 是必选的
    C.done 作为参数,作用就是告知 Vue 动画结束
    D.钩子函数需要结合 CSS transitions 或 animations 使用,不能单独使用

    2.下列关于 Vue 为 标签提供的过渡类名的说法,错误的是( )。
    A.v-enter 在元素被插入之前生效,在元素被插入之后的下一帧移除
    B.v-leave 在离开过渡被触发时立刻生效,下一帧被移除
    C.v-enter-active 可以控制进入过渡的不同的缓和曲线
    D.如果 name 属性为 my-name,那么 my- 就是在过渡中切换的类名的前缀

    3.下列选项中关于多个元素过渡的说法,错误的是( )。
    A.当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们
    B.不相同元素之间可以使用 v-if 和 v-else 来进行过渡
    C. 组件的默认行为指定进入和离开同时发生
    D.不可以给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else

    四、简答题

    1.请简述 JavaScript钩子函数包括哪些。

    1. beforeEnter
    2. enter
    3. afterEnter
    4. enterCancelled
    5. beforeLeave
    6. leave
    7. afterLeave
    8. leaveCancelled

    2.请简述 6 个内置的过渡类名。

    1. v-enter,元素插入前
    2. v-enter-active,插入过程中
    3. v-enter-to,元素插入后,与此同时 v-enter 被移除
    4. v-leave,离开前
    5. v-leave-active,离开中
    6. v-leave-to,离开后

    3.请简述自定义过渡类名的属性有哪些。

    1. enter-class
    2. enter-active-class
    3. enter-to-class
    4. leave-class
    5. leave-acitve-class
    6. leave-to-class

    五、编程题

    1.编写一个登录页面,使用 Tab 栏实现“账号登录”和“二维码登录”这两种方式的切换,并通过 transition 组件结合 anim ate.css实现切换时的动画效果。

    暂略

    2.实现单击一个按钮后,切换盒子的展开和收起状态。

    暂略


    F o u r   E n d . Four\ End. Four End.

    第5章 Vue 路由

    一、填空题

    题目
    1.在项目中可以通过 npm 命令 __ 安装路由 vue-router。1. npm install vue-router@3.1.x
    2.使用 __ 获取当前激活的路由的状态信息。2. this.$route 路由对象
    3.通过一个名称来标识一个路由的方式叫作 __。3. 命名路由
    4.在业务逻辑代码中实现导航跳转的方式称为 __。4. 编程式导航
    5.单页面应用主要通过 URL 中的 __ 实现不同页面之间的切换。5. hash #

    二、判断题

    1.后端路由通过用户请求的 URL 导航到具体的 html 页面。
    2.开发环境下,使用 import VueRouter from ‘vueRouter’ 来导入路由。
    3.嵌套路由的使用,主要是由页面结构来决定的。
    4.params 方式传参类似于 GET 请求。
    5.在单页面应用中更新视图可以不用重新请求页面。
    T   F   T   F   T T\ F\ T\ F\ T T F T F T

    三、选择题

    1.下列 vue-router 插件的安装命令,正确的是( )。
    A.npm install vue-router
    B.node install vue-router
    C.npm Install vueRouter
    D.npm I vue-router

    2.下列关于 query 方式传参的说法,正确的是( )。
    A.query 方式传递的参数会在地址栏展示
    B.在页面跳转的时候,不能在地址栏看到请求参数
    C.在目标页面中使用“this. route.query.参数名”来获取参数
    D.在目标页面中使用“this.$route.params.参数名”来获取参数

    3.下列关于 params 方式传参的说法,错误的是( )。
    A.在目标页面中也可以使用“ r o u t e . p a r a m s . 参 数 名 ” 来 获 取 参 数 B . 在 页 面 跳 转 的 时 候 , 不 能 在 地 址 栏 看 到 请 求 参 数 = = C . 以 p a r a m s 方 式 传 递 的 参 数 会 在 地 址 栏 展 示 = = D . 在 目 标 页 面 中 使 用 “ t h i s . route.params.参数名”来获取参数 B.在页面跳转的时候,不能在地址栏看到请求参数 ==C.以 params 方式传递的参数会在地址栏展示== D.在目标页面中使用“this. route.params.B==Cparams==D使this.route.params.参数名”来获取参数

    四、简答题

    1.请简述以 npm 方式安装 vue-router 的步骤。

    1. 在指定目录下 npm install vue-router@3.1.x

    2. 创建 main.js 逻辑入口

      import Vue from 'vue'
      import app from './App.vue'
      import VueRouter from 'vue-router'
      Vue.use(VueRouter)
      import router from './router.js'
      import './lib/mui/css/mui.css'
      
      new Vue({
          el: '#app',
          render: c => c(app),
          router
      })
      

    2.请简述 vue-router 路由的作用。

    前端路由,用于切换页面,却不像后端路由那样每次切换页面都要请求服务器,响应快,提升用户体验

    3.请简单列举并说明路由对象包括哪些属性。

    this.$router,全局路由对象

    this.$route,当前路由对象

    1. $route.path

    2. $route.query:{key : value} URL 查询参数

    3. $route.params:{key : value} 路由转跳携带参数

    4. $route.hash:在 history 模式下获取当前路由的 hash 值(有 # 的那种)

    5. $route.fullPath:完成解析后的URL,包含查询参数和 hash 的完整路径

    6. $route.name

    7. $route.matched:路由记录,当前路由下路由声明的所有信息,从父路由(如果有)到当前路由为止

    8. $route.redirectedFrom:若有重定向,即为重定向来源的路由

    (7 和 8 没试验到)

    五、编程题

    请使用 Vue 路由相关知识动手实现 Tab 栏切换案例,要求如下。
    ① 创建一个 components/Message.vue 组件,用来展示页面内容。
    ② 创建 3 个子路由,分别是“待付款” “待发货” “待收货”页面,在每个子路由页面单独写出相应的内容

    暂略


    F i v e   E n d . Five\ End. Five End.

    第6章 Vuex

    一、填空题

    题目
    1.Vuex 实例对象通过 __ 方式来获取。1. vm.$store
    2.Vuex 实例对象中初始数据状态通过 __ 方式获取。2. vm.$store.state
    3.Vuex 实例对象中组件状态通过 __ 方式改变。3. vm.$store.commit()
    4.Vuex 中创建动态模块提供的方法是 __。4. store.registerModule()
    5.Vuex 中通过 __ 实现 actions 状态分发。5. vm.$store.dispatch()

    二、判断题

    1.Vuex 实例对象可以调用 Vue 全局接口。
    2.Vuex 中的 Vue.config 对象用来实现 Vuex 全局配置。
    3.Vuex 的 state 选项中数据是初始数据状态。
    4.Vuex 中插槽可以实现组件任意嵌套,且在版本 2.2.6+ 以后开始支持。
    5.当在 Vuex 实例对象中调用 store 时,一定会获取到 store 实例对象。
    F   F   T   F   T F\ F\ T\ F\ T F F T F T

    三、选择题

    1. 下列关于 Vuex 实例对象接口的说法,错误的是( )。
      A .Vuex 实例对象提供了 store 实例对象可操作方法
      B.Vuex 实例对象 $data 数据可以由实例委托代理
      C.通过 Vuex 实例对象可实现组件状态的管理维护
      D .Vuex 实例对象初始数据是 state 数据
    2. 下面关于 Vuex 核心模块的说法,错误的是( )。
      A .Vuex 配置对象中,actions 选项是异步的
      B.Vuex.config 对象是全局配置对象
      C.Vuex 配置对象中,mutations 选项是同步的
      D .通过 commit 完成 mutations 提交
    3. 下列不属于 Vuex.Store 配置对象接收参数的是( )。
      A .data
      B.state
      C.mutations
      D .getters
    4. Vuex 实例对象中类似于 computed 计算属性功能的选项是( )。
      A .state
      B.mutations
      C.actions
      D .getters
    5. 下面关于 Vuex 中的 actions 的说法,正确的是( )。
      A .actions 中事件函数通过 commit 完成分发 B.acitons 中事件处理函数接收 context 对象
      C.actions 与 Vue 实例中的 methods 是类似的 D .可以用来注入自定义选项的处理逻辑

    四、简答题

    1.请简要分析 Vuex 的设计思想。

    用来管理状态,Vuex 作为 Vue 插件来使用,使 Vue 组件状态更加容易维护

    2.简述 Vuex 配置对象中的主要内容有哪些。

    1). actions:用来定义事件处理方法,用于处理 state 数据

    2). mutations:选项中的事件处理方法接收 state 对象作为参数,即初始数据

    3). getters:store 实例允许在 store 中定义 getters 计算属性,类似于 Vue 实例的 computed

    4). modules:modules 用来在 store 实例中定义模块对象

    5). plugins:Vuex 中的插件配置选项为 plugins,插件本身为函数

    6). devtools:store 实例配置中的 devtools 选项用来设置是否在 devtools 调试工具中启用 Vuex,默认值为 true,表启用

    3.简述 Vuex 中的 actions 的含义。

    actions 选项用来定义事件处理方法,用于处理 state 数据。actions 类似于 mutations,不同之处在于 actions 是异步执行的,事件处理函数可以接收 {commit} 对象,完成 mutation 提交,从而方便 devtools 调试工具跟踪状态的 state 变化。

    在使用时,需要在 store 仓库中注册 actions 选项,在里面定义事件处理方法。事件处理方法接收 context 作为第1个参数,payload 作为第 2 个参数(根据需要进行选择)。

    五、编程题

    请编程实现列表的增、删、改、查操作。


    S i x   E n d . Six\ End. Six End.

    第7章 Vue 开发环境

    一、填空题

    题目
    1.对于 CLI 类型的插件,需要以 __ 为前缀。1. @vue
    2.使用 npm 包通过 __ 命令全局安装 @ vue/cli 3.x。2. npm install -g @vue/cli
    3.使用 __ 来查看 Vue 的版本号。3. vue -V
    4.使用 yarn 包通过 命令全局安装 @ vue/cli 3.x。4. yarn global add @vue/cli
    5.在 Vue CLI 3 中使用 命令来创建一个 Vue 项目。5. vue create 项目名

    二、判断题

    1.卸载 vue-cli 的命令是 npm uninstall vue-cli-g。
    2.添加 CLI 插件的命令是 vue add vue-eslint。
    3.插件不能修改 webpack 的内部配置,但是可以向 vue-cli-service 注入命令。
    4.V ue CLI 通过 vue ui 命令来创建图形用户界面。
    5.在文件中用 “key=value”(键值对)的方式来设置环境变量。
    T   F   F   T   T T\ F\ F\ T\ T T F F T T

    三、选择题

    1. 下列选项中说法正确的是( )。
      A .新版的 Vue CLI的包名称为 vue-cli
      B.执行 npm uninstall vue-cli -g 命令可以全局删除 vue-cli 包
      C.使用 yarn install add @ vue/cli 命令可以全局安装 @ vue/cli 工具
      D .通过 vue add ui 命令来创建图形用户界面
    2. 关于 CLI 服务,下列选项说法错误的是( )。
      A .在 @ vue/cli-service 中安装了一个名为 vue-cli-service 的命令
      B.vue.config.js 是一个可选的配置文件
      C.通过 npx vue-cli-service helps 查看所有的可用命令
      D .通过 vue ui 使用 GUI 图形用户界面来运行更多的特性脚本
    3. 下列选项中说法正确的是( )。
      A .使用相对路径引入的静态资源文件,会被 webpack 处理解析为模块依赖
      B.放在 public 文件夹下的资源将会经过 webpack 的处理
      C.通过绝对路径被引用的资源将会经过 webpack 的处理
      D .URL 以~开始,会被认为是模块请求

    四、简答题

    1.简述如何安装 Vue CLI 3.x 版本的脚手架。

    npm install @vue/cli –g		# -g 表示全局安装
    

    2.简述如何在现有项目中安装 CLI 插件和第三方插件。

    CLI 插件安装完成之后,在 package.json 文件中查看,是以 @vue/cli-plugin-开头。

    注意:vue add 安装和调用只是 Vue CLI 插件,普通的 npm 包还是用 npm 来进行安装的。

    例如 vue add @vue/eslint

    第三方插件:

    如果不带 @vue/ 前缀,将会安装第三方包

    例如 vue add vuetify

    3.简单介绍 CLI 服务 vue-cli-service 中的 command 命令包括哪些。

    serve start development server 启动服务

    build build for production 生成用于生产环境的包

    inspect inspect internal webpack config 审查 webpack 配置

    lint lint and fix source files lint?并修复源文件

    五、编程题

    1.简单描述 Vue CLI 3 安装的过程。

    如果之前已经全局安装了旧版的 vue-cli(1.x或2.x),需要先进行卸载,指令如下:

    npm uninstall vue-cli -g

    如果之前没有全局安装旧版,则直接全局安装@vue/cli脚手架,指令如下:

    npm install @vue/cli –g

    vue –V 查看版本号

    2.简单描述使用 Vue CLI 3 创建项目的步骤。

    打开命令行工具,切换到项目根目录,执行以下指令来创建项目:

    vue create hello-vue(项目名)

    在交互界面中,选择手动配置项,进行配置

    项目创建完成后,执行以下命令进去项目目录:

    cd hello-vue

    执行命令,启动项目

    npm run server


    S e v e n   E n d . Seven\ End. Seven End.

    第8章 服务器端渲染

    一、填空题

    题目
    1.__ 插件可以用来进行页面的热重载。1. webpack-hot-middleware
    2.hash 模式路由,地址栏 URL 中会自带 __ 符号。2. #
    3.SSR 的路由需要采用 __ 的方式。3. history
    4.__ 是利用搜索引擎规则,提高网站在搜索引擎内自然排名的一种技术。4. SEO(搜索引擎优化)
    5.Vue 中使用服务器端渲染,需要借助 Vue 的扩展工具 __。5. vue-server-renderer

    二、判断题

    1.客户端渲染,即传统的单页面应用模式。
    2.webpack-dev-middleware 中间件会对更改的文件进行监控。
    3.服务器端渲染不利于 SEO 。
    4.服务器端渲染应用程序,需要处于 Node.js server 运行环境。
    5.使用 git-bash 命令行工具,输入指令 mkdirs vue-ssr 来创建项目。
    T   T   F   T   F T\ T\ F\ T\ F T T F T F

    三、选择题

    1. 下列选项中说法正确的是( )。
      A .vue-server-renderer 的版本要与 Vue 版本相匹配
      B.客户端渲染,需要使用 entry-server.js 和 entry-client.js 两个入口文件
      C.app.js 是应用程序的入口,它对应 vue-cli创建的项目的 app.js 文件
      D .客户端应用程序既可以运行在浏览器上,又可以运行在服务器上
    2. 下列关于 SSR 路由的说法,错误的是( )。
      A .SSR 的路由需要采用 history 的方式
      B.history 模式的路由提交不到服务器上
      C.history 模式完成 URL 跳转而无须重新加载页面
      D .hash 模式路由,地址栏 URL 中 hash 改变不会重新加载页面
    3. 下列关于 Nuxt.js的说法,错误的是( )。
      A .使用“create-nuxt-app 项目名”命令创建项目
      B.使用 Nuxt.js 搭建的项目中,pages 目录是用来存放应用的路由及视图
      C.在 Nuxt.js 项目中,声明式路由在 html 标签中通过 完成路由跳转
      D .Nuxt.js 项目中需要根据目录结构手动完成对应的路由配置

    四、简答题

    1.请简述什么是服务器端渲染。

    服务器端渲染(简称 SSR),是将组件或页面通过服务器生成 html 字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序,简单理解就是将页面在服务器中完成渲染,然后在客户端直接展示。

    2.请简述服务器端渲染的代码逻辑和处理步骤。

    Vue 进行服务器端渲染时,需要利用 Node.js 搭建一个服务器,并添加服务器端渲染的代码逻辑。

    使用 webpack-dev-middleware 中间件对更改的文件进行监控,使用 webpack-hot-middleware 中间件进行页面的热更新,使用 vue-server-renderer 插件来渲染服务器端打包的 bundle 文件到客户端

    3.请简述 Nuxt.js 中,声明式路由和编程式路由的区别。

    声明式路由:在页面中使用 完成路由跳转。

    编程式路由:在 JavaScript 代码中实现路由的跳转。

    五、编程题

    基于 Nuxt.js开发一个 Vue 程序,实现登录和注册切换。


    E i g h t   E n d . Eight\ End. Eight End.

    第9章 微商城项目

    一、填空题

    题目
    1.使用 Mint UI 库的页面,需要通过 __ 前缀来定义标签名。1. mt-
    2.__ 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。2. Axios
    3.__ 是最接近原生 App 体验的高性能前端框架。3. MUI
    4.使用 __,可以给 Vue 函数添加一个原型属性 $http,指向 axios。4. Object.defineProperty
    5.使用路由的声明式导航,在 html 标签中使用 __ 组件来实现路由的跳转。5.

    二、判断题

    1.MUI 是一套代码片段,提供了配套的样式和 HTML 代码段。
    2.使用 lazy-load 可以实现图片懒加载。
    3.通过 this. s t o r e . s t a t e . ∗ 可 以 访 问 s t a t e 中 的 数 据 。 4 . 组 件 想 要 修 改 数 据 , 需 要 调 用 m u t a t i o n s 提 供 的 方 法 , 通 过 语 句 t h i s . store.state.* 可以访问 state 中的数据。 4.组件想要修改数据,需要调用 mutations 提供的方法,通过语句 this. store.state.访state4mutationsthis.store.emit('方法名 ') 实现。
    5.better-scroll 是一款支持各种滚动场景需求的插件。
    F   T   T   F   T F\ T\ T\ F\ T F T T F T

    三、选择题

    1. 下列选项中,( )指令可用来切换元素的可见状态。
      A .v-show
      B.v-hide
      C.v-toggle
      D .v-slideHide
    2. 下列关于 ref 作用的说法,错误的是( )。
      A .ref 在子组件中使用时,使用 this.$refs.name 获取到组件实例,可以使用组件的所有属性和方法
      B.ref 加在普通的元素上,用 this.ref.name 获取到的是 DOM 元素
      C.可以利用 v-for 和 ref 获取一组数组或 DOM 节点
      D .ref 在 DOM 渲染完成之前就能使用
    3. 想要获取购物车小球在页面上的位置,以下可以使用的是( )。
      A .offset()
      B.getBoundingClientRect()
      C.width()
      D .height()

    四、简答题

    1.请简单列举一个项目从开始到上线的开发流程需要的步骤。

    1、产品创意

    在这一阶段就是决定要做一个什么产品(What),为什么要做这个产品(Why),解决 What 和 Why 的问题

    2、产品原型

    在这一阶段,通过由产品经理对原型进行设计包括功能、页面,最重要的是用户体验

    3、美工设计

    在这一阶段,美工设计人员根据产品经理提供的原型图实现 PSD 设计图稿,并切图

    4、前端实现

    在这一阶段,前端开发工程师拿到美工设计好的 psd 图,负责具体的 HTML、CSS 静态页面的实现,以及动态特效、动态数据的绑定和交互的实现

    5、后端实现

    在这一阶段,实现数据处理、业务逻辑代码

    6、测试、试运营、上线

    由测试人员进行项目测试。将所有的问题解决后,就可以试运行,将项目上线

    2.请简单列举 6 个“微商城”项目中用到的重点知识。

    1、路由的配置

    2、Vuex的配置

    3、axios的配置以及接口的调用

    4、购物车功能的实现

    5、底部导航栏的实现

    6、分类列表的实现

    7、图片预览的实现vue-preview插件


    N o n e   E n d . None\ End. None End.

    展开全文
  • Vue路由(vue-router)详细讲解指南

    万次阅读 多人点赞 2022-01-19 10:21:49
    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转; 首先我们...

    中文文档:https://router.vuejs.org/zh/

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转;

    首先我们来学习三个单词(route,routes,router):
    1,route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由;
    2,routes:它是个复数,表示多个的集合才能为复数;即我们可以理解为多个路由的集合,JS中表示多种不同状态的集合的形式只有数组和对象两种,事实上官方定义routes是一个数组;所以我们记住了,routes表示多个数组的集合;
    3,router:译为路由器,上面都是路由,这个是路由器,我们可以理解为一个容器包含上述两个或者说它是一个管理者,负责管理上述两个;举个常见的场景的例子:当用户在页面上点击按钮的时候,这个时候router就会去routes中去查找route,就是说路由器会去路由集合中找对应的路由;

    我们结合一个小demo来看(文章有点长,耐心慢慢看,学得慢才能进步的快,当然可以跟着一起敲):

    首先需要安装vue-cli来构建一个vue的开发环境(怎么安装这里不讲,自己百度去,如果这种问题自己都解决不了的话,后面的知识可能对你来说收益不大)
      
    安装完vue-cli之后,我们的项目目录结构如下:
    在这里插入图片描述

    然后我们在命令行中输入npm install vue-router -g来安装vue-router,安装完之后我们可以打开package.json文件,在package.json文件中可以看到vue-router的版本号;
    在这里插入图片描述

    到这一步我们的准备工作就完成了,要进行写demo了;

    我们在src目录下新建三个文件,分别为page1.vue和page2.vue以及router.js:

    page1.vue:

    复制代码
    <template>
        <div>
            <h1>page1</h1>
            <p>{{msg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    msg: "我是page1组件"
                }
            }
        }
    </script>
    

    page2.vue:

    <template>
        <div>
            <h1>page2</h1>
            <p>{{msg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    msg: "我是page2组件"
                }
            }
        }
    </script>
    复制代码
    

    router.js

    //引入vue
    import Vue from 'vue';
    //引入vue-router
    import VueRouter from 'vue-router';
    //第三方库需要use一下才能用
    Vue.use(VueRouter)
    //引用page1页面
    import page1  from './page1.vue';
    //引用page2页面
    import page2  from './page2.vue';
    
    //定义routes路由的集合,数组类型
    const routes=[
        //单个路由均为对象类型,path代表的是路径,component代表组件
        {path:'/page1',component:page1},
        {path:"/page2",component:page2}
    ]
    
    //实例化VueRouter并将routes添加进去
    const router=new VueRouter({
    //ES6简写,等于routes:routes
        routes
    });
    
    //抛出这个这个实例对象方便外部读取以及访问
    export default router
    

    这里我们再修改一下main.js

    import Vue from 'vue'
    import App from './App'
    //引用router.js
    import router from './router.js'
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
    //一定要注入到vue的实例对象上
      router,
      components: { App },
      template: '<App/>'
    })
    

    修改App.vue

    复制代码
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>
    //router-link定义页面中点击触发部分  
          <router-link to="/page1">Page1</router-link>
          <router-link to="/page2">Page2</router-link>
        </div>
    //router-view定义页面中显示部分
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    就这样,我们的页面就可以进行路由跳转和切换了,路由的基本使用就完成了;但是有个问题就是我们第一次进去是看不到路由页面的,这是因为我们没有设置默认值,我们首次进入的时候路径是为空的,那么我们可以这么解决:

    router.js

    复制代码
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    Vue.use(VueRouter)
    import page1  from './page1.vue';
    import page2  from './page2.vue';
    import user   from './user.vue'
    
    const routes=[
        {path:'/page1',component:page1},
        {path:"/page2",component:page2},
        //可以配置重定向
        {path:'',redirect:"page1"}
        //或者重新写个路径为空的路由
        {path:"",component:page1}
    ]
    
    const router=new VueRouter({
        routes
    });
    
    export default router
    复制代码
    

    上面的两种解决方案都是可以解决的,配置重定向的意思就是当匹配到路径为空的时候,就会重定向到page1,执行page1的路由;或者我们也可以重新配置个路由,路径为空的时候router-view展示page1的页面;

    用重定向和单独配置路由的区别:

    重定向实际上是当匹配到路径符合条件的时候去执行对应的路由,当然这个时候的url上面的地址显示的是对应的路由,页面也是对应的路由页面;

    重新配置路由是当匹配到路径符合条件的时候,router-view页面展示部分负责拿符合条件路由的页面来展示,实际上url是没有发生变化的;

    那么还有些复杂情况,是基本路由实现不了的;我们来接着往下看

    动态路由匹配:

    其实我们的生活中有很多这样的例子,不知道大家留意没有?比如一个网站或者后台管理系统中,在我们登录之后,是不是通常会有一个欢迎回来,XXX之类的提示语,这个我们就可以通过动态路由来实现这个效果;

    首先在src目录下新建一个user.vue文件:

    复制代码
    <template>
        <div>
            <h1>user</h1>
           //这里可以通过$route.params.name来获取路由的参数
            <p>欢迎回来,{{$route.params.name}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    msg: "我是page1组件"
                }
            }
        }
    </script>
    
    

    然后我们修改App.vue文件的代码:

    复制代码
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>
          <router-link to="/page1">Page1</router-link>
          <router-link to="/page2">Page2</router-link>
        </div>
    
    //添加两个router-link标签
        <div>
          <router-link to="/user/xianyu">动态路由咸鱼</router-link>
          <router-link to="/user/mengxiang">动态路由梦想</router-link>
        </div>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    复制代码
    

    修改我们的router.js

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    Vue.use(VueRouter)
    import page1  from './page1.vue';
    import page2  from './page2.vue';
    import user   from './user.vue'
    
    const routes=[
        {path:'/page1',component:page1},
        {path:"/page2",component:page2},
        // {path:'',redirect:"page1"}
        {path:"",component:page1},
     //使用冒号标记,当匹配到的时候,参数值会被设置到this.$route.params中
        {path:"/user/:name",component:user}
        
    ]
    
    const router=new VueRouter({
        routes
    });
    
    export default router
    复制代码
    
    

    配置好了,不出意外是能正常运行的,我们来看一下效果:
    在这里插入图片描述
    动态路由匹配给我们提供了方便,使得我们通过配置一个路由来实现页面局部修改的效果,给用户造成一种多个页面的感觉,是不是很酷!!!

    酷的同时也会给我们带来一些问题,因为使用路由参数时,从/user/xianyu导航到/user/mengxiang,原来的组件实例会被复用,两个路由都渲染同个组件,比起销毁再创建,显示复用显得效率更高,带来的的只管问题就是生命周期钩子函数不会再被调用,也就是不会再被触发;但是办法总比问题多,我们可以通过监听$route对象来实现;

    修改user.vue的代码

    复制代码
    <template>
        <div>
            <h1>user</h1>
            <p>欢迎回来,{{msg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    // msg: "我是page1组件"
                    msg:""
                }
            },
            watch:{
    //to表示即将要进入的那个组件,from表示从哪个组件过来的
                $route(to,from){
                    this.msg=to.params.name; 
                    console.log(111);
                }
            }
        }
    </script>
    复制代码
    

    效果图如下:
    在这里插入图片描述

    我们可以很明显的看到我们监听的$route对象被触发了,控制台也输出了;

    下面我们来一起看一下嵌套路由:

    嵌套路由:

    很多时候我们的页面结构决定了我们可能需要嵌套路由,比如当我们进入主页之后有分类,然后当选择其中一个分类之后进入对应的详情,这个时候我们就可以用到嵌套路由;官方文档中给我们提供了一个children属性,这个属性是一个数组类型,里面实际放着一组路由;这个时候父子关系结构就出来了,所以children属性里面的是路由相对来说是children属性外部路由的子路由;

    好记性不如烂代码,让我们通过代码来看一看:

    首先在我们的src目录下新建两个vue文件,分别是phone.vue和computer.vue

    phone.vue

    复制代码
    <template>
        <div>
            <p>{{msg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    msg: "嵌套手机组件"
                }
            }
        }
    </script>
    复制代码
    

    computer.vue

    复制代码
    <template>
        <div>
            <p>{{msg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    msg: "嵌套电脑组件"
                }
            }
        }
    </script>
    

    然后我们再修改我们的App.vue文件:

    复制代码
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>
          <router-link to="/page1">Page1</router-link>
        </div>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    复制代码
    

    通过上面的App.vue文件我们可以看到,我们此时页面只有一个page1的标签了;

    我们再来修改router.js

    复制代码
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    Vue.use(VueRouter)
    import page1  from './page1.vue';
    import page2  from './page2.vue';
    import user   from './user.vue';
    import phone  from './phone.vue';
    import computer from './computer.vue'
    
    const routes=[
        {
            path:'/page1',
            component:page1,
            children: [
                {
                    path: "phone",
                    component: phone
                },
                {
                    path: "computer",
                    component: computer
                },
            ]
        },
        // {path:"/page2",component:page2},
        // // {path:'',redirect:"page1"}
        // {path:"",component:page1},
        // {path:"/user/:name",component:user}
        
    ]
    
    const router=new VueRouter({
        routes
    });
    
    export default router
    复制代码
    

    为了大家看的直观点,其他路由全部注释了,页面只剩下/page1这一个路由了;
    在这里插入图片描述

    上面说到了,children属性其实就是一个子路由集合,数组结构里面放着子路由;

    效果图如下:
    在这里插入图片描述
    路由导航两种方式:

    标签导航:标签导航是通过转义为标签进行跳转,其中router-link标签中的to属性会被转义为a标签中的href属性;

    //跳转到名为user路由,并传递参数userId
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    

    编程式导航:我们可以通过this.$router.push()这个方法来实现编程式导航,当然也可以实现参数传递,这种编程式导航一般是用于按钮点击之后跳转

    router.push({ name: 'user', params: { userId: 123 }})
    

    这两者都会把路由导航到user/123路径

    命名路由:

    有的时候,通过一个名称来标识一个路由显得更方便一些,所以官方为了方便我们偷懒,又给我们在路由中添加了一个name属性,命名这个属性之后我们访问这个属性就等于直接访问到路由;

    普通路由:

    router.push({ path: '/user/:userId', params: { userId: 123 }})
    

    命名路由:

    router.push({ name: 'user', params: { userId: 123 }})
    

    其实两者并没有什么区别,只是提供了两种方式来访问路由,可以通过路径来匹配也可以通过别名来匹配;

    展开全文
  • vue2与vue3的区别

    万次阅读 多人点赞 2020-09-25 17:13:28
    Vue2和Vue3开发组件有什么区别 vue2和vue3双向数据绑定的区别 总结: 1. vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式...
  • vue-resource.js

    千次下载 热门讨论 2016-04-20 12:47:03
    vue-resource.js,其他地方还没有找到可以下载的
  • Vue + Spring Boot 项目实战(一):项目简介

    万次阅读 多人点赞 2019-03-31 11:19:37
    白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目,主要帮助 web 开发初学者通过实践方式打通各个环节的知识。
  • Vue常用的插件集合

    千次阅读 2022-02-09 19:56:40
    element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material...
  • Vue3和Vue2的区别

    千次阅读 2022-02-17 20:39:57
    Vue3和Vue2的区别 vue3和vue2生命周期对比
  • Vue安装及环境配置、开发工具

    万次阅读 多人点赞 2020-09-29 17:06:08
    vue安装环境搭建 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录vue安装环境搭建前言一、node.js安装和配置1. 下载安装node.js2. 配置默认安装目录和缓存日志目录3. node.js环境配置4...
  • Vue - vue create、vue ui、vue init三种方式创建Vue项目

    万次阅读 多人点赞 2020-11-28 11:45:40
    Vue学习(十九)- 三种方式创建Vue项目(vue create、vue ui、vue init) 安装@vue/cli 为npm安装的包配置环境变量。 运行下面这条命令。 npm install -g @vue/cli 在CMD中运行vue --version命令,如果输出了@vue/...
  • 当前项目涉及了2个前端展示系统,基于vue-element-admin的前端框架进行前后端分离开发,选择vue-element-admin框架,它是一个vue+element ui的开源技术方案:vue-element-admin 码云地址,教程:vue-element-admin...
  • vue中使用ant-design-vue组件

    万次阅读 2022-03-30 15:35:16
    vue中使用ant-design-vue组件 文章目录在vue中使用ant-design-vue组件1. 安装2. 引入组件库3. 使用3.1 按钮样式3.2 导航栏样式3.3 表单样式 官方地址:Ant Design Vue 1. 安装 首先使用vue-cli创建项目,然后...
  • Vue工具库VueUse的具体用法

    千次阅读 2022-03-22 13:19:39
    前言 上次在看前端早早聊大会中, 尤大大再一次提到了 VueUse 的一个库。 好奇了一下,点看看了看。好家伙啊, 我直接好家伙。这不就是曾经我也想自己写一个...VueUse不是Vue.use,它是为Vue 2和3服务的一套Vue Composi
  • vue2和vue3区别

    万次阅读 2022-02-22 15:39:37
    1. vue2和vue3双向数据绑定原理发生了改变 vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。 相比与vue2,...
  • vue2和vue3的区别

    千次阅读 多人点赞 2022-02-21 15:09:16
    文章目录前言一、vue2和vue3双向数据绑定原理的区别?二、生命周期的变化三、diff不同 前言 一、vue2和vue3双向数据绑定原理的区别? vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行...
  • Vite 先让我说几句废话。 在写本文时 Vite 没有提供 Vue2 的创建方式。 相信有些开发者还没开始学 Vue3,但又想尝尝 Vite...使用 Vite 创建出来的 Vue 项目,暂时都是 Vue3 的。 Vite 是构建工具的高阶封装。它的内...
  • Vue 3系列之03——Vue 3使用TypeScript

    千次阅读 2022-03-25 19:18:18
    静态类型系统可以帮助防止许多潜在的运行时错误,这就是为什么Vue 3是用TypeScript编写的。这意味着在Vue应用开发中,使用TypeScript进行开发不需要任何其他工具。TypeScript在Vue 3世界中是一等公民。 有两...
  • Vue基础知识总结 1:Vue入门

    万次阅读 多人点赞 2020-06-23 10:49:14
    昨天晚上23:00,Vue,正式打响第一枪!转行三年半,向全栈迈进,争取三年内可以成为架构师,成为世界500强公司的中流砥柱,fighting从未停止,加油! 一、简介 Vue(读音 /vjuː/,类似于 view)是一套用于构建...
  • vue:脚手架的搭建和运行,脚手架文件结构,避免样式冲突,懒加载,第一个Vue项目示例。
  • VUE3 VUE-DEVTOOLS 安装

    千次阅读 2022-01-20 14:02:03
    Vue3 Vue-Devtools安装
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-05-29 07:49:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • Vue组件化之VueComponent介绍

    千次阅读 2022-02-13 21:34:38
    这篇文章主要介绍的是VueComponent函数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
  • 背景:电脑使用多年,一直使用vue 2.x版本,项目开发过程中由于一个模块涉及的集成模块过多,导致需要进行定义的变量越来越多,代码出现冗余,因此在同事的推动下,鉴于vue 3.x的优化,故对自己本来使用的vue 2.9.6...
  • vue前你需要知道的:vue生态圈

    千次阅读 多人点赞 2022-03-27 17:45:03
    我说的是2022年的vue生态,没准过一年两年的vue又搞出新的花样了,建议大家与时俱进,多关注官网,世面上的vue文章本来就少,vue更新的又快,so很多文章淘汰的也快了,如果你是2022年入手vue的,建议找最新的教程...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,749,631
精华内容 699,852
关键字:

vue

友情链接: 15221.zip