予你@。-CSDN博客

1 使用json-server创建一个假的rest api服务1 安装 npm install -g json-server 2 创建一个json文件3 启动服务 json-server --watch db.json2 axios 的特点1 Make XMLHttpRequests from the browser 在浏览器端发送Ajax请求2 Make http requests from node.js 在node.js中发送http请求3 Supports the Promise

2022-05-05 17:17:17 739 2

原创 Vue中的v-for指令为什么要结合key使用

也是常见的面试题：react、vue中的key有什么作用？（key的内部原理）1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成【新的虚拟DOM，随后后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：2.对比规则：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：...

2022-05-02 22:15:12 203

原创 Echarts图表饼图常见的效果

1 显示数值效果series 下的label 饼图的文字显示2 半径圆环 radius3 南丁格尔图 roseType: 'radius' 数值越大半径越大4 选中效果 selectedMode注意点:1 不需要设置 x轴和y轴2 饼图的所需要的数据是个数组数组里面放对象对象则必须包含name和value，<!DOCTYPE html><html lang="en"><head> <meta cha..

2022-04-28 15:54:43 1254

原创 Echart图表折线图的常见效果

1 标记相关的效果：最大值，最小值，平均值，标注区间markPoint 标记点标记最大值最小值markLine 标记线markArea标记区域2 线条的效果:平滑/默认线条的样式smooth 线条类型lineStyle 线条样式3 填充的效果areaStyle注意: 1 标记点type: 'average' 不是准确的平均值而是接近平均值的 y轴数据现有的值2markArea 中的data为数组数组里存放二维数组二维数组存放两个对象一...

2022-04-28 15:04:42 2080

原创 JavaScript数组的静态方法

1 数组的静态方法Es5 ：Array.isArrayEs6 : Array.form Array.of // Es5 判断一个基本类型是否是数组类型不能用来检测引用类型 let arr = []; let state = Array.isArray(arr) // state: trueArray.form // Es6 Array.form(arrayLike,[callback]) // 作用是把一个伪数组转换为...

2022-04-21 10:19:55 1382

原创使用Echarts报错:this.dom.getContext is not a function；

echarts 报错 this.dom.getContext is not a function;原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，document.getElementById('id')；这里我结合vue使用所以用的是$refs ，我印象中使用$refs是可以的，但是当我打印两个对象查看时差异性就可以显现出来，一个是原生的dom对象，另一个却是Vue组件实例对象代码部分: <div class="

2022-04-20 14:30:19 10075 2

原创 uni-app 兄弟组件如何传值(uni.$on 和 uni.$emit)

这里使用的是 uni.$on 和 uni.$emit 个人理解类似于vue中的全局事件总线test 组件<template> <view class="myTest"> <view>标题：test组件</view> <button type="primary" size="mini" @click="addNum()">修改组件2 的数据</button> </view></templ

2022-04-19 15:27:06 4325

原创 Vue2 动态路由的使用

1 什么是动态路由:工作中经常用到的情况就是，在导航菜单中,如果没有登录，我们则只展示一部分信息，如果登录，再将其余的信息展示，这就是动态路由，此时我们不需要在手动配置路由，后端将路由数据返回，我们拿到数据，进行匹配。2 效果图:登录前：登录后： 3 完整代码部分：(1)这里直接在根组件测试 app.vue 文件<template> <div id="app"> <div class="nav"> &l

2022-04-18 10:20:59 9419

原创 Vue2 项目配置@指向src路径

这样配置的好处:1 简写路径避免使用相对路径时层次混乱导致书写错误2 方便移动文件1找到项目的 vue.config.js 文件2 这里的配置const { defineConfig } = require('@vue/cli-service')const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = defineCon

2022-04-15 14:18:31 4243 1

原创 vue项目 element UI 版本升级过程遇到的问题及解决办法

最近发现项目的element ui 版本是2.5而最新的版本已经是2.15所以想要更新一下element ui的版本查阅资料升级element ui直接在终端运行首先卸载旧版本： npm uninstall element-ui安装最新版本: npm install element-ui -S全局引入 element ui：参见element ui官方网站：Element - The world's most popular Vue UI frameworkimport E.

2022-03-30 11:22:28 6733 1

原创 Vue3 自定义hook函数

什么是hook？把setup函数中使用的组合式 Api进行封装本质是一个函数类似于Vue2中的mixin优势：复用代码让setup中的逻辑更清晰案例：点击页面实现获取坐标的功能，并且有多个组件需要这个功能：新建一个hooks文件夹存放函数函数编写如下 usePoint.js ，实现点击页面打印坐标组件卸载后事件监听也要解绑import {reactive,onMounted,onBeforeUnmount} from 'vue'export default...

2022-03-29 15:54:41 1193

原创 Vue3 计算属性

在vue2中的计算属性，写法是配置项在vue3中变成了组合式api，写法是一个函数，其余写法基本一致，如果计算出来的属性只读，可以写完简写形式，如何需要修改则要配置getter和 setter<template> 姓：<input type="text" v-model="person.firstName"> <br> 名：<input type="text" v-model="person.lastName"> <br> 全

2022-03-29 10:43:42 2501

原创 Vue3 setup的使用

setup 的执行时机比beforeCreate还要早并且setup里面的this是undefined beforeCreate(){ console.log('---beforeCreate---',this) }, setup(props,context){ console.log('---setup---',this); }执行结果：setup 能接收的参数（两个参数）1 props 配置声明且传入了的属性对象

2022-03-28 15:06:54 908

原创前端学习路线

1 零基础前端开发视频教程 Html5+Css3+移动Web教程 --黑马程序员：前端Html5+Css3+移动Web教程，前端Web入门教程，零基础前端开发视频教程_哔哩哔哩_bilibili2零基础JavaScript入门 --黑马程序员：黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门_哔哩哔哩_bilibili3jQuery网页开发案例精讲 --黑马程序员:黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩...

2022-03-22 15:10:27 808

原创 Windows环境安装node.js

1、下载node安装包Node.js安装包下载地址：https://nodejs.org/en/download/根据不同平台系统选择需要的Node.js安装包2 下载好后双击安装进入导向之后一直点next3 测试安装是否成功运行命令提示符窗口，分别输入node -v 和 npm -v 分别查看node和npm的版本号，npm随安装程序自动安装。如下图所示：4配置npm在安装全局模块时的路径和缓存cache的路径（可以跳过此步骤）因为在执行例如npm in.

2022-03-16 11:53:12 1275

原创 Vuex案例--记事本

首先：执行命令安装Vuexnpm install vuex@next --save这里使用的 Ant Design UI ：npm install ant-design-vue --save在 main.js 中完整引入import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'Vue.use(Antd)App.vue中<template> <div id="a

2022-03-14 15:56:15 768

原创 Vuex的基本概念和工作原理

详细参见Vuex官网：Vuex 是什么？ | Vuex什么是Vuex官网中说道Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。什么情况使用Vuex简单来说各种组件之间共享数据Vuex的工作原理首先我们需要注意的是 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到

2022-03-14 15:30:28 1219

原创使用Element ui 编写登录页面

1 完整引入element ui执行命令安装npm i element-ui -Smian.js中完整引入import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);2 登录页 login.vue<template> .

2022-03-14 11:18:15 32311 20