vue知识
文章平均质量分 56
吴迪98
喜欢敲代码的吴小迪~
展开
-
vue页面缓存失效问题解决
前端技术栈用的是vue,然后用keep-alive组件进行缓存页面【切换页面不进行刷新页面,保留之前的查询条件及状态等等】如果你不知道什么是正确的name的话可以在keep-alive那里把name显示的debug出来看。方案一:直接删除name的声明【一定是vue3.2.34+的版本才可以用这个方法】所以到这里基本上就排查到了问题应该就是组件的name错了所以导致缓存无效了。,如果是3.2.34+的版本就无需给组件声明name。方案二:将组件的name改成正确的。原创 2023-06-09 13:06:22 · 2153 阅读 · 0 评论 -
vue修改部分文件热更新失效
笔者最近遇到了vue修改文件热更新的失效的问题【并不是改所有的文件都失效,是改部分文件失效】每次更新完那个文件的代码之后页面并不会有反映,即使刷新页面也没有获取到刚刚更改的文件的最新效果。必须重启项目才可以看到最新的更新。最开始是以为有什么配置,比如某些文件的更改会触发热更新,某些文件的更改不会触发热更新。但是经过查看vite.config.ts文件并未发现有相关的配置,且hmr:true。然后笔者排查到此由于时间原因就放弃了【就每次更改完文件内容然后就重启一次服务,非常麻烦浪费精力】。最终在编译部署的时原创 2022-12-06 15:48:37 · 3465 阅读 · 4 评论 -
Vue一到三年面试题总结
笔者粉丝群里的朋友们多部分的人都在找vue的工作而没有再找react工作,所以我之前总结的html,css,js,react面试题还不行,还要继续拓展vue的。。于是我就把大家在出去面试的时候遇到的vue面试题以粉丝们投稿的方式收集了起来做个汇总,希望能帮助到更多的朋友们~Vue面试题正文:1.vue全家桶包含哪些?答案:vue全家桶与react全家桶介绍2.v-model是什么?怎么使...原创 2019-08-11 01:16:11 · 90030 阅读 · 47 评论 -
vue定义嵌套路由
在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?其实很简单,只需要我们在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。下面为示例代码:index.html,只有一个路由出口<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->...原创 2019-08-11 00:53:59 · 10827 阅读 · 2 评论 -
vue的v-if与v-show的区别
朋友都知道v-if可以操控dom元素的显示隐藏,v-show也可以,但是它们之间有什么区别呢?如果它们俩个是一样的根本没必要出俩个指令,所以今天我们就来看一下它们的区别:相同点:v-if与v-show都可以动态控制dom元素显示隐藏不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。我们可以看...原创 2019-08-11 00:45:28 · 7977 阅读 · 0 评论 -
vue数据双向绑定的实现原理以及步骤分析
这个是面试vue的时候经常会被问到的一个基础题。接下来我们一起看一下实现原理究竟是什么。vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。v-model的实现具体步骤共分为四步:第一步:需要observe的数据对象进行递归遍历,包括子属性...原创 2019-08-11 00:31:03 · 43245 阅读 · 8 评论 -
Vue的Keep-alive组件详细介绍
keep-alive组件的使用方法:keep-alive组件的注意事项:用了这个组件后就没有组件就没有created生命周期了。activaredvue可以使用keep-alive包裹一个动态路由组件,包裹之后,动态组件的状态会被缓存。如果使用动态组件渲染的某个组件使用了created生命周期请求数据,那么下次进入该组件不会再次请求数据。因为keep-alive之后,所有的动态组件都...原创 2019-08-03 11:54:16 · 36345 阅读 · 0 评论 -
搭建Vue项目的步骤以及所需插件配置
搭建Vue项目步骤一:安装vue二:安装vue-cli脚手架三:搭建项目四:安装所需插件包一:安装vue$npm install vue二:安装vue-cli脚手架$npm install -g @vue/cli三:搭建项目cli3版本搭建项目$vue create name 如果想使用2.x版本需要安装全局网桥$npm install -g @vue/cli-in...原创 2019-07-17 21:27:30 · 28523 阅读 · 0 评论 -
axios的使用
首先要在项目目录下使用如下命令下载axios$npm i axios -S而后在src目录下创建requests文件夹,里面用来存放你整个项目的ajax请求。此文件夹中首先创建一个index.js文件编写里面的内容://引入axiosimport axios from 'axios';//创建一个变量看当前环境是否是开发环境const isDev = process.env.N...原创 2019-06-10 23:14:46 · 46378 阅读 · 2 评论 -
Vue指令的详细介绍
今天给朋友们介绍Vue指令的用处:v-bind - - 可简写为 : 动态绑定属性值的时候使用v-on - - 可简写为 @ 添加事件监听的时候使用v-model &nbs...原创 2019-05-11 22:54:39 · 36625 阅读 · 0 评论 -
Vue的生命周期钩子函数介绍
Vue的生命周期钩子函数介绍vue生命周期共分为四个阶段一:实例创建二:DOM渲染三:数据更新四:销毁实例共有八个基本钩子函数1.beforeCreate --创建前触发的行为:vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在此阶段可以做的事情:加loading事件2.created --创建后触发的行为:vue实例的数据对象data...原创 2019-05-11 22:45:23 · 40827 阅读 · 1 评论