vue开发日记
约妲己吃火锅
已转互联网产品岗位,不做前端开发了。欢迎大家和我讨论产品问题 // 记录一个前端小白的IT崛起之路!大家一起学习,一起进步,我们一起成长!
展开
-
run `npm audit fix` to fix them, or `npm audit` for details
最近,将以前的项目代码重新运行时遇见了这个问题:执行npm install(或npm i)控制台出现如下提醒错误:added 253 packages from 162 contributors and audited 1117 packages in 42.157sfound 5 vulnerabilities (1 low, 4 high) run `npm audit fix` to fix them, or `npm audit` for details html大意为:运行’ n原创 2021-04-12 16:22:37 · 476 阅读 · 0 评论 -
纯css瀑布流布局示例详细讲解
这是我在做公司官网时候遇到的问题,UI设计图样式如下:问题分析:首先,看见这个UI设计图:它呈左右两列不规则分布,而且也能发现width宽度、heigth高度等都不相同。思路分析:毫无疑问,我们用简单的div布局+css做的话是可以达到这样的效果的,只是这样很low,不灵活,而且需要反复布局排版,代码量也不简单!此时,这个用瀑布流的话会简单不少!原理+实现:瀑布流:又称瀑布流式布局,是比较流行的一种网站页面布局方式,能够提升用户的体验感。它是多行等宽元素排列,等宽不等高或者宽高都不相同,后面原创 2021-03-01 13:15:55 · 1028 阅读 · 4 评论 -
vue中有哪些常用修饰符?
常用修饰符(1)trim:过滤首尾空格<input v-model.trim='name'>(2)number:自动转换为number类型<input v-model.number='name'>(3)lazy:值与数据进行同步在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:<!-- 在“change”时而非“input”时更新 -->&原创 2021-01-22 15:08:52 · 655 阅读 · 0 评论 -
You should not mix ‘v-for‘ with ‘v-if‘
编写下面的代码:<el-table-column v-for="(th, key) in tableHeader" v-if="!checkNotAnyAuth(th)" :key="key" :prop="th.prop" :label="th.label" :fixed="th.fixed" :min-width="th.minWidth" :width="th.width" align="center" element-loading-text="拼命加原创 2020-12-10 14:31:11 · 3417 阅读 · 2 评论 -
vue项目性能优化你了解多少?
最近,博主我也是很苦啊!现在新的开发任务下来了,忙着做产品需求分析,报告,跑业务,晚上加班陪领导酒局,每天累得跟狗一样。但是我就喜欢这一口,哈哈!!现在我的职业生涯开始真正的步入正轨,今后会不定时的更新文章,谢谢大家对我的支持!(膜拜)从前的我是一个最很菜的混子,连最基本的函数方法该怎么用都不明白,工作之后更惨,最怕每个星期的例会,每次会上最有可能挨批的就是我。好在我脸皮够厚,刚出社会遭到过很多的独打,在长途汽车站明明已经看到汽车站售票大厅了,硬是听信人家说不在这里买票,让黄牛多收几十块钱的服务费;原创 2020-10-14 15:16:57 · 242 阅读 · 0 评论 -
vue中axios插件使用
在一个网站项目开发中,前端需要和后端人员进行产品数据交互,你可以理解为:后端人员在项目中好比是飞机零部件加工方(用户是生产方),ui设计师提供成型的产品图纸,而前端人根据设计图纸用零部件组装成飞机!在项目中开发者们要进行信息交流与反馈信息。这里谈到的是前、后端数据交互。以vue项目为例:axios后台交互获取数据这块,我们通常使用的是axios插件库,它是基于promise的http库,可运行在浏览器端和node.js中。它有这些优点:例如拦截请求和响应、取消请求、转换json、客户端防御XSR原创 2020-10-09 16:28:12 · 782 阅读 · 0 评论 -
vue实现一个简单的分页功能
下面的内容我是在做一个关于婚纱项目中用到的,当时好久没用vue了,就上网区找了别人的博客来看,发现只有关于element_ui的,基本全是,对自己没用什么用,就自己写了一个,效果如下:点击相应的按钮切换到对应的内容内容:下面我只发核心代码,css样式就不发了,自己想怎么写怎么写 <!-- 分页内容 --> <ul class="blog-lists...原创 2019-12-06 17:42:38 · 988 阅读 · 0 评论 -
开发中前、后端数据如何交互?
下面是我在做婚纱项目时做的,希望对你有帮助这是后台给的接口,我们直接拿来用就行首先,安装axiosnpm i axios --save引用 import axios from 'axios'前端渲染数据 <ul class="blog-lists-box"> <li class="blog-list" :key="i...原创 2019-12-11 14:55:10 · 184 阅读 · 0 评论 -
vue路由插件vue-router使用教程
静态路由vue-router使用路由可以方便我们访问多个组件,后面也会使用到路由跳转中安装:npm install vue --save-devnpm install vue-router --save-dev引入模块router在App.vue里面加写入 <router-view></router-view>在命令提示行输入 “npm run ...原创 2019-11-29 09:49:45 · 439 阅读 · 0 评论 -
数据存储不一致怎么解决
之前写的分页如果想要实现,当没有连接后台服务器让分页内容显示自己写的内容,连接服务器之后显示服务器里面的给的内容。发现之前的分页功能就错了内容能够上来,但是还在浏览器页面里面,没有完全覆盖。这是存储不一致导致的。要解决这个问题,就要用到vuex 的store仓库的state、mutations 、getters属性。直接上菜话不多说,看看我怎么写的。html: <...原创 2019-12-16 12:09:32 · 682 阅读 · 1 评论 -
用vue做搜索功能(不需要后台服务器)
这是一个精确查找的搜索功能在components 中建一个hello.vue组件<template> <div> <el-col :span="4"> <el-input @focus="foucs" type="text" v-model="search" placeholder="请输入您现在所在的位置"/> ...原创 2019-12-24 16:21:10 · 748 阅读 · 0 评论 -
element-ui插件pagination分页中、英文语言切换
先看一下我遇到的问题,按照官网步骤使用分页,可是下面分页组件显示为英文,整个系统都是中文,出现英文按照开发要求是不允许存在这种主题不统一的问题:官网也给出解决方法:https://element.eleme.cn/#/zh-CN/component/i18nimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import locale from 'element-ui/lib/locale/l原创 2020-08-25 15:31:10 · 8062 阅读 · 3 评论 -
为什么v-for循环必须使用key值?
引自 木子星兮 : https://segmentfault.com/a/1190000013810844为什么需要 key?使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;如:const list = [ { id: 1, name: 'test转载 2020-08-21 17:23:44 · 1961 阅读 · 0 评论 -
简单axios请求封装
Params和Data的区别 GET请求的参数都是在URL上的服务器并不会读取http body里面的数据,这样我们传递的就是Params里的请求的参数了。如果想让服务器读取http body里面的数据那就需要用POST请求了,POST请求的参数就存放在body。get方法用params,post方法用data。// 封装axios primaryimport axios from 'a...原创 2019-12-17 10:38:53 · 366 阅读 · 0 评论