日常工作知识点集合之vue

1.vue移动端项目中遇到的问题 window.scrollTo(0, 0) //页面切换时强制滚动到顶端 //多个接口报错时,避免报错信息重叠 async fetchData() { this.isAllFetchError = false await Promise.all([ this.fetchPassenger(),//在这三个接口返回的对应的错误code码中设置isAllFetchError==true this.fetchTrend(), this.fetchWdPlazasInfo() ]) if (this.isAllFetchError) { alert('运行错误')//错误信息 } this.isAllFetchError = false },//多个接口数据为空时,错误信息只提示一次 vue移动端rem设置 data() { return { screenWidth: document.body.clientWidth, timer: false } }, created() { this.calRem() window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth this.screenWidth = window.screenWidth this.calRem() })() } }, watch: { screenWidth(val) { if (!this.timer) { this.screenWidth = val this.timer = true setTimeout(() => { this.calRem() this.timer = false }, 400) } } }, methods: { calRem() { const docEl = document.documentElement const rem = this.screenWidth / 3.75 docEl.style.fontSize = rem + 'px' }, } 2.axios的设置 axios的作用是什么呢:axios主要是用于向后台发起请求的,还有在请求中做更多可控功能。 特点:支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器支持防止CSRF(跨站请求伪造) axios中文文档 axios在vue中用法 3.export和export default以及export as 1、export与export default均可用于导出常量、函数、文件、模块等 2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用 3、在一个文件或模块中,export、import可以有多个,export default仅有一个 4、通过export方式导出,在导入时要加{ },export default则不需要 4.根据登录时的用户角色,显示相应的页面 main.js const getRouterName = function(allArray, obj) { if (obj.children && obj.children.length > 0) { for (let i = 0; i < obj.children.length; i++) { allArray.push(obj.children[i].name) getRouterName(allArray, obj.children[i]) } } else { return } } //定义一个全局方法,返回true则表示能进入该页面,false则把跳转路由的按钮置灰 Vue.prototype.$targetPathAuth = function(targetPath) { let userRouter = [] getRouterName(userRouter, store.getters.addRouters[0]) return userRouter.indexOf(targetPath) === -1 } 使用: 编辑 data(){ return { edit: false, } }, created() { this.edit = this.$targetPathAuth('EditAlgorithm') }, 5.在页面下钻及上钻时可能会改变多个vuex变量,可把多个commit动作合并成一个dispatch /** @format */ const actions = { drillUp({ commit }, payload) { commit('updateDefaultOrgName', payload.name) commit('upDrillPath') commit('updateLevelCode', payload.orgLevelCode) commit('updateTabShowStatus', true || payload.tabShowStatus) }, drillDown({ commit }, payload) { commit('downDrillPath', { name: payload.name, id: payload.id }) commit('updateDefaultOrgName', payload.defaultOrgName) commit('updateLevelCode', 'plaza') commit('updateTabShowStatus', payload.tabShowStatus) } } export default actions //用法 this.$store.dispatch('drillDown', { name: this.$store.state.defaultOrgName, id: this.$store.state.workingOrgCode, defaultOrgName: item.plazaName, singlePlazaSignal: true, tabShowStatus: false }) 6.vue项目git提交代码自动格式化 package.json中 "scripts": { "lint": "vue-cli-service lint", }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended", "@vue/prettier" ], "parserOptions": { "ecmaVersion": 2020 }, "rules": { "no-console": 0, "no-useless-escape": 0, "no-multiple-empty-lines": [ 2, { "max": 3 } ], "prettier/prettier": [ "error", { "singleQuote": true, "semi": false, "trailingComma": "none", "bracketSpacing": true, "jsxBracketSameLine": true, "insertPragma": true, "requirePragma": false } ] } }, "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,vue}": [ "prettier --write", "vue-cli-service lint --fix", "git add" ] } 7.mixin和provider/inject minin用法 provider/inject用法 8.异步神器async-await介绍 9.vue-router 中的导航钩子 10.keep-alive组件的使用及其实现原理 11.store的数据流流程 12.数据更新时怎么使用store 13.实现只想 router-view 里面某个组件被缓存? 参考:https://www.jianshu.com/p/0b0222954483 关键点:使用 router.meta 扩展 14.watch用法 watch用来监听在页面中捕捉不到的变化,如果能在页面方法及计算属性中拿到值,就不需要使用watch方法

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):