Vue
文章平均质量分 84
Vue
ProgramNotes
这个作者很懒,什么都没留下…
展开
-
vue实战开发001:如何去除路径中的 #/
我们在采用vue-cli 自动构建的vue脚手架开发项目时,前后端分离一般会使用vue-router来配置路由,这时我们会发现在路径中会有#的字段,总感觉很别扭。http://localhost:8080/#/其实vue-router有两种模式,hash模式和history模式,带#的是hash模式,不带#的则是history模式,vue-router默认为hash模式...原创 2018-11-07 22:42:51 · 1094 阅读 · 0 评论 -
vue实战开发002:局域网中访问vue-cli项目
项目准备上线了,后期交给另一个团队负责,在部署服务器前人家要先了解下我们的项目情况,所以需要登录,由于是内网环境,所以对方可以直接访问我的电脑ip来访问我的本地项目,但是在开发时我们设置的是localhost也就是127.0.0.1访问本地项目,其他人想访问时无法访问的,这时我们就需要对vue进行下配置了。先找到自己的ip,运行中输出cmd,然后执行ipconfig/all就可以...原创 2018-11-26 16:20:36 · 1297 阅读 · 0 评论 -
vue实战开发003:详解vue-cli 3.0项目搭建
智能铣削项目终于告于段落了,接着准备承接下一个项目了,为迎合其他部门的开发环境这次我们准备用vue-cli 3.0环境开发,在安装vue之前我们需要安装node环境,这个我们只要在node官方下载node绿色免安装版,然后再配置下环境变量即可使用node和npm了。 将node所在目录配置到电脑的环境变量中就可以使用了,这里我的目录是D:\Program Files\node-...原创 2019-01-18 10:09:47 · 1994 阅读 · 0 评论 -
vue实战开发004:用vscode配置vue开发环境
前面我把vue项目搭建好了,接下来的事情就是对项目进行开发了,不过开发之前我们需要好的工具,这里我特别喜欢vscode这款软件,相当的好用,它支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性,而且拥有强大的插件扩展,可以满足开发者的各种需求,我非常喜欢VSCode的界面,相当的美观,而且很简洁,前面我用...原创 2019-01-18 10:12:47 · 6093 阅读 · 0 评论 -
vue实战开发005:解决Vue-cli3中的Eslint报错
今天用之前vue-cli3搭建的项目开始进行开发,发现每次启动服务时都会弹出编译错误,我就简单的写了两个页面,在layout.vue中引入了header.vue(里面基本没什么内容),然后根据提示去查看代码,怎么也没看出问题出现在哪里。虽然报错了,但是服务还是正常启动了,在浏览器上访问http://localhost:8080/可以查看到写的内容。 这里可以看到系统提示...原创 2019-01-23 13:54:11 · 5085 阅读 · 0 评论 -
vue实战开发006:制作input输入及下拉选择搜索框
今天做的是实现点击input框时弹出下拉选择菜单,点击下拉列表中要搜索将数据赋值给input框,然后再加个清楚按钮,当input框没有数据的时候隐藏,当有数据输入的时候就显示改功能,下面是功能演示。 首先我们先来设计input框加搜索按钮,这里我们直接用字体图标来实现, 我引用了bootstrap和element-ui的字体图标,所以直接在i标签中加入对应的图标样式...原创 2019-01-30 23:45:50 · 9030 阅读 · 0 评论 -
vue实战开发009:伪元素中如何引用字体图标
前面我们有说到如何使用Font Awesome字体图标: vue实战开发008:引入Font Awesome字体图标,在我们使用vue时通常不会把数据写死,而是定义一个数据列表,再通过遍历来获取相应的数据,这里我们模仿2345影视写了点内容,下面的版权声明我都是直接定义的数据列表再遍历展示的。 我们可以看到在上海市互联网违法和不良信息举报中心前面有个Window的图标(我...原创 2019-04-18 19:10:35 · 1420 阅读 · 0 评论 -
vue实战开发010:JS实现字体上下无缝滚动效果
今天要实现的是字体上下无缝滚动效果,在友情链接这块,2345提供了很多的链接并且通过定时的无缝滚动让内容显示在窗口中,这里我也来写下这个功能,当页面载入时链接自动往上无缝滚动,当鼠标停留时滚动停止。首先我们先来实现字幕滚动效果,一般情况下如果是多个单条数据翻滚,比较单间的方法就是用css来实现,通过animation和@keyframes配合就可以快速的实现滚动,但是但是这时会...原创 2019-04-19 11:32:30 · 1596 阅读 · 0 评论 -
vue实战开发007:vue引入Element-UI并配置路由
今天准备使用Element-UI来写个项目测试下学习的功能,要在vue中引用Element-UI组件,我们需要先来安装下Element-UI,这里我们用VScode工具编写,这里使用 npm 的方式安装,在终端执行命令:npm i element-ui -S接着我们在vue中来引入Element-UI,在vue项目中的main.js中引入element-ui功能,我们只要在文件中添加如下...原创 2019-04-11 15:12:01 · 1866 阅读 · 0 评论 -
vue实战开发011:使用router-view嵌套路由详解
前面已经把首页的顶部header和底部的footer页面写完,现在开始写内容区域了,在写内容之前我们先要将路由配置好,不然无法在页面上查看效果,所以这里我在components目录下先建了一个home.vue文件,里面简单的写了一句“我是主页中的内容,通过路由router-view嵌套进来的”,然后加了个样式方便查看。这里简单的说下,我们在main.js中引入vue-router组件把 ...原创 2019-04-20 08:13:27 · 4118 阅读 · 0 评论 -
vue实战开发008:引入Font Awesome字体图标
今天在引用图标的时候发现Element-UI中的字体图标非常有限,我数了下当前只有70个可用字体图标,很难找到合适的字体图标使用,所以这里我准备引入Font Awesome字体图标,当前4.7版收录了675个字体图标可用,足够我们平时使用了。首先我们先来安装Font Awesome字体,在Font Awesome 4版本中,可以通过使用npm安装font-awesome依赖,我们要在终端...原创 2019-04-16 18:39:38 · 1056 阅读 · 0 评论 -
vue实战开发013:无缝轮播组件制作详解
今天继续下一个功能,那就是轮播图,在首页我们经常可以看到一个轮播展示区域,今天我们就来实现这个功能,这里我看了很多别人写轮播,基本都是用JavaScript或者别人封装好的组件来实现的轮播功能,因为vue没法像JavaScript那样通过offsetleft来获取当前元素的偏移位置,所以在写组件滑动的时候总是力不从心,最后还是用JavaScript写或者别人封装的组件来实现,其实vue还是...原创 2019-04-22 07:51:39 · 1169 阅读 · 1 评论 -
vue实战开发012:点击“回顶部”按钮滚动回顶部
昨天发现index写漏了一个功能,为了给用户更好的体验一般网站右边都会提供一个返回顶部的按钮,正常页面载入时不显示该按钮,当我们往下移动网页时这个按钮就显示出来了,点击这个按钮我们就可以快速的滚回到顶部位置(这里是滚动回去,2345中的是直接跳回顶部的,不怎么友好,而且返回按钮一加载网页就有了,都没动何来的返回,这里明显不合逻辑),我适当的改动了下,下面是功能演示。首先我们还是来写HTM...原创 2019-04-20 14:10:21 · 924 阅读 · 0 评论 -
vue实战开发014:状态管理模式Vuex使用详解
这两天写了几个通用的组件,因为我发现在当前的网页中有很多相似的地方,为了更加快速有效的开发,我把这些通用的类型进行组件形式打包,然后当我在使用的时候直接调用这些组件即可,但是这里发现个问题,那就是因为模组比较大,组件里面还嵌套了其他的组件,比如下面这图,当前是一个组件,里面嵌套了轮播组件和视频预览的组件,要实现这个嵌套还是很简单的,只要在对应的组件中引用我们需要的组件即可,这里的问题是数...原创 2019-05-01 19:05:33 · 293 阅读 · 0 评论 -
vue实战开发016:引入iconfont图标库图标
前面我在Vue中引用了Font Awesome字体图标,Font Awesome目前收入了675个图标(这些是可缩放的矢量图标,可以通过CSS样式来改变图标的大小、颜色、阴影或者其它任何支持的效果),相对element来说还算挺多的,今天我们再来使用一个图库更全的方案,那就是阿里提供的iconfont图标库,这个是目前国内最为强大的矢量图标库中心,里面含有非常丰富的矢量图标库提供下载。我...原创 2019-05-13 14:34:34 · 1379 阅读 · 0 评论 -
vue实战开发015:响应式布局中的hover事件
在设计响应式布局时,我们经常会根据屏幕的大小来调整样式已适应不同窗口大小的所带来的不同视觉效果,比如说我们常见的导航栏设计,当我们在点击对应的标题时让其背景色切换成深绿色,这样在视觉上更用户能第一眼就能知道自己正点击在哪个选项上了,而在样式上,通常我们会在PC端时显示到顶部位置,而换到移动端时则显示到左边来,如下图所示:处理当前的点击样式 ,最简单的方法就是直接使用:hover事件...原创 2019-05-11 08:12:13 · 1097 阅读 · 1 评论 -
vue实战开发018:使用axios发送请求
花了点时间把登录页面写好了,接下来准备和后台进行交互,尝试一下登录页面的数据交互,这里vue我使用axios来发送请求 ,后台通过Django搭建服务来接受数据。Django项目我已经搭建好了,创建了一个基本的数据和路由视图,现在我们需要在vue项目中添加axios组件。安装axios到项目中,使用命令:npm install axios --save 将axios安装到项目中...原创 2019-05-15 09:12:24 · 651 阅读 · 0 评论 -
vue实战开发017:一个简单的进度条模拟安全检测
今天做一个简单的检测进度条模拟,我们在很多平台都可以看到安全进度检测的进度条,实际是对我们的安全设置进行检查,当我们将对应的信息补全之后,就相当于完成了一项任务,其安全系数就会提升,这里我先整个最简单的进度条,下面是演示结果。首先我们来定义HTML,这里我们主要有进度条背景,进度条,分值和检测按钮,这个前台比较简单,当然也可以哪来用,这样的话后台要操作的就比较多了,计算和检测的活都...原创 2019-05-14 11:31:41 · 667 阅读 · 0 评论 -
vue实战021:Vue-Quill-Editor富文本编辑器使用
博客站对多的就是文章了,要想写出好看的文章格式离不开功能强大的富文本编辑器,今天写一个富文本编辑页来完善博客中的文章编写功能,富文本有很多插件可以使用,这里我选择了vue-quill-editor,这是一款基于Quill、适用于Vue2的富文本编辑器。下载安装Vue-Quill-Editorvue-quill-editor插件安装,这个很简单直接在项目中打开cmd,运行命令:npm i...原创 2019-06-18 09:08:04 · 4151 阅读 · 0 评论 -
vue实战开发019:Echarts修改各种标签的字体大小
Vue中设计图表有个很强大的插件,那就是Echarts,这是一款强大的可视化图表制作工具,用纯 Javascript 打造的图表库,提供了丰富多彩的图表样式,使用Echarts我们可以快速的实现数据可视化操作,而且这些图标逼格都很高,特别的专业。 为了找到合适的模板,通常我们会在Echarts实例中找到一些合适的图标然后在线修改下参数看看是否能满足项目需求,如果合适的话我们就可以...原创 2019-06-22 13:30:58 · 8512 阅读 · 1 评论 -
vue实战022:Vue-Quill-Editor工具栏新增提示
今天来优化下Vue-Quill-Editor富文本编辑器,在编辑的工具栏中我们可以看到各式各样的图标,很多时候我们容易忘记图标对应的功能是什么,所以这里我们为其添加文字提示,当我将鼠标放到图标上时显示对应的功能提示,这样体验会好很多,下面是演示图。因为Vue-Quill-Editor是人家封装的组件,所以这里我们直接用JavaScript来处理,首先我们需要先获取到对应图标的类名,这里我们...原创 2019-06-24 11:03:13 · 2949 阅读 · 3 评论 -
vue实战023:Vue-Quill-Editor自定义工具栏
自定义工具Vue-Quill-Editor自带的工具栏还算挺丰富的,但是可能还是无法满足我们的需求,这时我们就需要根据项目自定义功能些功能,比如说想CSDN中的文本编辑有个撤销和重做的的功能,这里我们也来尝试下功能拓展,给Vue-Quill-Editor添加撤销和重做工具。新增工具样式首先我们需要添加样式到工具栏中,这里我用最简单的JavaScript来实现,在custom中...原创 2019-06-26 14:50:19 · 4967 阅读 · 3 评论 -
vue实战开发020:LocalStorage与SessionStorage的区别与用法
目录什么是LocalStorage什么是SessionStorageLocalStorage与SessionStorage的区别LocalStorage与SessionStorage的特点LocalStorage与SessionStorage的用法LocalStorage与SessionStorage应用实例前面把后台的验证机制梳理了一下,主要是Cookie、Sessi...原创 2019-06-12 08:03:24 · 3079 阅读 · 0 评论 -
vue实战024:Vue-Quill-Editor自定义图片上传
目录样式重写事件重定义前台文件发送后台接受文件并处理前台接受返回数据vue-quill-editor是个较为轻量级富文本,但是在使用vue-quill-editor我们会发现,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,而且也不方便我们处理。所以这里需要来重新定义图片上传功能,当我们选择图片...原创 2019-06-27 19:02:47 · 7732 阅读 · 0 评论 -
vue实战025:配置TinyMCE富文本编辑器
目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用,有网友说TinyMCE更好用,所以今天来分享下Vue中使用TinyMCE,TinyMCE也是一个轻量级的可视化在线 HTML 编辑器,由JavaScript写成,基本功能齐全而且配置灵活简单,容易上手,加载速度非常快,我新增了...原创 2019-06-29 14:09:02 · 4268 阅读 · 1 评论 -
vue实战026:TinyMCE重写图片上传功能
TinyMCE插入图片默认的是直接插入图片地址的,而通常我们希望能直接将图片上传至我们的服务器并返回图片的服务器地址,前面在vue实战024:Vue-Quill-Editor自定义图片上传中也提到了图片上传,原理是一样的。当我们选择图片后将图片上传服务器,服务器返回相应的图片链接,前端将图片链接插入到富文本的指定光标上位置,在提交富文本的内容的时候图片只是以图片地址提交。TinyMCE提...原创 2019-07-01 08:01:41 · 8528 阅读 · 5 评论 -
vue实战027:子组件和父组件之间传值
最近接了个新项目,更新可能会慢点了。。。今天继续Vue实战开发系列现在开始写文章列表展示功能,这里我把筛选这块进行了子组件封装,所以在进行搜索时我们需要从父级获取到文章的相关信息,如更新年月,文章类型及个人分类等等信息,当点击搜索时将搜索到的结果返回给父级列表展示,下面我模拟了些数据进行操作。什么是组件 在vue中, 可以根据项目需求将大部分相同操作的模块定义成...原创 2019-07-04 07:49:29 · 845 阅读 · 0 评论 -
Vue实战028:功能完善的分页组件实现详解
分页在网站中用的比较频繁,现在很多人都喜欢使用第三方组件来快速实现功能,却忽略了其实现原理。这几天抽时间写了个分页组件,功能比较完善,主要包含以下功能:1,总页数和数据条数2,可调整显示页码的个数3,上下和首尾页切换4,可调整每页显示数据的个数5,输入指定页面跳转(包括键盘事件(Enter键直接跳转)),限制数据最大不得超过显示页数。6,当前页为首个或者最后一个时禁止首尾页...原创 2019-07-09 07:53:38 · 773 阅读 · 0 评论 -
Vue实战029:功能完善的响应式导航设计详解
最近接受的新案子bug有点多,天天在忙着修改bug,导致更新有点慢了。。。抽空写了个响应式的导航,个人觉得功能比较完善,有兴趣的可以一起探讨本导航主要实现了以下功能:1.自适应浏览器窗口大小,支持pc、pad、phone等设备web浏览2.导航栏顶部与侧边自动切换,768以下屏幕自动显示侧边导航,以上则显示顶部导航3.本导航支持主菜单+子菜单4.搜索样式切换,可以点击搜索展开/...原创 2019-07-10 23:54:06 · 2355 阅读 · 2 评论 -
Vue实战031:保持用户登录状态(各种token存储方式)
在前端中,实现保持用户登录状态的方法有很多种,你通过可以存Cookie、Session、Token等信息来保持,不管后台向前端发送哪个我们要做的就是将这些信息存在在本地浏览器中,浏览器再次发送请求时,将设置了‘键’=‘值’的Cookie再次抛给服务器,服务器通过Cookie的字段判断用户已经登录,则根据需求处理用户请求,否则返回400提示用户先登录,前面我也分享了相关的文章:Django实战006...原创 2019-07-20 08:27:36 · 45781 阅读 · 8 评论 -
Vue实战032:axios使用get和post发送各种请求
在前端中,提交数据的方式有很多种,如GET、POST、PUT、PATCH、DELETE、COPY、HEAD、OPTIONS、LINK、UNLINK、PURGE、LOCK、UNLOCK、PROPFIND、VIEW等请求方法,比较常用的有GET、POST、PUT、DELETE,今天主要分享下axios如何使用get和post发送请求。什么是GET和POST请求GET:向指定路径资源发送请求...原创 2019-07-28 13:06:16 · 3727 阅读 · 1 评论 -
Vue实战030:子组件与父组件之间方法调用
前面我分享了vue实战027:子组件和父组件之间传值,今天继续分享子组件与父组件之间方法调用,在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现,他们就是$root、$parent、$refs、$children属性,其中$root、$parent是子组件向父组件调用方法,而$refs、$children则是父组件向子组件调用方法。$root与$pare...原创 2019-07-11 09:46:09 · 542 阅读 · 0 评论