![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
雾横
前端菜鸟
展开
-
图片展示实现高度、宽度自适应
图片展示如何实现高度、宽度自适应?加入浏览器自适应功能后,浏览器宽度改变后,图片由于高度或者宽度固定,图片要么过宽、要么过高,样式很难看,想起max-height 和 max-width 这两个样式后,都好解决啦。图片使用如下样式.regulation-img { max-width: 90%; max-height: 140px; width: auto; height: auto}效果如下哪怕图片大小不一样也能实现布局的统一了。...原创 2022-04-04 14:32:23 · 2375 阅读 · 1 评论 -
vue项目引入字体文件
vue项目引入字体文件在自己的idea中选好字体,打包上线发现字体效果没有显示出来。于是查了vue引入字体文件的方法,记录记录。1.下载字体文件,并放到项目文件中2.创建font.css文件,写入如下代码//font.css文件代码@font-face { /*给字体命名*/ font-family: 'buer'; /*引入字体文件*/ src: url('./buer.ttf'); font-weight: normal; font-styl转载 2022-03-29 01:32:50 · 2911 阅读 · 2 评论 -
在Vue项目中,用axios的get请求携带对象参数给后端发送请求会报400错误
在Vue项目中,用axios的get请求携带对象参数给后端发送请求会报400错误原因:axios的post请求默认数据格式是json,所以服务器可以正确解析。但是get请求的默认格式是字符串,所以会报错400.项目中的post和put请求都能够直接携带对象参数并被服务器正确解析。所以猜测put应该数据格式默认也是json.解决方法:1.安装Qs插件命令参考链接: https://www.cnblogs.com/dudu123/p/10284503.html.2.后端改成post携带对象参数原创 2022-03-05 18:23:07 · 2305 阅读 · 0 评论 -
Vuex中删除state的某个属性
Vuex中删除state的某个属性1.mutations中写好删除对应属性的方法//store/index.js文件中mutations:{ //删除user属性 deleteUser(state) { delete state.user }}2.组件中调用//app.vue文件中//退出登录 logout() { this.$store.commit('deleteUser') }...原创 2022-02-27 18:36:59 · 1192 阅读 · 0 评论 -
vue 项目提交form格式数据的表单
vue 项目提交form格式数据的表单一、先将数据处理let formData = new FormData();for(let key in this.telForm){ formData.append(key,this.telForm[key]);}二、数据上传//采用封装的post方法上传this.postRequest('web/login/mobile',formData).then(res=>{ console.log(res)})//或者采用普通的axios原创 2022-02-26 16:46:27 · 5672 阅读 · 0 评论 -
Vue项目中让元素垂直居中比较好用的方法
Vue项目中让元素垂直居中比较好用的方法直接将下面的样式写在需要用的元素上.upLoad-btn { position: relative; top: 50%; /*偏移*/ transform: translateY(50%); text-align: center;}原创 2022-02-24 16:30:23 · 6626 阅读 · 0 评论 -
Vue项目的手机号表单验证
Vue项目的手机号表单验证一、根据Vue官方文档写表单验证功能二、检验规则写法export default { data(){ //验证手机号的正则表达式 let reg=/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/ //验证方法 let validatorPhone = function (phone, value, callb原创 2022-02-24 13:17:36 · 3954 阅读 · 0 评论 -
vue中的css样式:文字超过一行的部分用省略号表示
vue中的css样式:文字超过一行的部分用省略号表示display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;//超过行数overflow: hidden;word-break: break-all;原创 2022-02-19 21:47:44 · 1017 阅读 · 0 评论 -
Vue中video.js的使用和:src绑定失效问题解决
Vue中video.js的使用和问题解决一、安装npm install --save-dev video.js// 或者使用淘宝镜像cnpm install --save-dev video.js二、在main.js中引入import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video三、使用<video id="videoPlay" Controls="tru原创 2022-02-17 17:43:22 · 1046 阅读 · 0 评论 -
ElementUI Card组件触发点击事件
遇到的问题:在做卡片点击改变样式时发现el-card组件点击方法没有触发到。解决方式:@click = method(x,y)替换成@click.native = method(x,y)参考链接: https://blog.csdn.net/weixin_43937526/article/details/120410660.原创 2021-12-20 22:07:45 · 8710 阅读 · 0 评论 -
实现多选按钮选择状态的动态实现
实现多选按钮选择状态的动态实现思路首先要明确两个数组:totalList[]是所有多选按钮选项集合,selectedList[]是已选择的多选按钮选项集合。要做的就是,在遍历渲染的同时,通过判断totalList[]数组中是否有selectedList[]的元素,有就显示为选中状态。关键代码// 多选按钮的状态框<view class=""> <checkbox :value="subItem.id" :checked="deliveryGroup.eld原创 2021-09-06 21:53:46 · 492 阅读 · 0 评论 -
element表单重置要点一个不能少
element表单重置要点一个不能少每次表单重置都没效果,后来查了资料,发现一直少了规则绑定element 的 Form 组件提供了表单验证的功能,需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名。有两点需要注意:1.必须有对应的 ref,且名字一致,表明重置哪个表单。2.prop 设置的字段名要和 v-model 绑定的字段名一致,否则重置表单或进行自定义校验规则时不会生效。仅使用重置功能时具体校验规则不必写,但要重置的字段一定得有原创 2021-04-11 15:38:10 · 515 阅读 · 0 评论 -
表格置顶,表头隐藏,数组中添加对象
表格选定行置顶//给使用按钮添加方法,方法如下use(row) { let values = this.tableData;//这个是表格数据 let value = row; let res = [value].concat(values.filter(item => item != value));//concat() 方法用于连接两个或多个数组 console.log(res); this.tableData = res;}表头隐藏 :show-header="false原创 2021-04-08 20:45:55 · 121 阅读 · 0 评论 -
路由跳转遇到:Redirected when going from “/?redirect=%2FRegister“ to “/Register“ via a navigation guard.
路由跳转遇到:Redirected when going from “/?redirect=%2FRegister” to “/Register” via a navigation guard.、在登录页面添加了个注册按钮,想实现跳转到注册页面的功能,但是老是报错Redirected when going from “/?redirect=%2FRegister” to “/Register” via a navigation guard.百度了一下,有说是版本太高的问题,有说别的,后来发现,其实是自己写原创 2021-04-07 01:35:39 · 15737 阅读 · 0 评论 -
vue设置图片背景
vue设置图片背景在style标签中写入下面的代码.login{ background:url("../assets/blueback.jpg"); /*background-color: pink;*/ width: 100%; height: 100%; position:fixed; margin-top: -0px;/*上边距*/ margin-left: -0px;/*左边距*/ background-size:100% 100%;}template的最外原创 2021-04-06 15:11:26 · 436 阅读 · 0 评论 -
基于idea实现vuecli4的屏幕自适应
基于idea实现vuecli4的屏幕自适应1.安装amfe-flexible模块amfe-flexible:是rem的适配插件。由于直接用npm安装老是出错,于是我用了淘宝镜像安装1.1淘宝镜像打开idea终端Terminal输入下面的代码进行安装npm install -g cnpm --registry=https://registry.npm.taobao.org安装完后使用 cnpm i xxx 代替 npm install xxx就可以了1.2安装模块一、安装模块cnpm i原创 2021-03-27 12:34:03 · 238 阅读 · 0 评论 -
记一次小小的路由实现
实现一个路由没想到隔了一段时间一个小小的路由我都搞了这么久,赶紧记录下来,下回直接看这里复习1.创建一个跳转过去的页面2.在路由统一管理处添加一个路由3.在APP页添加一个路由占位符4.把路由挂载到实例对象中我就是忘记这一步卡了好久,感觉自己是个傻逼5.结束,直接运行就出来啦...原创 2021-03-10 21:11:18 · 51 阅读 · 0 评论 -
将本地代码上传到云端gitee码云
将本地代码上传到云端gitee码云1.在idea中再打开一个终端2.切换到该终端,输入git status,查看当前版本库的状态出现上图情况说明有数据更新,有新的数据包需要下载3.输入git add .将安装包保存在本地暂存区4.输入git commit -m "完成了登录功能",将安装包在本地提交,并编辑提示信息5.通过git branch可以看到此时是处在login这个分支下的,我们需要将login分支整合到master分支中(1)通过git checkout master切换原创 2020-11-28 11:56:18 · 845 阅读 · 2 评论 -
是否登录页面验证
前端实现是否登录页面验证1.将原来直接曝露路由改为将路由封装为一个对象//原来export default new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home } ]})//修改过的const router = new Router({ routes: [原创 2020-11-27 01:01:29 · 208 阅读 · 0 评论 -
Vue项目初始化
Vue项目初始化一、安装Vue脚手架二、通过Vue脚手架创建项目1.ctrl+r打开cmd,输入vue ui,回车,浏览器会弹出UI的视图界面,借助视图界面创建Vue项目2.点击创建按钮进入创建页面3.选择好你的项目路径,然后点击 在此创建新项目4.填入项目名称,打开git初始化按钮,填入init project(不知道啥子意思,回头查查能不能改别的),然后点击下一步5.前两个是自己建的预设,第三个是默认预设,这里选择第五个,手动配置项目,然后点击下一步6.选择你需要的插件,点开原创 2020-11-26 21:55:27 · 3017 阅读 · 0 评论 -
babel认识、安装、使用
babel认识、安装、使用一. 认识babel作为一种语言,javascript在不断发展,各种新标准和提案层出不穷,但是浏览器的多样性导致有可能几年之内都无法广泛普及,而babel可以让你提前使用这些语言特性,它是一种多用途的javascript编译器,它把最新版本的javascript编译成当下可以执行的版本。二. 安装、使用参考https://blog.csdn.net/qq_41638795/article/details/95060140三.小经验在npm中安装babel遇到npm E转载 2020-11-12 17:05:00 · 164 阅读 · 0 评论 -
axios安装与使用
axios安装与使用1.进入:官网下载压缩包2.找到压缩包中的dist目录下的axios.js或者axios.min.js,解压到需要使用它们的的项目路径中3.使用通过script引包然后直接使用里面的api//网页代码部分(axios.js)<body> <!--引入axios的包--> <script src="js/axios.js"></script> <script> axi原创 2020-11-07 11:51:10 · 1221 阅读 · 0 评论 -
vuetools安装
vuetools安装一、安装步骤1.下载压缩包Vue.js+Devtools_5.3.3_chrome.cn.crx(一定是crx结尾),直接解压到你想要的目标文件链接:百度云连接(bj16)2.打开Chrome浏览器的 设置 =》点击拓展程序3.进入如下界面,可以看到我们已经安装的插件,这是我们需要打开右上角的开发者模式4.点击加载已解压的拓展程序 =》选择目标文件 =》点击选择文件夹第一步:第二步第三步5.这时在Chrome中可以看到以下图标。6.刷新后右上角出现vue的拓原创 2020-11-01 22:33:14 · 6999 阅读 · 5 评论