- 博客(19)
- 收藏
- 关注
RSS订阅原创 vue3(2)
（9）自定义hook函数使用vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义hook的优势：很清楚复用功能代码的来源，更清楚易懂toRefs把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref应用：当从合成函数返回响应式对象时，toRefs非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用问题：reactive对象取出的所有属性值都是非响应式的解决：利用toRefs可以将一个响应
2021-09-10 11:28:02
124
原创 vue3(1)
Vue3.0了解vue3.0：（1）简要了解Vue.js 3.0“one Piece”正式版再20年9月份发布 Vue3支持vue2的大多数特性 更好的支持TS性能提升打包大小减少41% 初次渲染快55%，重新渲染快133% 内存减少54% 使用proxy代替defineProperty实现数据响应式 重写虚拟DOM的实现和Tree-Shaking（摇树）新增特性Composition（组合）API Setupref和reactivecomputed和watch新的
2021-09-09 14:45:21
1226
原创 TypeScript(一)
TS1 TypeScript快速上手1.1 初识TS1.1.1 介绍TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于GitHub上1.1.2 特点（1）始于JS，归于JSTypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何...
2021-08-05 18:05:53
153
原创 ES6（第三天）
18、import和export：ES6之前没有类的概念，就没有模块这一说法19、JS为什么要引入异步这个概念：（1）JS是单线程的（2）同步代码会阻塞后面的代码（3）异步不会阻塞程序的运行20、JS中异步的实现：回调函数21、解决回调地狱提出的新方案----Promise：（1）Promise是一个对象，也可以说是一种编程思想，应用场景就是“当***执行完毕的时候，then执行的***动作”，Promise里不仅可以存放异步的代码，也可以放同步的代码（2）Promise.al
2021-08-03 18:55:15
85
原创 移动端WEB开发之响应式布局
1 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：（1）小于768的为超小屏幕（手机）（2）768-992之间为小屏设备（平板）（3）992-1200的中等屏幕（桌面显示器）（4）大于1200的宽度设备（大桌面显示器）1.2 响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元...
2021-07-29 16:53:39
92
原创 移动WEB开发之REM布局
1 rem基础1.1 rem单位Rem是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素设置font-size=12px；非根元素设置width:2rem；则换成px表示就是24px。Rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。2 媒体查询2.1 什么是媒体查询媒体查询是css3新语法。(1)使用@media查询，可以针对不同的媒体类...
2021-07-29 16:52:36
109
原创 移动WEB开发—FLEX布局
1 传统布局和FLEX布局对比1.1 传统布局：兼容性好 布局繁琐 局限性，不能再移动很好的布局1.2 flex布局：操作方便，布局极其简单，移动端使用比较广泛Pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2 FLEX布局原理（1）flex时flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器...
2021-07-29 16:51:18
80
原创 移动WEB开发流式布局
1 移动端基础1.1 浏览器现状兼容移动端主流浏览器，处理Webkit内核浏览器即可1.2 手机屏幕的现状1.3 常见移动端屏幕尺寸1.4 移动端调试方法（1）Chrome DevTools（谷歌浏览器）的模拟手机调试（2）搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器（3）使用外网服务器，直接IP或域名访问2 视口视口就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口2.1 布局视口一般移动设...
2021-07-29 16:49:14
178
原创 AJAX（2）
AJAX传输XML1 xml简介XML 指可扩展标记语⾔EXtensible Markup Language,他设计的时候是⽤来传递数 据的,虽然格式跟HTML类似1.1 xml示例<?xml version=’1.0’ encoding=’utf-8’?><singer><name>周杰伦</name><age>18</age><skill>途牛</skill></..
2021-07-29 16:47:44
64
原创 ES6（第二天）
11、Set与WeakSet结构的特点：（1）set是ES6给开发者提供的一种类似数组的数据结构，可以理解为值的集合，它和数组的区别为，它的值不会有重复项（2）属性和方法：size（返回成员个数）、clear()（清除所有成员）、has(value)（判断键值对是否有指定的值，返回值是布尔值）、delete(value)（删除指定值）12、Map、Set、Array、Object间的区别：（1）增删改查： 增加：arr.push() obj[‘fruit’]=item.f...
2021-07-28 20:23:13
50
原创 ES6（第一天）
1、ES5之后的所有都统称为ES62、使用babel工具搭建ES6项目环境：（1）初始化项目 npm init -y（2）安装对应依赖包： babel-cli：命令行工具，让我们可以输入一些babel的命令 babel-preset-es2015：规律集，如何转换代码（要转换成es2015也就是ES6）（3）创建项目录：src：用于存放编写的es6代码 dist：用于存放由es6转化后的代码（4）配置.ba...
2021-07-27 20:04:05
61
原创 第八天（修改密码、加载效果和异常处理）
17 修改密码17.1 nodejs添加接口17.1.1 添加原密码校验接口Nodejs配置：17.1.2 添加修改密码接口Nodejs配置：17.2 Api调用接口新建 api\password.js 文件, 调用服务接口实现如下:17.3 初始化修改密码组件（1）打开组件，添加修改密码表单组件（2）data选项中初始化属性值（3）在 handleCommand 方法中调用 handlePwd 方法（4）添加 hand...
2021-07-24 16:24:32
107
原创 第七天（学员管理-查询、修改、增加、删除）
13.3.2 授课教师的选择（1）将 teacher\index.vue 导入 student\index.vue 作为子组件使用（2）使用 dialog 对话框组件，包裹 Teacher 组件（3）在 student\index.vue 组件的 data 选项中定义 dialogTeacherVisible 控制对话框（4）修改 授课教师 输入框 readonly 只读框 @click.native 点击事件。（5）教师页面在弹出时候很多是我们不需要的, 进行优化...
2021-07-23 19:38:10
570
原创 第六天（教师管理—修改、删除，学员管理—列表查询）
11 教师管理-修改11.1 需求分析当点击 编辑 按钮后，弹出编辑会员窗口，并查询出会员信息渲染。修改后点击确定 提交修改数据。11.2 nodejs添加接口11.2.1 ID查询数据接口11.2.2 提交修改数据接口11.3 Api调用接口（1）src\api\teacher.js 导出的默认对象中，添加ID查询方法 getById 和 更新方法 update（2）在 src\views\teacher\index.vue 中的 handleE...
2021-07-21 18:04:05
355
原创 第五天（过滤器实现、分页功能实现、条件查询实现、教师管理-新增）
9.2.4 过滤器实现数据转换（1）渲染后发现支付类型是编号，应该将类型编号 转为名称。通过 filters 选项来定义过滤器来实现转换。 JS 脚本处声明一个全局支付类型数组， 组件对象的 filters 选项指定转换规则（2）修改模板代码9.3 分页功能实现9.3.1 nodejs添加会员模拟接口router.js中添加方法9.3.2 Api调用接口（1）修改src\api 下的 teacher.js , 在导出的默认对象中，增加分页查询方法（...
2021-07-20 19:42:26
137
原创 第四天（右侧主区域、退出系统、教师数据列表）
8.7 右侧主区域实现（1）主区域中除了 首页没有 横向指示导航，其他模块中都有，所以先渲染出面包屑。（2）将 横向指示导航 抽取为子组件 AppMain\Link.vue ， 其中获取导航名称使用 $route.meta.title , 路由地址使用 $route.path（3）在 AppMain\index.vue 中导入 Link.vue 使用 v-show 判断路由为 /home 时不显示横向指示导航。8.8 首页Home组件在 src\views\login\ind..
2021-07-19 19:36:55
61
原创 第三天(登录页面完成以及项目初步布局)
7 系统登录管理7.1 路由配置（1）在 src\views 目录下新建 login 目录及此目录下新建文件 index.vue（2）在 src\router.js 中配置路由（3）路由渲染出口，在 App.vue 中, 注意样式保持一致7.2 登录页面（1）在 src\views 目录下的 index.vue 文件中添加登录表单模板 表单输入框，如果没有使用 v-model 绑定值，是不允许输入值的。（2）添加样式7.3 表单校验（1）在 el-...
2021-07-19 19:35:25
105
原创 第二天（跨域问题、系统注册管理）
5 跨域问题5.1 演示跨域现象（1）新建一个axios-demo工程，并更改端口号为8001（2）启动axios-demo（npm run serve）（3）查询是否可以直接访问数据，访问http://localhost:8001/db.json（4）修改test.js，发送请求给8001接口，把BASE_URL修改为http://localhost:8001（5）重新刷新页面，查看控制台，出现跨域问题5.2 什么是跨域前后端分离时，前端和后端API服务器可能不在...
2021-07-17 14:51:42
172
原创 学生管理系统-前后端分离项目
第一天（vue-cli安装、初始化项目、整合elementUI、axios封装）1. vue cli安装1.1 全局安装vue-cli1.2 安装成功后，在命令行可以使用vue命令，比如查看vue版本2 启动项目测试2.1 输入npm run serve命令（ctrl+c退出）3 初始化项目3.1 配置vue.config.js3.2 整合第三方库3.2.1 安装axios，处理异步请求3.2.2 安装pubsub-js，实现非父子...
2021-07-16 20:58:33
978
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人