配置
予倾
这个作者很懒,什么都没留下…
展开
-
数据可视化之svg
基本的SVG元素:<svg> 包裹并定义整个矢量图。<line> 创建一条直线<polyline> 创建折线<rect> 创建矩形<circle> 创建圆<ellipse> 创建圆和椭圆<polygon> 创建多边形<path> 通过指定点以及点和点之间的线来创建任意形状代码:<!DOCTYPE html><html lang="en"><head>原创 2022-01-04 13:53:35 · 587 阅读 · 0 评论 -
数据可视化之canvas(简单了解)
使用canvas绘制一个三角形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2022-01-03 17:09:06 · 1195 阅读 · 0 评论 -
深度选择器
1、scoped属性的作用加上之后只对当前样式生效,对于某一个组件,如果style添加上scoped属性,给当前子组件的结构中都添加上一个data-v-xxxx自定属性会发现vue是通过属性选择器,给需要添加的元素添加上样式 例如: h3[ data-v-7ba5bd90]2:子组件的跟标签(拥有父组件当中自定义属性:一样的),如果子组件的根节点,和父组件中书写的样式相同,也会添加上相应的样式。注意:如果父组件的样式(scoped),而且还想影响到子组件的样式?像这种情况我们可以使用深度选择器。原创 2022-01-03 09:21:32 · 275 阅读 · 0 评论 -
js 中编码(encode)和解码(decode)
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent相应3个解码函数:unescape,decodeURI,decodeURIComponent具体可参考:传送门原创 2021-12-31 10:53:48 · 7570 阅读 · 0 评论 -
动态路由的实现原理(权限)
src/router/index// 路由拦截 在url地址跳转之前执行router.beforeEach((to, from, next) => { // 动态生成路由数据 addData() next()})function addData() { getNavData().then(res => { if(res.code === 200) { // 获取数据,拼接数据 let data原创 2021-12-19 21:12:36 · 283 阅读 · 0 评论 -
vue打包上线相关配置
1、打包:npm run build项目打包后,代码都是经过压缩加密的,如果运行时报错,错误信息无法得知是哪里报错有了 map 文件就可以像未加密的代码一样,准确的输出哪一行那一列有错。一般情况下时不需要保留的在 vue.config.js 配置module.exports = { productionSourceMap: false,}2、购买云服务器Ⅰ、设置安全组让服务器的一些端口号打开Ⅱ、使用xshell登陆服务器linux指令:linux根目录:/linux常用原创 2021-12-19 20:10:57 · 2378 阅读 · 0 评论 -
vue自定义插件的简单使用
src/plugins/myPlugins// vue插件一定暴露一个对象let myPlugins = {}myPlugins.install = function(Vue, options) { // Vue.prototype、Vue.detective、Vue.component、Vue.filter Vue.directive(options.name, (element, params) => { element.innerHTML = params原创 2021-12-19 18:55:00 · 158 阅读 · 0 评论 -
vue统一接口api文件夹里的全部请求参数
src/main.jsimport Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false// 统一接口api里边的全部请求参数 --统一引入import * as API from '@/api'new Vue({ render: h => h(App), beforeCreate() { Vue.prototype.$API = API }}).$mount('#app原创 2021-12-19 10:40:08 · 700 阅读 · 0 评论 -
vue事件总线传值
原创 2021-11-08 19:49:48 · 520 阅读 · 0 评论 -
路由全局守卫的用法1(未登录点击个人中心,登陆后直接到个人中心)
src/router/index应用场景:当我去访问某些购物网站时,未登录情况下,点击我的个人中心等,首先让用户去登陆,在登陆的时候query传参到路由地址栏,在登陆后做判断直接去我的个人中心等 router.beforeEach((to, from, next) => { // to:获取到要跳转的路由信息 // from:获取到从哪个路由跳转过来的信息 // next:next() 放行 // 获取token原创 2021-12-19 10:23:14 · 311 阅读 · 0 评论 -
用js手写一个loading遮罩层
// 显示loading遮罩层export function loading() { var mask_bg = document.createElement('div') mask_bg.id = 'mask_bg' mask_bg.style.position = 'absolute' mask_bg.style.top = '0px' mask_bg.style.left = '0px' mask_bg.style.width = '100%'原创 2021-12-10 12:10:10 · 751 阅读 · 0 评论 -
vue引入mock模拟数据
首先安装mockjsnpm install mockjssrc/mock/index.js// 首先引入Mockconst Mock = require('mockjs');// 设置拦截ajax请求的相应时间Mock.setup({ timeout: '200-600'});let configArray = [];// 使用webpack的require.context()遍历所有mock文件const files = require.context('.', true,原创 2021-12-08 16:30:20 · 812 阅读 · 1 评论 -
nprogress进度条的使用
start:进度条开始done:进度条结束进度条效果如下图:进度条的颜色是可以修改的node_moudules文件夹下搜索nprogress,找到nprogress.css文件在src/api/request.js里使用原创 2021-12-07 12:52:07 · 523 阅读 · 0 评论 -
vue对axios的简单封装(内含详细解释)
src/api/request.js// 对axios进行二次封装import axios from 'axios'// 1: 利用axios对象的方法create,去创建一个axios实例const req = axios.create({ // 配置对象 baseURL: "/api", // 基础路径,发起请求的时候,路径中会出现/api timeout: 5000 // 代表请求超时的时间5s})// 请求拦截器:再发请求之前,请求拦截器可以检测到,可以再发出去之前做一些事原创 2021-12-06 21:52:11 · 497 阅读 · 0 评论 -
vue-router报NavigationDuped错误,以及重写$router.push与$router.replace方法
问题:编程式路由跳转到当前路由(参数不变),多次执行会抛出NavigationDuped的警告错误===>>>路由跳转有两种形式:声明式导航、编程式导航===>>>声明式导航是没有这种问题的,因为vue-router底层已经处理好了问题的产生原因“vue-router”: “^3.5.3”:最新的vue-router引入了promise解决方案1、通过给push或者replace方法传递相应的成功、失败的回调函数,可以捕捉到当前错误,即可解决this.$r原创 2021-12-06 13:01:02 · 812 阅读 · 0 评论 -
vue项目基础配置
vue在代码编译后自动打开浏览器:vue关闭自带的Eslint规范将src注册为@目录使用用法:import HelloWorld from '@/components/HelloWorld.vue'源码:{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }原创 2021-12-02 13:05:33 · 795 阅读 · 4 评论 -
PC端屏幕适配
在main.js里引入在vue.config.js中配置然后在所有文件中都可以直接使用px进行编码,直接就会进行适配了。无视缩放!!!原创 2021-07-01 15:30:07 · 1799 阅读 · 0 评论 -
Eslint规范
.eslintrc.js 文件module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue/recommended', 'eslint:recommended'], /.原创 2021-11-22 13:40:14 · 168 阅读 · 0 评论