VUE实战

（饿了么商家点餐页面Vue实战项目）better scroll实现后发现的问题：手机端右边商品栏滑动到底左边菜单栏超出屏幕隐藏菜单部分不显示

具体问题描述：手机端当右边商品滚动到对应最后一个菜单“特色粥品”（超出屏幕长度隐藏的菜单），左边对应菜单栏仍隐藏不可见。如下图：解决办法：仿照点击菜单项右边商品栏滚动到对应位置的方法：（1）在li的class添加menu-list-hook，该class没有具体的样式，用于在JS中获取对象。（2）在计算高亮菜单项处添加scrollToElement，使左边菜单栏随之滚动到对应的菜单项。更改后解决该
zZ_Terry25·2020-08-13 11:00

Vue实战 手写QQ音乐一(api接口搭建)

为了请求QQ音乐的数据时的跨域问题，我们使用Node.js+Express搭建一个中间件可以直接在github:https://github.com/liaoqinwei/qqMusicApi拔取源码写的过程中借助文章整理的接口(需要原生的qq音乐接口即可访问)https://blog.csdn.net/weixin_33874713/article/details/88003925一、安装配置n
壳子i·2020-08-12 00:16

移动端Vue项目总结——项目准备之搭建vue-cli脚手架

因为在职工作没有那么忙，且公司项目较简单，而且没有用到过框架enenen一直有在学习vue，但还是对真正的实战项目存在很多疑问，于是利用工作完成之余，在慕课网上跟了一个vue实战项目，虽然不是很复杂，但也全面的了解了企业级别
小雨繁星儿·2020-08-11 22:07

Vue实战之封装组件echarts柱形图、折线图

封装一个echarts子组件，父组件可以多次调用封装一个柱形图。柱形图和折线图的区别在于series数据中的type的类型不同，柱形图的type为bar,折线图的type为line，所以封装柱形图的和折线图是一样的，只是两者传入的参数不同封装一个bar类型的echarts图子组件：//引入基本模板letecharts=require('echarts/lib/echarts')//引入柱状图组件r
_dalianmiao·2020-08-11 16:02

(精华2020年5月14日更新) vue实战篇 vue-router动态路由的实现权限控制

