![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue项目
一染星辰
不求甚解,唯有敬亭山!!!加油!
展开
-
vue移动端 文章页面跳转到详情页
效果目标:1. 在文章列表用 @click .native 绑定事件,并且带上参数的id2.在methods 的方法里使用 this.$router.push() 的方法进行去跳转 //跳转到详情页面 itemClickFn(id){ // console.log(1234) this.$router.push({ path:`/ArivleDetail?art_id=${id}` }) }注:.原创 2022-04-15 16:54:11 · 1334 阅读 · 0 评论 -
vue项目 图片403 和404问题
问题:图片403 和404 问题问题分析 和解决:原创 2022-04-15 15:07:45 · 548 阅读 · 0 评论 -
vue 移动端 搜索记录—本地存储 (偶尔面试会问到)
目标效果:使用的原理有: JSON.parse()以及JSON.Stringify() 本地存储 localStroage js EVentLoop 循环机制的影响1. 将搜索关键 保存到history 的关键字数组里,分别将搜索事件和点击事件保存里边即可!!!2. 使用watch 深度监听, 用JSON.stringify的转字符的方法保存到本地3.在 data 里将history 的数组里进行JSON.pase ...原创 2022-04-14 16:46:00 · 1160 阅读 · 0 评论 -
vue 移动端项目 如何实现 搜索页面的--关键字--高亮?
效果目标:1. 在methods 的方法里,我专门用一个方法lightFn 处理字符串高亮的问题,设置originStr 代表原来的字符串,target 关键字,用字符串的方法 replace()替换,返回值为替换后的字符串代码://专门处理字符串高亮关键字问题 lightFn(originStr,target){ //originStr 代表原来的字符串 //target 关键字 //字符串有一个方法 replace //例如:"好同志,都是招募来原创 2022-04-13 21:40:47 · 883 阅读 · 0 评论 -
vue 移动端 搜索页面---联想菜单铺设
实现效果:1. 在api 里进行请求数据//搜索联想菜单--列表接口export const suggestListAPI = ({ keywords }) => axios({ url: "/v1_0/suggestion", method: "GET", params: { q: keywords, }, });2. 在搜索界面----引入api 的方法import {suggestListAPI}from '@/ap原创 2022-04-13 20:57:07 · 965 阅读 · 0 评论 -
vue移动端 利用防抖的原理 ---实现搜索页面防抖操作
效果目标:搜索页面防抖操作防抖:原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。 适用场景: 按钮提交场景:防止多次提交按钮,只执行最后提交的一次 搜索框联想场景:防止联想发送请求,只发送最后一次输入 此次应用于搜索框防抖操作:1. 在 搜索组件 ---输入框绑定一个事件2.在data 里设置一个防抖的定时器,timer:null3....原创 2022-04-13 20:11:35 · 1620 阅读 · 0 评论 -
vue 移动端 利用vue 自定义指令实现搜索页面的输入框的自动聚焦 Vue.use
目标效果:利用vue 自定义指令实现搜索页面的输入框的自动聚焦使用自定义指令的原因:vue默认内置了v-model、v-if、v-show、v-html、v-text等指令,但是这些往往不足以满足我们实际项目开发中的场景,比如权限控制按钮、路由菜单,复制文字等功能,就需要我们自己自定义一些满足我们项目需求的指令了,那怎么封装自定义指令,并使用呢?我们先从封装指令的基础说起。钩子函数bind:只调用一次,指令第一次绑定到元素时调用。可以进行一次性初始化设置。 inserted:被..原创 2022-04-13 19:32:53 · 1186 阅读 · 0 评论 -
vue 项目 利用v-model 双向绑定的原理 实现频道和相应的频道内容实现内容一一对应的关系
效果目标:v-model 原理:v-model 本质上就是语法糖, 实际上,它就做了两个动作,一个是绑定数据的value值,等于一个变量一个是利用 $event.target.value的方法触发它的input 框思路: 在用户的点击频道---> 关闭弹出层 ---->this.$emit 触发---> v-model 双向数据绑定1.在用户的点击频道 -- > 关闭弹出层--->用this.$emit 的方法绑定一个与之前一一对应的cl..原创 2022-04-13 15:06:14 · 531 阅读 · 0 评论 -
vue 移动端 导航上关闭弹出层的实现,并且利用ref 的原理实现内部的状态回归false
效果图:ref 的原理:ref除了可以获取本页面的dom元素,还可以拿到子组件中的data和去调用子组件中的方法 思路: 在导航栏上的X icon 图标上,去绑定一个事件!!!在methods 方法里通过子传父的方法this.$emit 的方法,绑定事件,在父组件里绑定事件;还有绑定一个ref 的绑定,在methods 的方法里完成即可!!!1.在导航栏上的icon 图标上绑定事件2.在methods的方法里 使用this.$emit 的方法绑定一个自定义事件...原创 2022-04-12 20:14:52 · 346 阅读 · 0 评论 -
vue 移动端 频道管理—删除频道
效果图:思路: 通过在我的频道进行绑定点击事件,并且传值obj, 在methods的方法里,对绑定的事件先对频道里进行判断,判断是否在编辑状态,在编辑的状态下1. 在我的频道 绑定点击事件,并且传值obj2. 通过子传父的方法,去传值3.在父组件里进行接收4.在api里请求删除方法,并传值5.方法://删除频道的方法async removeChannelFn(channelObj){ //删除一个元素,我需要一个下标,但我...原创 2022-04-12 10:11:55 · 547 阅读 · 0 评论 -
vue 移动端项目 利用浅拷贝的原理 实现频道的更新
效果图:点击下边更多的频道可以进入我的频道浅拷贝的原理:浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用(地址)浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原对象属性值的一份精准拷贝,如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。async addChannelFn(channelObj){this.userChannelList.push(channe...原创 2022-04-11 21:35:19 · 405 阅读 · 0 评论 -
前端vue项目pc端echarts的简单实现(步骤)
1步骤2,在 main.js引入3.根据官网教程去复制粘贴4.官网上的简单实现静态效果图5.可以根据官网的文档去改,要想实现动态,需要把图放置methods方法里,接入接口即可!!!上面的数据是用filter过滤器来进行实现的!!!...原创 2022-04-11 16:22:03 · 568 阅读 · 0 评论 -
vue 移动端项目(频道管理-新增频道)
目标效果:思路:编辑频道后->点击更多频道进行新增1. 更多的频道-->绑定点击事件,传递频道对象下去,下去之后要做一个判断(只有编辑状态下才行)2.子->父,把频道对象传递给home/index.vue->父push到用户已选的频道数组内;在更多频道列表添加事件在methods 的方法里,//更多频道的点击事件 --> 处于编辑状态下,用子传父的方法去传参//更多频道的点击事件moreFn(channelObj){//...原创 2022-04-08 16:31:37 · 524 阅读 · 0 评论 -
vue 项目 移动端 ( 频道管理—编辑状态切换)
效果目标: 点击编辑会转换成完成界面,并且出现x图标在data 里 编辑频道上的编辑状态data(){ return{ isEdit:false //编辑频道上的编辑状态 (x隐蔽) }在徽标这一块 进行v-show 的绑定在编辑这块绑定一个事件在methods里个方法methods:{ //编辑->点击事件 editFn(){this.isEdit=!this.isEdit }}给点击进入或者删除频...原创 2022-04-08 11:52:17 · 244 阅读 · 0 评论 -
vue 移动端 (频道管理-计算属性compted)使用数组fiter 去重的方法
场景: 由于所有用户频道过多,而我的频道列表里不需要那么多,并且还有很多重复的这时候我需要用去重的方法;注释***userChannelList: [], //用户选择频道索引ID为0,页面刚打开是频道高亮-对应文章数据)allChanneList: [], // 所有频道的列表 ***在computed 计算属性 里进行去重 computed:{ //定义一个变量 unCheckChannwlList(){ //目标:把所有的频道数组挨个对象取出原创 2022-04-08 09:34:03 · 309 阅读 · 0 评论 -
client?a57c:172 [WDS] Disconnected 错误解决
***解决办法:***打开chorm浏览器点击右键检查—>找到Application—>点开Stroage下的localstorage:将下述句子 复制在key上loglevel:webpack-dev-server将下述句子 复制在value上SILENT最后刷新浏览器即可!!具体图下:...原创 2022-04-07 22:05:54 · 1142 阅读 · 0 评论 -
?. 可选链操作符
. 可选链操作符,如果前面对象里没有length,整个表达式原地返回unndefined //如果getToken()原地有值 token 字符串, 才能调用length获取长度// 添加请求拦截器axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 //目标: 统一携带token //判断本地有token 再携带,判断具体api / index.js 里如果没有携带Authoriz..原创 2022-04-07 16:26:25 · 1251 阅读 · 0 评论 -
vue 项目 axios 响应拦截器 统一判断401 (登录)过期
背景:为了模拟token 过期,专门把token 设置错误,为401 界面把axios 官网里的 复制到拦截器里放置到request.js 里在响应器里进行判断4**, 5** 状态码错误以下为代码//引入axios///基于axios 封装网络请求import theAxios from "axios";import router from '@/router'import { Notify } from "vant";const ...原创 2022-04-07 11:52:05 · 3910 阅读 · 1 评论 -
vue 移动端 反馈面板二级实现
效果图:思路:在api 里进行封装方法:在使用的文件里进行引入利用子传父的原理,在子组件内进行传参在父组件进行绑定一个事件在methods 里进行原创 2022-04-07 08:11:30 · 182 阅读 · 0 评论 -
vue 项目如何实现切换主题
需求:用户通过取色器选择自己喜欢的颜色,替换项目中的主题色实现效果:实现思路:在项目中使用的是less,使用@themeColor定义了主题色,便想着尝试用js修改less的变量即可,但查询了一下只知道有less.modifyVars方法可以修改,但没有详细的说明,顺便查到了可以修改js可以修改原生css的变量,而且简单易懂,便尝试使用css来定义主题色并设置修改。首先在App.vue中设置主题色:<style lang="less">#app { --...原创 2022-04-06 11:20:28 · 4255 阅读 · 4 评论 -
vue 移动端项目 (反馈面板 不感兴趣功能实现)
实现效果及要求:点击不感兴趣能够提示是否成功通过if 判断全等于“不感兴趣”的时候,让其里边的方法 利用子传父的方法,在AeitivleItem.vue 里通过this.$emit的方式传参,并且传id在父组件用于接收子组件 传值在api 里请求数据在Ariticlelist.vue 引入api 的方法在methods里进行请求数据 //顶部刷新事件方法 async onRefresh() { // 目标: list 数组 清...原创 2022-04-03 23:33:38 · 293 阅读 · 0 评论 -
vue 项目报错401 xhr.js?b50d:210 POST http://toutiao.itheima.net/v1_0/article/dislikes 401 (Unau
项目报错401 一般都是身份过期了,重新登录即可!!!原创 2022-04-03 23:03:18 · 1940 阅读 · 2 评论 -
vue移动端项目 (二级反馈数据出现,取消按钮换成‘返回‘)
效果及目标:把二级目标如何换成返回底部按钮的实现,需要动态绑定,以及绑定事件在data 里把bottimText 上赋予字符串的文字 为"取消"在methods 的方法里触发按钮的点击事件 //底部按钮的点击事件 cancelFn(){ if(this.bottomText==='返回'){ this.show=true //强制让他回来 this.actions=firstActions this..原创 2022-04-03 19:50:56 · 491 阅读 · 0 评论 -
vue 移动端 项目 (点击反馈面板可以进入二级面板)
实现效果:点击反馈面板可以进入二级面板为了方便数据的管理,在api 的文件夹里创建report.js 为二级面板的数据export const firstActions=[{name:'不感兴趣'},{name:'反馈垃圾内容'}]export const secondActions=[{ value:0, name:'其他问题'},{ value:1, name:'标题夸张'},{ value:2, name:'低俗色情'},{原创 2022-04-03 23:13:27 · 704 阅读 · 0 评论 -
vue 移动端项目 一级反馈面板标签准备(实现简单功能)
实现效果:点击 文章上的叉叉就会出现反馈面板在 vant 组件当中找到 反馈组件中 的动作画板,在main.js里引入即可!!在 AriticleItem.vue 的组件,即文章的页面, 当中去导入我们需要使用的组件<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />在反馈组件中,绑定点击事件在data 里边进行存放数据 data(){retu..原创 2022-04-03 16:52:19 · 2082 阅读 · 0 评论 -
vue 移动端项目 底部没有更多数据加载 报错400
vue 移动端项目 底部没有更多数据加载 报错400原创 2022-04-03 11:34:09 · 600 阅读 · 0 评论 -
vue 移动端 项目 重复key 的问题vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ‘7989‘. This m
报错: 检测到重复的秘钥;秘钥重复的话,首先,我们看一下网络netword,我们会发现,刚打开页面,它会重复请求两次,并且时间戳还是一样的问题: 网页刚打开,created里请求和onload里请求同时发送,请求都是最新的数据onload中,2次一样的数据合并,数据重复,key重复了原因:van-list组件 ,挂载时,默认就会判定一次是否触底//第一页数据也是网络请求回来的,标签先挂载了,数据回来更新DOM,所以标签没有高度,list的onLoad 上来就触发;.原创 2022-04-03 11:07:24 · 1594 阅读 · 0 评论 -
vue 移动端项目 文章列表如何实现更多个list
效果图:功能实现:从vant 组件中找到list 列表,然后引入即可!!基础的列表放置到使用的页面当中 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> </van-list>在data 里边存放底部加载和完成得状态loading:false,//底部加载状态finished:false//底部完成的状原创 2022-04-02 22:01:09 · 751 阅读 · 0 评论 -
vue 移动端项目 如何实现tab切换与内容一一对应呢
效果图目标:从vant-ui组件当中可以找到tab切换与之对应的 name 属性可以通过名称匹配于是, 我们可以通过动态绑定的name 绑定它的idq去vant-ui 上查看文档,我们发现 change 适合我们想要的方向, 可以激活标签并且改变时进行 触发,于是我们就在tab 栏上用change 去绑定事件起初,总觉得这样就已经完成了,后来,才渐渐发现,我们需要发送二次请求数据才可以根据你的tab 标签切换不同的内容以及效果; 究竟怎么做呢!于是,我就...原创 2022-04-02 17:54:14 · 1182 阅读 · 0 评论 -
vue 移动端 项目 封装day.js 日期(代码及效果图)
效果图:在untils文件夹下封装 date.js 文件进行封装//封装专门处理时间的方法import dayjs from "dayjs";import relativeTime from "dayjs/plugin/relativeTime"; // import plugin//到指定时间需要插件import 'dayjs/locale/zh' // import locale//集成中文/** * 。。。多久之前* @parm{*} 之间的时间 * @retur原创 2022-04-02 17:02:00 · 598 阅读 · 0 评论 -
vue-移动端适配-postcss-pxtorem
安装lib-flexiblenpm i lib-flexible --save在main.js引入lib-flexibleimport 'lib-flexible/flexible'安装postcss-pxtoremnpm install postcss-pxtorem -D配置postcss-pxtorem 在根目录的.postcssrc.js文件中修改 此文件自动生成,若没有,手动添加module.exports = { "plugins": {原创 2022-03-31 19:30:14 · 649 阅读 · 0 评论 -
vue 项目 上传以及下载excel 图表(内容)
目录1.until文件夹里的request.js , axios 响应拦截2.api文件夹里的excel.js3.mock文件里的index.js 接口4.mock文件里的excel.js 接口5.components 文件下的layout 里的home 页面6.components 文件下的layout 里的home 页面7.components 文件下的layout 里的LeftMenu页面8.views的文件里 创建的components 里的...原创 2022-03-31 08:34:43 · 532 阅读 · 0 评论 -
vue 项目 上传以及下载excel 图表(思路)
简单的 页面效果图:要求可以 上传以及可以 下载excel 图表(本文章为思路) 导入导出思路:1.在 components 下创建文件夹并创建文件home.vue;在路由文件里配置文件,且将此页面作为重定向即可!!2.在 views 下创建文件 download-excel.vue下载文件 和 upload-excel.vue 上传文件,在路由文件里配置路由,使用懒加载进行引入即可!!3.在首页里,给一个父级div,单个子集div,分别class 命名: 父级...原创 2022-03-30 21:55:53 · 1364 阅读 · 0 评论