vue
喜欢读书的三金
浏览器 & 网络、前端工程化、性能优化、Nodejs、数据结构和算法
展开
-
你不能不知道的mock
mock功能-了解mock的作用及使用场景目标了解mock的作用及使用场景;mock使用场景mock:假的前端程序员提到的mock数据的含义是:真的假数据真的:符合接口规范要求的。假数据:数据是人为创建出来的,不是真正的业务数据。什么时候需要mock后端接口的开发速度跟不上前端的进度, 而前端要实现业务还必须依赖数据,前端为了保证开发进度就需要自己mock数据 ,保证业务能正常开发mock的实现方式本地启mock服务器:自己用express写接口本地用专门的mock服原创 2021-12-02 15:36:12 · 395 阅读 · 0 评论 -
vue3快速入门
1. Vue3的生态和优势社区生态 - 逐步完善整体优化 - 性能优化/TS支持优化/组合式API加持市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3社区生态组件(插件)名称官方地址简介ant-design-vuehttps://antdv.com/docs/vue/introduce-cn/ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步element-plushttps原创 2021-11-28 18:11:29 · 2224 阅读 · 3 评论 -
如何实现国际化(i18n)
目标实现elementUI中英文切换功能,感受中文切换的效果安装国际化的包npm i vue-i18n@8.22.2请注意版本号。vue-i18n现在有了一个新版本,对应的api有些不兼容,请还是使用8.22.2这个版本!ElementUI多语言配置创建src/lang/index.js内容如下:// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插件包import l原创 2021-11-20 11:57:27 · 1276 阅读 · 0 评论 -
Token失效处理
目标处理token失效的场景token作为用户的关键令牌信息不是长久有效的,一般都会有一个失效时间(由后端来决定什么时长后失效),如果超过失效时间,当前token就不能再作为用户标识请求数据了,这时候我们需要做一些额外的失效处理思路分析后端:收到用户访问某个接口时,检查当前token是否失效,如果token已经失效,返给前端一个约定好的状态码 10002前端:在响应拦截器中,分析接口的返回值,如果状态码为10002, 则进行token失效操作代码落地在**src/utils/reques原创 2021-11-18 19:52:23 · 2433 阅读 · 2 评论 -
token-处理-持久化
token-处理-持久化目标现在的token是保存在vuex中,而页面刷新之后,vuex的内容丢失了,将会导致接口访问异常。所以我们需要对token做持久化处理: 刷新页面之后token不丢失。思路在对token进行初始化的时候先从本地取一下,优先使用本地取到的值在设置token的时候除了在vuex中存一份,在本地也同步存一份在删除token的时候除了把vuex中的删除掉,把本地的也一并删除代码准备工具方法在**utils/auth.js中,基础模板已经为我们提供了获取token,设置原创 2021-11-18 19:51:49 · 1097 阅读 · 0 评论 -
在项目中如何处理token?
token-处理-整体分析背景在项目中,后端接口中只有登录接口是不需要token的,其他接口都需要token才能访问。分析登陆功能之后,从后端获取到了token值,在接下来的其他请求中,接口服务器都会去检查token值,这里我们提前把它保存到统一管理公共状态的 vuex中token-处理-将token保存到vuex中目标使用vuex来保存登录接口获取到的tokenvuex的基本使用流程使用vuex的基本逻辑:数据放在state中,要修改数据则调用mutations先在state中补充原创 2021-11-18 19:50:53 · 5454 阅读 · 0 评论 -
vue组件通信的10种方法
说起组件通信,可能大家耳熟能详的有以下5种:1. 父传子父组件通过自定义属性给子组件传值,子组件用props接收2. 子传父父组件在子组件标签上自定义事件,子组件通过$emit来触发自定义事件,并且可以传递参数3. 非父子组件传值eventBus事件总线:可通过eventBus进行信息的发布与订阅(创造一个都能访问到的事件总线)4. vuexvuex是专为vue.js应用程序开发的状态管理模式,它采用集中式存储管理程序的所有组件的状态,解决多组件通信。不过多用于中大型项目,小型项目用它会原创 2021-11-14 21:22:53 · 2051 阅读 · 0 评论 -
vue跳转路由时的传参方式(query和params的区别)
第一种方式:动态路由传参//路由配置文件中 配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail }//跳转时页面var id = 1;this.$router.push('/detail/' + id) //跳转后页面获取参数this.$route.params.id第二种方式:query传参//路由配置文件中{ path: '/detail', name原创 2021-11-12 21:24:27 · 968 阅读 · 0 评论 -
axios是什么?如何在项目中使用?
什么是 axios?Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。特性-从浏览器中创建 XMLHttpRequests-从 node.js 创建 http 请求-支持 Promise API-拦截请求和响应-转换请求数据和响应数据-取消请求-自动转换 JSON 数据-客户端支持防御 XSRF安装使用 npm:$ npm install axios使用 bower:$ bower install axios使用 cdn:原创 2021-11-12 21:21:52 · 1050 阅读 · 0 评论 -
vue中路由跳转有哪些方式?
vue中路由跳转有哪些方式?原创 2021-11-12 19:58:22 · 201 阅读 · 0 评论 -
vue面试题—为什么避免 v-if 和 v-for 用在一起(必会)
在v-if和v-for用在同一个元素上时,因为v-for要比v-if的优先级高,所以会先执行循环,再进行判断,这样无论条件判断的结果如何,循环都会执行。所以要避免她们用在一起,如果需要的话,可以在外层加一个template,v-if用在template上,这样就可以实现先判断再根据判断结果决定是否执行循环了。...原创 2021-11-06 22:25:11 · 658 阅读 · 0 评论 -
vue面试题—Vue 组件 data 为什么必须是函数(必会)
这样是为了避免组件之间的数据互相影响。同一个组件被多次复用会创建多个实例,如果data是一个对象的话,这些实例会共享同一个data,改变一个就会影响其他。为了保证组件的数据独立,将组件中的data写成一个函数,并且数据以函数返回值的形式定义,这样每次组件复用,都会返回一份新的data...原创 2021-11-06 21:35:43 · 95 阅读 · 0 评论 -
vue面试题—Vue 该如何实现组件缓存?(必会)
vue要想实现组件缓存,需要用到vue中的一个内置组件 keep-alive因为 keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们所以它主要用于保留组件状态或避免重新渲染原创 2021-11-06 18:57:40 · 411 阅读 · 0 评论 -
项目开发完成---打包优化
项目开发完成打包 :用webpack做打包(把.vue, .js, .less ------> .js, .css, .html)在项目中都会提供命令: npm run build打包优化:在保证功能可用的前提下,让我们的文件尽可能小在保证功能可用的前提下,让我们的页面显示出来的速度更快一些打包之后,会得到dist目录,如果希望可以双击打开index.html,则需要提前在vue.config.js中配置:vue.config.js中{ publicPath: '原创 2021-11-05 21:41:12 · 101 阅读 · 0 评论 -
如何把得到的数据填充到el-tree中,让某些复选框处于选中状态?
问题已经获取到了数据了,如何把它填充到el-tree中,让某些个复选框处于选中状态?解决方案在el-tree组件中通过setCheckedKeys方法 + node-key将数据 回显到el-tree组件中:处于选中状态实现步骤给tree补充属性node-key<!-- 权限点数据展示 --> <el-tree ref="refTree" :data="permissionData" :props="{ label: 'name'原创 2021-11-01 21:34:20 · 833 阅读 · 0 评论 -
vue 中父组件怎么将异步请求回来的数据传递给子组件
问题:vue项目中,如何将后台请求回来的数据,传递给子组件呢?思路此时肯定会想到v-bind自定义属性传值,子组件props来接收,但是很可惜,如果只是按照普通的父传子做法来做,最后的结果是子组件拿到数据的初始值,并没有拿到数据,然后报错 invalid prop原因原因很简单,还没有等到父组件赋值给它就已经把data里面这个自定义属性所绑定的初始值传过去了,就是下面代码中的article,没有等到后台数据赋值article就把data里的article(null)传过去了。代码实现父组件原创 2021-10-30 22:17:08 · 6872 阅读 · 4 评论 -
vue生命周期
created原创 2021-10-27 20:09:22 · 103 阅读 · 0 评论 -
vue中的ref的用法
vue中的ref的作用原创 2021-10-26 21:42:27 · 6681 阅读 · 0 评论 -
bug修复-添加数据-做添加-页面跳转不正确
目标添加完成之后,能立刻看到这条数据原因后端添加的数据在最后,而查询的页面不是最后一页解决添加完成之后,跳到最后一页去最后一页是满的,最后一页要+1补充计算属性computed: { // 表格中最大的页码 maxNum() { return Math.ceil(this.total / this.pageParams.pageSize) }, // 最后一页是不是满的 isLastPageFulled: function() {原创 2021-10-25 18:48:59 · 143 阅读 · 0 评论 -
bug修复-在编辑表单弹层中做编辑时表格中数据也跟着变
问题在表单中做编辑时,表格中数据也跟着变原因这里有一个引用关系: this.roleForm和row指向同一个对象,改了一个,另一个也受影响hEdit(row){ this.roleForm = row}示意图如下上面的这种写法俗称:浅拷贝(把地址赋值给地址)拷贝:就是赋值,让两个元素一样。让小王和你有一样的电动车浅拷贝:配了一把你电动车的钥匙给小王深拷贝:送一同款电动车给小王解决把浅拷贝改成深拷贝或者也可以用对象解构和扩展运算符结合使用来处理:this.r原创 2021-10-25 15:48:45 · 146 阅读 · 0 评论 -
bug修复-删除列表数据的分页异常处理
问题复现如果删除最后一页的最后一条数据之后,页面会显示不正常原因如果删除最后一页(假设是第4页)的最后一条数据之后,再发请求,还是求的第4页,而此时,后端已经求不到第4 页的数据了(被删除了)。思路在删除成功之后,去检测一下,是否当前删除的是当前页最后一条数据,如果是,就把页码-1,再发请求代码实现得出结论删除时固定要处理的逻辑:删最后一条时,要更新页码...原创 2021-10-25 15:30:16 · 331 阅读 · 0 评论 -
v-model和.sync的区别
v-model和.sync的区别原创 2021-10-23 21:21:49 · 453 阅读 · 0 评论 -
Element-ui的表格table翻页如何让序号延续递增
在使用element-ui 的table表格时,都会发现它每一页的序号都会从1开始,那怎么才能让它延续上一页的序号呢?研究 element-ui 文档发现table表格的列属性中有一个index属性:index属性写明了,如果设置了 type=index ,那么可以通过传递 index 属性来自定义索引:实现后效果 如图所示:...原创 2021-10-21 21:40:14 · 303 阅读 · 0 评论