router.jsimportVuefrom"vue";importVueRouterfrom"vue-router";Vue.use(VueRouter);importhomefrom'../pages/home.vue';importnewsfrom'../pages/news.vue';varallRoutes=[{path:'/login',name:'login',meta:{title
2b勿扰·2020-08-09 14:24

(精华2020年5月17日更新) vue实战篇 手写vue底层源码

MYvue.js主要作用监听属性变化classMYvue{constructor(options){this.$options=options;this.$data=options.data;//数据劫持this.observe(this.$data);this.$el=options.el;//包含Watcher创建newComplie(options.el,this)}//数据劫持observ
2b勿扰·2020-08-09 14:24

vue实战记录（一）- vue实现购物车功能之前提准备

vue实战记录（一）-vue实现购物车功能之前提准备vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据作者：狐狸家的鱼本文链接：vue实战
DebJane·2020-08-09 12:07

(精华2020年5月16日更新) vue实战篇 mixin插件开发

插件开发以vue-router为例importVuefrom'vue'//importVueRouterfrom'vue-router'importVueRouterfrom'../MYRouter/index.js'Vue.use(VueRouter)//执行install方法constroutes=[{path:'/',redirect:'/goods'},{path:'/goods',nam
2b勿扰·2020-08-09 05:28

(精华2020年5月12日更新) vue实战篇 axio.js封装和环境配置

首先安装npmicross-envpackage.jsom"scripts":{"test":"cross-envscene=testwebpack--configwebpack.config.js","dev":"cross-envscene=devwebpack-dev-server--configwebpack.config.js","build":"cross-envscene=prodw
2b勿扰·2020-08-09 04:08

Elecron-vue实战（二）— 请求Mock模拟数据渲染页面

一、环境搭建1、安装Mock.js如果仅仅用作脱离后台的模拟数据，就安装在开发环境中：npminstallmockjs-D2、安装axios-mock-adapteraxios-mock-adapter是一款axios的请求模拟调试器，可以使用它来实现请求拦截并模拟后台回复。npminstallaxios-mock-adapter-D二、使用（1）建立文件在src/renderer目录下新建moc
DebJane·2020-08-08 21:44

vue实战 京东金融 1 项目设计与原理分析

项目设计与原理分析环境及知识准备运行环境构建环境编辑器基础知识业务开发流程技术选型构建工具MVVM框架选择模块化设计自适应方案设计代码维护及复用性设计的思考业务开发测试验证发布上线工程构建安装项目设计与原理分析css模块化设计设计原则设计方法代码书写js组件设计设计原则设计方法自适应基本概念工作原理SPA（单页面）设计设计意义工作原理写代码构建工具上线指导环境及知识准备运行环境Node8.9.1建
May_Chiong·2020-08-08 12:26

【Vue实战】待办事项+echarts词云实现

一、效果实现二、实现步骤1.待办事项的实现首先需要一个card容器，然后再在里面使用一个表格，再对表格进行增添和删除列。难点在于掌握对JS数组的操作和获取表格的当前行信息。我废话不多说，直接上代码；提交待办事项添加{{scope.row.title}}删除handleDelete(index,row){this.$confirm('确定要删除吗？','提示',{type:'warning'}).t
adventure.Li·2020-08-06 18:05

vue实战项目 vue-typescript-music 音乐项目 解析

vuevue-routervuexvue/clitypescript高仿网易云音乐实现代码全方位解析前言:vue全家桶+TypeScript构建一款移动端音乐webApp项目的笔记项目源码地址（https://github.com/lang1427/vue-typescript-music）涉及功能:音乐播放器（播放进度条；播放列表；收藏歌单；删除播放列表中的歌曲；顶部歌单名过长滚动(通知信息)；
扛狼1427·2020-08-06 10:23

Vue实战（一）：vue2.0+elementUI 表单提交验证踩过的坑

1、form中以下三个地方一定要注意要用:model不能用v-model@click="onSubmit('form')"中参数要加引号2、data处理data(){return{books:[],keywords:'',currentPage:1,pagesize:5,dialogFormVisible:false,form:{id:'',title:'',author:'',date:'',p
零落尘土·2020-08-05 19:14

Elctron-vue实战（三）— Vuex管理Mock数据

关于vuex的简单理解在这篇文章中已经提过了，如何在vuex中管理mock数据呢。这是效果界面，所用的数据是mock模拟所得，使用vuex的store存储管理模拟数据。这是我的store目录结构，分成几个模块，以其中planList模块为例进行讲解。1.配置Vuex在modules文件夹中新建一个文件planList.js，然后在modules/index.js中导入importplanListf
DebJane·2020-08-05 17:32

Vue实战笔记01 - 简易网站后台的搭建之分类功能的实现

简易网站后台的搭建—分类功能的实现本文章是学习B站全栈之巅系列课程的学习笔记，利用笔记来吸收升华学到的知识。学习感受是，如果有一定的nodejs+mongoDB+vue的基础，加做过一两个相关的练手项目，再学习这个课程，你会发现原来搭建一个完整有基础功能的网站，是如此的简单，会有很大的收获。参考源码：https://github.com/morningClock/herohoner视频学习地址：点
Yuval Zhong·2020-08-05 15:10

vue实战024:Vue-Quill-Editor自定义图片上传

目录样式重写事件重定义前台文件发送后台接受文件并处理前台接受返回数据vue-quill-editor是个较为轻量级富文本，但是在使用vue-quill-editor我们会发现，vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大，而且也不方便我们处理。所以这里需要来重新定义图片上传功能，当我们选择图片后将图片上传服务器，服务
ProgramNotes·2020-08-05 00:24

vue实战开发009:伪元素中如何引用字体图标

前面我们有说到如何使用FontAwesome字体图标：vue实战开发008:引入FontAwesome字体图标，在我们使用vue时通常不会把数据写死，而是定义一个数据列表，再通过遍历来获取相应的数据，这里我们模仿
ProgramNotes·2020-08-03 18:49

vue实战--webpack基本使用

安装webpack全局安装：npmi-gwebpack目的：在任何目录中通过CLI使用webpack这个命令项目安装：npmi-Dwebpack目的：执行当前项目的构建安装失败：目录下存在一个以前的jQuery包安装成功使用实例思路1使用npminit-y初始package.json，使用npm来管理项目中的包2新建项目目录结构及index.html和main.js，实现隔行变色功能main.js
晨曦之光11·2020-08-03 02:59

初级项目vue实战项目 收银系统

Vue实战视频-快餐店收银系统(共11集)2017-05-22分类：Vue.js视频教程/视频教程阅读(126832)评论(136)课程前言这是我网站恢复后写的第一篇文章，在关站这段时间里，群里的小伙伴们给了我很多支持
怒放的阿旭·2020-08-01 14:57

Vue项目实战（五）配置 Axios api 接口调用文件

Vue项目实战（五）配置Axiosapi接口调用文件这一篇介绍v配置Axiosapi接口调用文件，公众号已经准备了vue实战教程，如果您有需要，可以在公众号回复“vue”获取。
huangshulang1234·2020-08-01 12:49

vue实战系列---------from 表单封装之input实现数字框 的千分位和小数点输入。

核心思想A.利用失去焦点事件on-focus替换千分位符号this.formInfoData[name]=this.formInfoData[name].replace(/\,/g,'')B.利用验证绑定的事件处理数字(处理数字功能有待完善，因不支持负数，精度不够，jstoFixed方法对于数字精度处理有问题)呵呵呵哒主要是思想和应用，具体数字处理网上有很多实例。这里不做赘述。//验证处理对象的绑
web前端执行者·2020-08-01 10:59

Vue实战：公用组件拆分，结合毕设完成后台导航栏

Vue实战：公用组件拆分，结合毕设完成后台导航栏 一、创建文件夹将公用组件都放到common文件中 二、修改webpack.base.conf.js在webpack.base.conf.js添加别名’common
Derrick Xu·2020-08-01 06:43

Web前端+移动端全套视频教程

Web前端+移动端全套视频教程|12、小程序|01.小程序.rar|11、Vue|05.Vue实战练习.rar|04.VueUI框架Element-UI.rar|03.Vue路由.rar|02.Vue网络请求
weixin_34234829·2020-08-01 04:18

Vue实战项目开发--深入理解vue组件

项目的源代码在GitHub上：点击查看组件使用的细节点使用is属性解决模板标签上出现bug的情况在子组件定义data时，data必须是一个函数，而不能是一个对象（因为子组件会多次调用，每个子组件享用自己的数据，而不是像根组件享有一套数据，通过函数来返回数据，就是让每个子组件拥有独立的数据）ref：可以在子组件上定义不同的ref，然后就可以通过引用来取得子组件的数据注意：另外的两个案例的代码在Git
任性的我·2020-07-31 13:10

Vue实战1-登录状态的处理（token、前后端请求拦截、项目结构的处理）

Vue实战1-登录状态的处理（token、前后端请求拦截、项目结构的处理）前端工程师必须要也能够了解后端代码的运行逻辑，全栈工程师就必须能够更加清楚的明白每个流程是如何工作的，并且做到让代码更加的复用性和简洁明了这个实战
weixin_46240162·2020-07-30 19:14

FE.SRC-Vue实战与原理笔记

实战-插件form-validate{{error}}constemailRE=/^(([^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/constvalidationPlugin={install(V
weixin_30576827·2020-07-30 10:03

Electron-vue实战（二）— 请求Mock数据渲染页面

Electron-vue实战（二）—请求Mock数据渲染页面作者：狐狸家的鱼本文链接GitHub：sueRimn一、环境搭建1、安装Mock.js如果仅仅用作脱离后台的模拟数据，就安装在开发环境中：npminstallmockjs-D2
diaoyanbian8143·2020-07-29 05:36

Vue实战笔记03 - 简易网站后台的搭建之后台信息管理功能的实现

后台信息管理功能的实现本文章是学习B站全栈之巅系列课程的学习笔记，利用笔记来吸收升华学到的知识。学习感受是，如果有一定的nodejs+mongoDB+vue的基础，加做过一两个相关的练手项目，再学习这个课程，你会发现原来搭建一个完整有基础功能的网站，是如此的简单，会有很大的收获。参考源码：https://github.com/morningClock/herohoner视频学习地址：点击这里物品管
Yuval Zhong·2020-07-28 20:50

Vue实战笔记

配置环境，使用stylus语法下载stylus包npminstallstylus--savenpminstallstylus-loader--save建立HomeHeader主页头部组件，iconfont的使用，~~~建立一个iconfont文件夹放入上面的4个文件,在上一级目录放入iconfont.css,把css的路径修改在main.js中引入使用styl创建全局变量css，使通用的css引用
酷雨吹·2020-07-28 20:10

Vue实战2-第一个页面

上一次我们搭好了vue的环境，也成功把网页跑起来了。但是我们还不知道这一切都是怎么实现的，现在来看看第一个页面。首先我们得知道webpack是什么，以及怎么用的。Webpack入门一小时包教会——webpack入门指南Webpack的工作方式是：把你的项目当做一个整体，通过你给定的主文件（如：index.js），将从这个文件开始找到你项目的所有依赖文件，使用loaders处理它们，最后打包成一个浏
danejahn·2020-07-28 10:39

vue实战笔记1

初始文件全局安装vue-clinpminstallvue-cli-gvue-V初始化模板文件vueinittemplate(webpack)projectname(name)相关指令npmrundevnpmrunbuild单页应用多页应用单页:只加载一次页面切换块多页：每次页面跳转都要加载新的页面页面切换慢路由vue-router根据地址栏哈希的变换加载相应的组件htmlless预处理语言less
qq_42262895·2020-07-28 09:46

Electron-vue实战（三）— 如何在Vuex中管理Mock数据

Electron-vue实战（三）—如何在Vuex中管理Mock数据作者：狐狸家的鱼本文链接：Vuex管理Mock数据GitHub：sueRimn在vuex中管理mock数据关于vuex的简单理解在这篇文章中已经提过了
diaoyanbian8143·2020-07-27 21:02

个人VUE实战笔记

1.css初始化（引入别人写好的CSS）2.初始化css引入，在index//基于1.（点击延迟0.3S）3.默认显示（跟目录，根据个人）4.一个谷歌插件vue-devtoolshttps://blog.csdn.net/flysun3344/article/details/78679145安装浏览器插件5.个人封装的CSS，（1pxborder）6.通过路径判断tabclass状态7.抽离出He
Zidee·2020-07-27 11:05

教你使用Vue实战笔记本案例（效果图+贡献所有代码）

功能很简单，可以直接看图即可，代码放在下面，看前记得点个赞，养成好习惯哦，关注我也可以的哦，因为我时常会出很多Vue小项目哦，当然有问题你在底下评论说话呀Vue实战系列教你使用Vue实战轮播图案例（效果图
一颗剽悍的种子·2020-07-27 11:49

教你使用Vue实战轮播图案例（效果图+贡献所有代码）

功能很简单，可以直接看图即可，代码放在下面，看前记得点个赞，养成好习惯哦，关注我也可以的哦，因为我时常会出很多Vue小项目哦，当然有问题你在底下评论说话呀Vue实战系列教你使用Vue实战笔记本案例（效果图
一颗剽悍的种子·2020-07-27 11:49

(精华2020年5月14日更新) vue实战篇 vuex的使用和vuex辅助函数的使用

vuex的基本使用store.jsimportVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);//定义属性varstate={count:6,country:'中国'};//定义gettersvargetters={count(state){returnstate.count},isEvenOrOdd(state){returnstate.count
2b勿扰·2020-07-15 06:45

vue实战+echarts使用小结

南京三月之旅工作小结鑫探索http://info.andlinks.com（线上地址，可看）vue全家桶2.0带webpack全部可配置项的pc端项目接手项目一期是做理财产品洞察模块（包括发行态势和产品列表）鑫探索http://info.andlinks.com（线上地址，可看）vue全家桶2.0带webpack全部可配置项的pc端项目接手项目一期是做理财产品洞察模块（包括发行态势和产品列表）整个
智慧的狗狗·2020-07-14 21:00

vue实战(1)——解决element-ui中upload组件使用多个时无法绑定对应的元素

解决element-ui中upload组件使用多个时无法绑定对应的元素以前写的项目关于图片上传的都是单张或几张图片上传（主要是基于vue的element），图片路径都是固定写的，所以遇见过列表中多个上传图片的问题，先看下常用的形式正常操作element里面的属性都能满足，当列表中要上传时就不行了，看下实际需求如下部分代码列表中循环的行图片操作代码接收需要的其它参数首先列表中的数据都是动态获取的，所
wayne1125·2020-07-14 14:12

vue实战023:Vue-Quill-Editor自定义工具栏

自定义工具Vue-Quill-Editor自带的工具栏还算挺丰富的，但是可能还是无法满足我们的需求，这时我们就需要根据项目自定义功能些功能，比如说想CSDN中的文本编辑有个撤销和重做的的功能，这里我们也来尝试下功能拓展，给Vue-Quill-Editor添加撤销和重做工具。新增工具样式首先我们需要添加样式到工具栏中，这里我用最简单的JavaScript来实现，在custom中添加一个新的列表，定义
ProgramNotes·2020-07-14 13:57

vue实战025:配置TinyMCE富文本编辑器

目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用，有网友说TinyMCE更好用，所以今天来分享下Vue中使用
ProgramNotes·2020-07-14 01:39

vue实战022:Vue-Quill-Editor工具栏新增提示

今天来优化下Vue-Quill-Editor富文本编辑器，在编辑的工具栏中我们可以看到各式各样的图标，很多时候我们容易忘记图标对应的功能是什么，所以这里我们为其添加文字提示，当我将鼠标放到图标上时显示对应的功能提示，这样体验会好很多，下面是演示图。因为Vue-Quill-Editor是人家封装的组件，所以这里我们直接用JavaScript来处理，首先我们需要先获取到对应图标的类名，这里我们可以通过
ProgramNotes·2020-07-14 01:39

vue实战021:Vue-Quill-Editor富文本编辑器使用

博客站对多的就是文章了，要想写出好看的文章格式离不开功能强大的富文本编辑器，今天写一个富文本编辑页来完善博客中的文章编写功能，富文本有很多插件可以使用，这里我选择了vue-quill-editor，这是一款基于Quill、适用于Vue2的富文本编辑器。下载安装Vue-Quill-Editorvue-quill-editor插件安装，这个很简单直接在项目中打开cmd，运行命令：npminstallv
ProgramNotes·2020-07-14 01:39

vue实战026:TinyMCE重写图片上传功能

TinyMCE插入图片默认的是直接插入图片地址的，而通常我们希望能直接将图片上传至我们的服务器并返回图片的服务器地址，前面在vue实战024:Vue-Quill-Editor自定义图片上传中也提到了图片上传
ProgramNotes·2020-07-14 00:49

GitHub标星17K，超火的SpringBoot +Vue实战项目，文档视频贼全

项目摘要vhr是一个基于SpringBoot+Vue技术栈开发的前后端分离项目，项目使用SpringBoot2.1.8来开发，集成了当前企业级开发中众多的热门技术点，如消息中间件、Redis缓存、SpringBoot+Vue+ElementUI技术栈等等。技术选型核心框架：SpringBoot2.1.8安全管理：SpringSecurity持久层框架：MyBatis缓存：Redis数据库：MySQ
Java技术剑·2020-07-13 22:25

Vue的轮播图组件实现

今天在上慕课老师fishenal的vue实战课程的时候，有一个轮播图组件实现，在跟着做的时候，自己也踩了一些坑。此外，在原课程案例的基础上，我加入了不同方向的滑动功能。
红帽子小伙伴·2020-07-13 13:32

vue 项目中better-scroll的简单使用（学习总结，王红元vue实战开发）

1.模块导入我是在自己的一个项目中使用，封装了一个Scroll的组件，所以我在现有项目中导入模块：npminstallbetter-scroll--save2.创建实例注意：在创建实例的时候我们需要知道应该在什么地方创建，创建实例时我们要考虑到这个滚动模块应该什么时候调用，是在页面加载前，还是页面加载后，很明显我们使用滚动模块的时候最好在实例被挂载之后使用，因为实例被挂载前界面没有内容，滚动就显得
wantjobjob·2020-07-13 11:39

写Vue实战项目时遇到的问题

1、使用v-for循环的时候报错这是因为我们安装了ESLint插件，对vue进行了eslint检查，只需将这个规则检查屏蔽掉即可，具体操作如下：文件–》首选项–》设置–》在搜索框中输入：vetur.validation.template–》找到vetur.validation.template：true–》将vetur.validation.template：true在右栏框中进行重置为false
Little_Beauty_MX·2020-07-13 10:10

vue实战开发013:无缝轮播组件制作详解

今天继续下一个功能，那就是轮播图，在首页我们经常可以看到一个轮播展示区域，今天我们就来实现这个功能，这里我看了很多别人写轮播，基本都是用JavaScript或者别人封装好的组件来实现的轮播功能，因为vue没法像JavaScript那样通过offsetleft来获取当前元素的偏移位置，所以在写组件滑动的时候总是力不从心，最后还是用JavaScript写或者别人封装的组件来实现，其实vue还是可以实现
ProgramNotes·2020-07-13 06:10

不使用vue-cli搭建项目

配置开发时的前端工程（vue-loader+webpack）首先打开终端，我们先来用npminit来初始化项目E:\vue实战\vue_web>npminitThisutilitywillwalkyouthroughcreatingapackage.jsonfile.Itonlycoversthemostcommonitems
Tokki_·2020-07-13 01:27
上一页 2 3 4 5 6 7 8 9 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他