Vue
文章平均质量分 73
记录Vue的学习历程,以及一些实战的经验!
游坦之
凡物之骤为之而追成焉者,其器小也;物之一览而易尽者,其中无有也。
展开
-
一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来
如/brand/*下的路径都来访问aServlet,再根据后缀路径找到不同的方法,如/brand/getOperaID,根据getOperaID,去找查询戏剧Id的方法,/brand/updateMusicID,根据updateMusicID去找修改音乐ID的方法。当然要产生不同的效果,就需要使用不同的Sql语句,切记,使用update和insert的时候,一定切记要提交一下,否则不会保存在数据库里面的。最后反馈的时候,还要转化成JSON格式,这样前端的页面,才能拿到正确的数值。原创 2022-11-04 19:54:29 · 5067 阅读 · 68 评论 -
Vue复刻华为官网(三)
如上图,这整个的大盒子,又可以被分为上中下三个小盒子,上、下盒子都被分为左右两个小盒子。这部分的难点主要体现在搜索栏上,特别是搜索栏聚焦的时候,会有一个阴影的效果,失去聚焦之后阴影效果会消失。如下这部分可以使用两个鼠标事件搞定,@focus (组件获取焦点的时候触发)、@blur (组件失去焦点的时候触发)。当事件被触发的时候,操作Dom,更改组件的样式,从而达到想要的效果。另外一个难点就是下盒子右侧图标,在悬浮的时候会更改颜色,如下。这部分我直接是写了两个svg,通过一个字段的T/F,来控制这两个显隐原创 2022-10-30 07:46:27 · 7359 阅读 · 98 评论 -
Vue复刻华为官网 (二)
看了这个gif后,可以清楚的看到产生了三个动画效果:图片"拉近","了解更多"从下往上显示出来,阴影。我看了华为官网的源代码,发现图片本身就是有一个mask的,这样能让图片看起来暗一些,也就意味着,当鼠标进入的时候,只需要让mask的背景颜色更深一些,就实现了阴影的效果。至于图片"拉近",我早就写过了,无非是把图片放大,然后超出盒子的不显示,这个也容易。但了解更多显现,难度就大了一些。我想了很久,最后只有通过位置,来把"了解更多"显示出来,想过用visibility: visible;但效果不太好,也想过用原创 2022-10-25 19:09:54 · 13813 阅读 · 124 评论 -
Vue复刻华为官网 (一)
根据华为网页的布局,我们大体上可以将其划分为7个盒子,如下,由于写一个这样的网页再加上部分动态效果,需要的时间很长,本篇博客只记录了div1、div2、div3的静态效果+轮播图的实现。想要实现的正是最上部那个黑色的圆框我的思路很简单,用四个盒子,其中最大的盒子也就是整个黑色框,大盒子里面包裹着小盒子,每个小盒子对应一个字段(集团网站、选择区域/语言、登录),排版布局,则需要三个小盒子,依次向左浮动(float:left;)。或者大盒子单独采用display:flex;布局我看了一下华为公司的代码,他是用的原创 2022-10-21 10:29:54 · 9817 阅读 · 74 评论 -
【Vue】悬浮窗和聚焦登录组件经验总结
本文整理了实现悬浮窗以及聚焦登录组件的功能。 为的是方便大家和自己的学习。 省流:可以只看1.2 和 2的代码即可现在各大流行视频网站的平台都在使用这种悬浮显示的效果,我就想这种东西是怎样搞出来的呢!几经尝试,终于找到了一个实现方式,记录一下自己的开发历程,方便以后的使用,也为了各C友提供便利。尝试用display实现,利用display:none和block的切换,来实现悬浮窗的显示/关闭。把方法加在div1(悬浮窗)、div2(带图片背景的组件)共同的父组件div上,这样可以实现悬浮窗的效果但原创 2022-10-12 11:36:18 · 7316 阅读 · 114 评论 -
【Vue】Axios详解
浅显易懂,亲身体验,保证可以即使如新手也可以正确的使用Axios原创 2022-10-08 12:04:20 · 11514 阅读 · 120 评论 -
【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制
在开发的前期,我清晰的记得使用动画完成了图片放大的效果,当时还写了一篇博文上了热榜。可是过了几天之后,这个效果居然“失效了”,我百思不得其解。一度怀疑自己的代码写的有问题,在CSDN等各大博客平台上查找了很久也没找到解决方案。在偶然的尝试下,我发现是scoped影响了动画的效果。真是欲哭无泪,打死我都想不到是scoped的原因。从学习vue的时候就习惯性的在style后面加上scoped,为的是不影响其他组件。曾几何时,我一度以为scoped有百利而无一害。原创 2022-10-06 11:02:04 · 1453 阅读 · 61 评论 -
【Vue】图片拉近、全屏背景实战经验总结
写这一篇博客,我发现这个图片功能太简单了。我自己用vue做的时候,用的是@mouseover @mouseout 需要两个方法让其有1s动画效果的时候,我用的是根据类名获取元素,然后鼠标悬浮的时候给他加上动画的效果。但是动画的效果默认是不会保存的,间隔一秒后又会回到初始化的状态,所以又加了一句animation-fill-mode:forwards,让其保持动画的状态。写这篇博客之后,原来只需要几行代码就解决了!原创 2022-09-27 21:30:23 · 3213 阅读 · 99 评论 -
Vue实现日期选择器
本以为这是一个很简单的功能,几分钟就搞定。没想到,还是很麻烦的!记录一下开发过程。这里就涉及到了设计模式的一些知识,如果使用静态的代码,几乎1000行,这样大学生10W的代码岂不是很容易完成?但如果采用动态的方式,估计至少要减少一半无用的代码,还没改掉。继续前进!使用了Element-ui的Select 选择器,不过似乎有些鸡肋,感觉用下拉框就可以解决了,而且饿了么ui的选择器感觉也不是很好看。原创 2022-09-22 13:50:52 · 4358 阅读 · 53 评论 -
Vue开发历程---音乐播放器的继续
前面一篇文章Vue开发历程—音乐播放器,实现了播放音乐,以及基本的布局。但是进度条没有实现同步,本文即介绍进度条的实现。2、JS的编写进度条的状态是实时的,也就是每一秒每一刻都要变化,如何实现这一功能?首先需要写一个方法,每30ms更新一次状态,同时在组件挂载完成的时候调用这个方法,从而实现了每30ms,即更新进度条的数值。通过refs可以获得audio这个标签,这个标签上有duration(时长),currentTime(当前时间)这两个属性,通过这两个属性,可以计算出来进度的占比。同时也需要原创 2022-07-31 21:29:29 · 398 阅读 · 0 评论 -
Vue开发历程---音乐播放器
浅浅记录一下自己开发音乐播放器的历程,巩固自己的所学。同时也是深感基础不牢,地动山摇。代码如下:MusicPlayer.vueHideMusic.vueMyPlayer.vue四、难点解析1、过渡动画的实现参考了vue文档过渡&动画中多个组件的过渡(下面三份代码)。vue文档因此分化出MusicPlayer.vue 和 HideMusic.vue,由此又产生了组件内通信的问题。为什么会产生组件内的通信?原因在于:MusicPlayer组件和HidePlayer组件,只能有一个展示,但原创 2022-07-27 08:43:06 · 1306 阅读 · 1 评论 -
【Vue】从零搭建一个Vue项目
一、项目创建1、打开命令行窗口Cd /d进入想要创建项目的位置,输入vue create 项目名2、选择Vue23、运行该项目4、创建成功在浏览器中输入以上网址:localhost:8080,来到一下界面,说明成功二、路由的配置1、安装路由(vue2 只能安装3版本的vue-router)看一下这个文件有vue-router代表安装成功2、配置路由(1、创建router文件夹(2、创建index.js,配置路由重定向的解释:当...原创 2022-05-14 15:00:08 · 6383 阅读 · 27 评论 -
【Vue】Vue项目的创建以及饿了么UI的使用
不装了,我摊牌了(bushi)原创 2022-05-06 18:49:43 · 2980 阅读 · 0 评论 -
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
存储的四个方法1、存储 localStorage.setItem(key, value);key和value都必须是字符串。例如:存储数据【效果图】【问】如果要传一个对象该怎么办?如果直接将对象作为value放进去,会出现这样的现象用JSON(JSON.stringify() )转换一下,将对象先转化成字符串,如下然后就可以将对象,存进去了2、读取localStorage.setItem(key)例如:读取存储的数据【效果图】...原创 2022-04-30 15:04:00 · 13244 阅读 · 3 评论 -
【Vue】Vuex详解
【前言】本博客系统的讲诉了Vuex的安装、搭建。以及Actions、Mutations、State、Getters的使用,为什么使用mapState、mapGetters以及一些细节的解释Vuex原理讲解Actions:词义是 动作行为Mutations:词义是加工、维护State:词义是 状态和数据Dispatch:词义是派遣、发出Commit:提交Render: 渲染Mutate:转变从这些单词中,大体上可以概括整个图的流程。VC派发(Dispatch)消息.原创 2022-04-24 17:38:28 · 8271 阅读 · 6 评论 -
《Vue学习》路由参数
陆陆续续的学习,学了忘,忘了学,真不知道何时才算是终点,何时才能有点成就!query的两种写法<!-- 第一种、跳槽路由并携带query参数,to的字符串写法 --><router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> <!-- 第二种、跳转路由并携带query参数,原创 2022-03-23 21:24:55 · 469 阅读 · 0 评论 -
《Vue学习》尚硅谷Vue Todo_List案例集锦
整理了尚硅谷Vue中todolists案例的代码,希望能够便于大家的学习添加(不知道为什么一直有这个错误。勾选)(删除)原创 2022-03-06 17:17:10 · 3204 阅读 · 8 评论 -
《Vue学习》scoped样式的使用
为什么使用scoped样式呢?原因是因为最后所有的样式都会混合在一起,如果class起名不小心一样的话,就会造成一些样式被覆盖。(看import的顺序,后来者居上)//放在Student上的<style> .demo{ background: red; }</style>//放在School上<style> .demo{ background: orange; }</style>原创 2022-03-02 21:15:20 · 329 阅读 · 0 评论 -
《Vue学习》mixin
为什么要用mixin,以及注意事项原创 2022-03-01 21:11:09 · 136 阅读 · 0 评论 -
《Vue学习》props
props的引入呢,就是提高组件的复用,举个实际的例子,你写了一个帽子组件,你给他的属性是红色,50cmsize,但是隔壁老王,想要一顶绿色,60cmsize的帽子,为了不让他重新再写一个帽子组件。props属性就发挥了很大的作用。下面是一个Student组件,可以用来复用的,name sex age都是不确定的,谁使用整个组件谁就需要传参<template> <div> <h2>学生名字:{{name}}</h2>原创 2022-03-01 20:26:13 · 260 阅读 · 0 评论 -
《Vue学习》ref
ref放在系统的标签,如butoon,h1这种,可以获得dom元素,放在自定义的组件上则获得的是Vc。利用Ref获得<template> <div> <h1 v-text="msg" ref="title"></h1> <button @click="showDom" ref="btn">点我输出上方的Dom元素</button> <School ref="sch.原创 2022-03-01 19:43:41 · 212 阅读 · 0 评论 -
《Vue学习》render函数
import Vue from 'vue'这句默认引用的Vue是残缺版的Vue,没有模板解析器。不支持使用template语法。使用template模板会报错。解决方法:1、是引入完整版的Vue2、是用render函数为什么用到残缺版的Vue?模板解析器占了Vue的三分之一,webpack时模板解析器还在,但是模板解析器没有用了,从残缺版Vue可以精简一些代码。...原创 2022-03-01 14:51:27 · 125 阅读 · 0 评论 -
《Vue2学习》脚手架分析
脚手架的一点总结,以及Component name "Student" should always be multi-word vue/multi-问题的解决方法原创 2022-03-01 14:30:59 · 222 阅读 · 0 评论 -
Vue学习(数据绑定、el和data的两种表示方式)
数据绑定:v-bind,v-model<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>数据绑定</title> <script type="text/javascript" src="./vue.js"></script> </head> <body> <div id="roo..原创 2022-01-16 10:24:32 · 519 阅读 · 0 评论