- 博客(41)
- 收藏
- 关注
原创 在Vue3中使用 ECharts
在这个例子中,我们创建了一个简单的柱状图。我们使用 Vue 3 的 `ref` 来引用图表的 DOM 元素,并在`onMounted`生命周期中初始化 ECharts 图表。1. 安装 ECharts:首先,您需要安装 ECharts 库。2. 创建一个 Vue 组件来显示 ECharts 图表。试了好久ref一直报错,最后还是靠AI解决的,亲测有效。text: '示例图表'
2024-06-12 00:41:34
450
原创 vue2人力资源项目10静态路由和动态路由拆分
注:使用需要线上代码与线下的配合1.在main.js里自定义注册指令// 注册自定义指令,控制功能权限// 两个参数:1.指令名称(不用写v-,它会自动补足)2.空对象// el是当前指令作用dom元素的对象// binding 是v-permission=“表达式” 表达式的信息.roles?// 拿到了points// points中是否有add-employee// binding.value :v-permission=“表达式” 中的表达式的值if (!// 删除或禁用。
2024-05-17 14:11:28
300
原创 vue2人力资源项目9权限管理
给表格绑定数据,添加 row-key和default-expand-all和默认展开节点属性。2.visible加.sync可以让我们点击x直接关闭弹层。这里用了文档里的方法,通过获取实例调用方法来实现双向绑定。用插槽和v-if设置二级权限没有添加。1.设置控制退出角色的显示的变量。调用接口,传入参数,提示信息。将获取的数据转换为树形。
2024-05-15 16:33:32
351
原创 vue2人力资源项目8员工详情
route是一个对象,它代表当前的 Vue Router 路由。它包含了当前路由的详细信息,如路由的名称 (name)、路径 (path)、参数 (params) 和查询参数 (query)。$route 对象是不可变的,也就是说,你不能通过修改 $route 对象来改变当前路由。表示这个id可以有(如编辑),也可能没有,(如添加)。绑定给子组件的img标签里的value和src,判断value值存不存在。设置prop变量(接收从父组件绑定的v-model传过来的值)转换树形的代码,注意判断长度。
2024-05-14 22:11:16
715
原创 vue2人力资源项目4路由和部门新增
name: [{ required: true, message: '不能空', trigger: 'blur' }, { min: 2, max: 10, message: '长度2-10', trigger: 'blur' }, { trigger: 'blur', validtaor: async(rules, value, callback) => {// value就是输入的编码callback(new Error('已经有了'))} else {callback()} }]
2024-05-05 16:38:08
363
原创 vue2人力资源项目3主页
/ 调用actionstore/user.js里存放action1.先导入接口,并声明一个对象来存储用户基本资料状态// 用来存放数据token: getToken(),// 调用加括号,从缓存中读取初始值userInfo:{}//声明一个对象来存储用户基本资料状态2.利用mutations修改userInfo的值// 用来修改数据,要修改state里的数据,必须通过mutations// 同步到缓存},// 删除vuex的token},
2024-05-03 20:56:58
428
原创 vue2人力资源项目2登录接口、跳转主页
utils/request.js处理请求拦截器,携带tokenindex.jsutils/request.jsindex.vue测试响应拦截器:判断解构数据是否异常,以及请求是否成功执行api.user.js里封装登录请求接口store/user.js跳转主页login/index.vue判断当前环境是生产还是开发开发环境有数据,生产环境没有数据总结
2024-05-02 16:17:27
364
原创 Vue2黑马人力资源项目1(表单校验)
绑定之后设置检验isAgree: [// 这里需要使用自定义验证validator// 不用required是因为它只能检测 null undefined ""// rule校验规则// value校验的值// callback函数-promise resolve reject// calback() callback(new Error('需要勾选'))value?callback() : callback(new Error('需要勾选'))
2024-04-30 15:49:02
352
原创 vue3大事件项目3
3. el-form-item标签配置prop,用于接收参数<el-form-item label="分类别名" prop="cate_name">当你需要在表单提交时获取或验证表单项的值,就需要用到prop属性。1. form表单绑定变量和规则:<el-form :model="formModel" :rules="rules">defineEmits` 是一个组合 API,用于定义父组件可以监听的子组件事件。父组件:封装方法(getChannelList()是父组件已经封装好的方法)
2024-04-13 15:11:13
702
原创 Vue3大事件项目1 登录注册验证
1. 校验相关(1) 给当前表单绑上整个的数据对象:el-form => :model="ruleForm" 绑定的整个form的数据对象 { xxx, xxx, xxx } ( )(2) 绑上对应的校验规则:el-form => :rules="rules" 绑定的整个rules规则对象 { xxx, xxx, xxx }(注意一一对应) ( )
2024-04-07 15:45:09
1445
1
原创 六级阅读笔记
1.阅读长难句时,先找主语,再找谓语,定语一般用作修饰,定语一般包括adj和介词短语。2.阅读时,遇到举例的词,一定要注意思考背后的含义。
2024-03-19 00:48:16
255
原创 Vue CLI (脚手架)命令
1. 全局安装(只需安装一次即可) yarn global add @vue/cli 或者 npm i @vue/cli -g。2. 查看vue/cli版本: vue --version。
2024-03-16 17:12:27
816
1
原创 获取省市区(axios)
1.2 切换省份,设置城市下拉菜单数据,清空地区下拉菜单。* 1.3 切换城市,设置地区下拉菜单数据。2.3 基于axios提交保存,显示结果。* 1.1 设置省份下拉菜单数据。2.2 依靠插件收集表单数据。目标1:完成省市区下拉列表切换。2.1 监听提交的点击事件。目标2:收集数据提交保存。
2024-03-04 19:24:51
461
1
原创 天气预报信息获取展示搜索(简易axios封装)
2.1 绑定input事件,获取关键字(利用自定义属性)3.1 绑定城市点击事件,获取城市code值。* 1.1 获取北京市天气数据。3.2 调用获取并展示天气的函数。* 1.2 数据展示到页面。2.2 获取展示城市列表数据。目标1:默认显示-北京市天气。封装好的axios函数。目标2:搜索城市列表。目标3:切换城市天气。
2024-03-03 22:31:04
454
原创 使用XMLHttpRequest对象与服务器通信
3. 监听 loadend 事件,接收响应结果。1. 创建 XMLHttpRequest 对象。2. 配置请求方法和请求 url 地址。
2024-02-20 00:31:42
190
原创 更换网站背景学习总结
2. 上传成功时,"保存"图片url网址。* 3. 网页运行后,"获取"url网址使用。1. 选择图片上传,设置body背景。
2024-02-18 21:51:06
218
原创 图书管理增删查改案例学习总结附代码与讲解(Axios)
这段代码选择具有 "add-modal "类的 DOM 元素,并使用该 DOM 元素创建一个新的 Bootstrap 模态实例。这样,您就可以通过`addModal` 变量来控制模态,例如显示、隐藏或使用 Bootstrap 模态方法和属性来操作模态。4.2.1(根据Id利用axios)获取当前编辑图书数据,(遍历属性,)返回到表单中。3.1获取选定图书的删除按钮(给动态生成的标签绑定点击事件,可以委托给父级)图书(弹框显示隐藏——数据显示——保存修改&刷新列表)点击弹框,出现新增(用js控制弹框)。
2024-02-17 01:41:59
1181
1
原创 params、data、headers传参
3. headers:用于传递请求头信息。2. data:用于传递请求体。,通常用于POST请求。1. params:用于传递。,通常用于GET请求。
2024-02-17 00:12:30
713
1
原创 访问javascript对象的属性和方法的两种方式
2. 方括号操作符([]):这种方式允许使用字符串形式的属性名来访问对象的属性或方法,这在属性名是动态确定或不是有效的标识符时特别有用。使用方括号操作符时,可以将属性名作为字符串传递,也可以使用变量来动态访问属性。1. 点操作符(.):最常见的方式,使用点操作符后跟属性或方法的名称来访问对象的成员。// 输出: John。// 输出: Hello, John。// 输出: Hello, John。// 输出: John。// 输出: John。// 使用变量访问属性。
2024-02-16 01:03:46
848
1
原创 对象解构与展开运算符
当在编程中使用对象解构时,可以通过将对象的属性提取到单独的变量中来简化代码。以下是JavaScript中对象解构的一个简单示例// 定义一个包含用户信息的对象age: 30,// 使用对象解构将对象的属性提取到单独的变量中// 现在可以直接使用提取出来的变量// 输出 "Alice"// 输出 30// 输出 "alice@example.com"```定义了一个名为`user`的对象,包含了`name`、`age`和`email`属性。
2024-02-10 23:38:22
906
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人