- 博客(12)
- 收藏
- 关注
RSS订阅原创 Vue2.x、Vue3.x中的v-model
Vue2.x中的v-model自定义组件中的v-model( <--- 这是官方给出的解释)当给子组件上绑定了v-modelv-model具体做了三件事: 给子组件身上绑定了一个名称为value的自定义属性 <Foo :value="name"/> 在子组件中需要用props接收value 给子组件身上绑定了一个 名称为 input的自定义事件 <Foo @input="callback"/> 在子组件中需..
2021-08-04 11:27:57
239
原创 小知识点汇总
JS预编译什么是预编译? 作用域创建阶段 就是预编译的阶段预编译时做了什么?创建了AO对象 AO对象: 供js引擎自己访问的JS变量对象 找形参和变量的声明 作为AO对象的属性名 值为undefined 实参和形参相统一 找函数声明 如果函数声明和变量的声明一样的话会覆盖变量的声明JS中的this在函数中直接使用this指向window 函数直接调用相当于 函数名.call(window) 的语法糖函数作为对象的方法被调用(谁调...
2021-08-03 10:34:27
104
原创 Vue混入模式
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。一个独立的拥有完整的vue组件选项的对象,这个对象上的所有的选项可以加入到 .vue 组件中作用:分发 Vue 组件中的可复用功能场景：如果我们想做的事情是针对于每一个组件都要做这件事儿如 :// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { ...
2021-08-03 09:58:46
440
原创 Vue懒加载实现
组件数据懒加载使用场景和解决的问题在页面很长时,位于底部的组件可能用户根本就不会到达,那这些组件的数据加载就是一种浪费核心机制: 只有组件成功进入到视口区域 我们才发送ajax请求 (接管了由生命周期钩子函数发送的请求模式变成手动控制什么时候发起)具体实现:通过 vueuse/core 中的 useIntersectionObserver()核心方法: useIntersectionObserver 帮助我们监听组件是否进入到视口区域impor...
2021-07-29 16:40:08
1546
原创 深拷贝与浅拷贝初识
浅拷贝什么是浅拷贝?只把对象上第一层的属性拷贝一份, 放到一个新对象上如果浅拷贝的属性指向的是一个对象或者一个数组, 那么它拷贝的是这个对象或数组的内存地址浅拷贝代码演示: // 浅拷贝：只把对象上第一层的属性拷贝一份，放到一个新对象上！！！ function simpleCopy(obj) { // 通过 "Array.isArray()"方法 判断用户传进来的 obj 是“数组”还是“真正的对象” const newObj = ...
2021-07-25 17:05:09
122
原创 处理树形结构数据
问题:后台返回的是线性数据, 而我们前台需要的是一个树形数据结构, 此时就需要我们自己处理数据核心思路就是寻找父节点演示==>寻找父节点演示定义函数要明白做什么事, 当定义完函数后, 要接收一个什么样的参数 最终需要产出的是什么样的值1. 当前接收的是由后端返回的一个需要转换为树形数据的 '线性结构数据'// 后端传给我们一个有问题的线性结构数据 需要我们处理成树形结构数据function transTreeData(list) { const newLi...
2021-07-24 20:45:26
502
原创 Axios响应拦截器 当后台返回的不是常规的状态码,而是自定义字段的解决方案
目标: 简化接口数据的获取操作，优化axios对于接口出错的逻辑处理问题: 当前后台返回的数据不是以http状态码返回, 而是以一个自定义的字段返回 接口有一个success字段，如果接口失败，后端只是把success字段设置为false，并没有给到我们http错误状态码，http状态码依旧是200，而axios的错误提示需要依赖于非200的状态码，直接导致接口已经失败，但是没有报错提示，所以需要我们手动去触发reject才可以 axios默认会给我们包裹一个data字段，这导致我们.
2021-07-24 17:44:05
1351
2
原创 页面跳转权限控制
我们现在都是基于vue做的单页应用开发，在单页应用中，html入口页面其实只有一个，页面的概念从传统的html文件变成了路由对应的组件，所以其实我们说页面跳转权限控制，实际指的就是路由的跳转控制权限拦截的流程在路由守卫的模块中代码实现:// 权限拦截 导航守卫 路由守卫 routerimport router from '@/router' // 引入路由实例import store from '@/store' // 引入vuex store实例const whiteLis..
2021-07-24 17:32:30
653
原创 Axios封装处理
目标: 基于axios封装一个请求模块，调用接口时使用要搞清楚 在封装axios时，都做了哪些事情？实例化 baseURL 超时时间 大数处理 拦截器 请求拦截器 全局注入token 响应拦截器 token失效 401 跳转登录页 当后端接口返回的状态不是以http状态码 200-300返回 而是通过自定义字段展示一个 如: 返回一个success字段 当success为true的时候,代表接口请求成功,是OK的 看人资视频 ...
2021-07-24 17:24:48
290
原创 Vuex - 持久化
Vuex为什么要持久化?原因：因为Vuex是基于内存，存在内存里面的，刷新网页之后就没有了，不会持久化储存解决方案：以token举例方案一：获取到token后，一式两份；Vuex存一份，localStorage存一份； 在Vuex中初始化token时，先从本地取，取不到再初始化；方案二：把之前手动进行初始化变成自动实现思路：只要Vuex中的数据发生变化，就自动往本地同步一份步骤: 安装vuex-persistedstate 插件 vuex中准备use...
2021-07-24 16:33:47
6221
原创 Git常用命令
目录Git基础常用命令查看 Git 版本号的命令全局配置用户名和邮箱的命令初始化空 Git 仓库的命令把文件添加到暂存区的命令检查文件状态的命令检查文件状态的参数关闭 git add 时候的警告消息一次性把所有文件加入暂存区把暂存区的文件搬运到Git仓库的命令把码云仓库中的代码下载到本地分支相关的命令查看分支列表创建新分支切换到指定名称的分支快速创建并立即切换到新分支上分支的合并删除本地分支把本地分支最新的代码推送到码云仓库
2021-07-23 20:06:58
51
原创 Vue3.x入门
目录简介优化:破坏性语法更新组合式APIsetup入口函数响应式API - reactive*响应式API - ref响应式API - computed (计算属性)响应式API - watch生命周期函数Vue3.x中的生命周期钩子函数拓展父子通信provide 和 inject1. 基础使用2. 传递响应式数据TemplateRef简介1. vue3.0 社区生态已经逐步完善2. 相较于vu...
2021-07-23 18:22:06
1287
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人