- 博客(88)
- 收藏
- 关注
RSS订阅原创 vue -观察者模式
观察者模式vue中的观察者模式什么是观察者模式vue中的观察者模式vue2 底成的原理是 object.defineproperty（） 配合观察者模式object.defineproperty（）对数据可以进行劫持 当数据发生变化的时候需要通知被依赖的地方这时候 就需要用上观察者模式什么是观察者模式观察者模式简单的说就是 一个对象被多个对象依赖， 会自动更新所有依赖的对象比如说游戏发布了一次更新 通知了所有玩家这时候 玩家就是观察者 游戏就是被观察者 或者说目标...
2022-05-27 20:45:25
1227
原创 vue3 toRef
toRef作用语法案例toRefs作用创建一个 ref 对象，其value值指向另一个对象（reactive）中的某个属性。语法const name = toRef(指向的对象,'读取的属性')案例<!-- toRef --><template><input type="text" v-model="people.name"><input type="text" v-model="people.age"><input type="
2022-05-27 09:50:16
265
原创 自定义hook函数
Hook什么是hook案例什么是hook本质是一个函数，把setup函数中使用的Composition API进行了封装。他可以使代码复用性更高, 让setup中的逻辑更清楚易懂。案例如图我们先定义一个方法<template><h2>鼠标的位置</h2><p>x : {{point.x}}</p><p>y : {{point.y}}</p></template><script lan
2022-05-27 00:17:59
331
原创 vue3 入门
VUE3入门前言1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性创建vue工程起步Composition APISetupref函数方法中改变ref数据ref改变对象reactive函数前言2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王对比于vue2进行了以下的优化1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级使用Proxy代替defineProperty
2022-05-26 20:45:01
1176
2
原创 vue2和3响应式原理
vue响应式原理vue2的响应式原理对象类型数组类型存在的问题Vue3的响应式原理proxyproxy的删除Reflectvue2的响应式原理对象类型vue2对象类型的响应式 是通过es5的方法 Object.defineProperty() 对属性进行读取和修改的拦截 （数据劫持）es5方法Object.defineProperty() 有两个方法分别为get（） => 用来获取对象的值如下 Object.defineProperty(obj, 'name', { get(
2022-05-26 18:43:04
115
原创 ts交叉类型
TS交叉类型交叉类型交叉类型和接口继承之间的区别交叉类型交叉类型的功能类似于接口继承用于组合多个类型为一个类型（常用于对象类型）案例如下 interface Person { name: string }interface People { sex: string }type PersonMan = Person & People这里就相当于 type PersonMan = {name: string, sex: string }实例对象：let obj: Person
2022-05-23 10:14:38
1127
原创 typescript 兼容
类型系统类型系统有两种1 Structural Type System(结构化类型系统) => 我们ts用的就是这个系统 也被叫做鸭子系统类型检查关注的是他们值所具有的形状也就说 在结构化类型系统中 如果两个对象具有相同的形状 则认为他们属于同一类型2 Nominal Type System(标明类型系统) （例如c++）类型兼容性成员相等时当成员相等时如果成员的类型相等 则兼容class people { name: string = '' age: numb
2022-05-21 20:36:13
253
原创 TypeScript 类
ts类类的继承extendsimplements（实现接口）类型可见性public => 公有peotected => 受保护的private => 私有readonly => 只读属性类首先我们要了解类类和对象下面为es6中一个普通的类类的继承extends继承，一个新的接口或者类，从父类或者接口继承所有的属性和方法，不可以重写属性，但可以重写方法语法如下继承的类 extends 被继承的类 {继承的类的属性}implements（实现接口）实现，
2022-05-21 20:10:25
389
原创 实战中的vuerouter路由守卫
import router from './router'import store from './store'// import { Message } from 'element-ui'const whiteList = ['/login', '/404'] // 白名单router.beforeEach((to, from, next) => { const token = store.getters.token if (token) { if (to.path ==
2022-05-19 15:05:16
93
原创 响应拦截器
// 拦截响应回来的数据，通过判断success值到底是true还是false,如果是true,res.data.data -> data 如果false -> 直接到catch// 响应拦截器request.interceptors.response.use(response => {// axios默认加了一层dataconst { success, message, data } = response.data// 要根据success的成功与否决定下面的操作if (
2022-05-18 10:17:08
1126
原创 TypeScript基础
TS什么是typeScriptTypeScript 开发环境搭建基本类型什么是typeScriptts是以js为基础构造出来的语言可以说ts是js的升级版它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译
2022-05-17 16:39:32
842
1
原创 数据交换格式
数据交换格式什么是数据交换格式XML什么是数据交换格式数据交换格式 就是服务器端 和 客户端之间进行数据传输和交换的格式简单的说 前后端的开发语言不同 语法不通 需要数据交换时有点困难 所以需要数据交换格式在我们前端开发中 最常用的就是XML 和 JSONXMLXML（Extensible Markup Language）是一种可扩展标记语言，可扩展指的是它的标签是自定义的...
2022-05-17 14:46:08
297
原创 axios解决token验证问题
原因有的接口文档 token是要加在请求头我们刚刚起步的时候 可能不太熟悉 导致我们像正常传参一样去发送请求这就会导致 无效token等问题这时候我们就要用到请求拦截器解决方法// 请求前拦截器axios.interceptors.request.use((config) => { config.headers.Authorization = window.localStorage.getItem("你的token"); // 在最后必须return return confi
2022-05-04 19:00:53
917
原创 vite 入门
Vite什么是 Vite简单的说创建初始化什么是 ViteVite是新一代的前端构建工具对比于webpack 他更轻更快 能够显著的提升前端的开发体验它由两部分组成一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输
2022-05-02 16:51:28
434
原创 vue-网易云案例
案例准备工作准备新文件flexible.js --> 移动端适配reset.css --> 初始化css文件准备Home文件下的index.vuelayout 文件下的index.jsPlay文件Search文件核心思路路由设置准备工作首先我们下载 别的大神发布的开源项目 这里有网易云官方的api网易云api下载完之后解压并在解压完的文件中运行终端 运行 yarn命令开始初始化 并且输入node app就建成了准备新文件然后我们在新建一个文件这里我选择的是vue2和yarn
2022-04-15 20:00:26
3484
4
原创 vue生命周期
VUE生命周期前言创建阶段beforeCreate（初始化界面前）created（初始化界面后）挂载阶段beforeMount（渲染dom前）mounted（渲染dom后）运行阶段beforeUpdate（更新数据前）updated（更新数据后）销毁阶段beforeDestroy（卸载组件前）destroyed（卸载组件后）总结前言创建阶段这个阶段 vue组件开始初始化，vue开始观察数据beforeCreate（初始化界面前）这个阶段 vue 实例刚刚在内存中创建，此时 data 和 met
2022-04-15 03:41:38
376
原创 vue 组件
vue组件认识组件认识组件组件是vue强大的功能之一vue的组件具有封装可复用的特点 能够让你在杂乱的应用中拆分为独立模块来使用但是需要注意的是 所有vue组件同时也是vue的实例 可接受相同的选项对象...
2022-04-15 03:23:08
263
原创 vue侦听器
VUE侦听器什么是侦听器使用方法方法（函数）形式的侦听器以对象的形式什么是侦听器侦听器 watch 和computed（计算属性）一样 是vue组件配置选项中的一个侦听器本质上也是一个函数 他主要用来监听数据的变化（侦听器 watch主要用来侦听data或computed这二个数据）我们使用的时候 要侦听那个数据 就用那个数据名作为方法名即可基本用法如下这里有两个参数 第一个参数代表数据改变后的新值第二个则代表数据改变前的旧值使用方法watch属性中的侦听器存在两种格式方法（函数）形式
2022-04-10 20:14:32
1389
原创 vue 计算属性
VUE计算属性什么是计算属性计算属性的使用什么是计算属性计算属性指的是通过一系列的代码运算 最终得到的一个属性值这个动态计算出来的属性值可以被模板结构或者是methods方法中使用简单的说计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动变化，与之相关的DOM部分也会同步自动更新。计算属性的使用计算属性一般定义到computed中计算属性其实是属性，在页面上使用只需要用属性值，不要带（），不然就变成方法了。计算属性都包含有一个getter和一个setter，计算属性会默认使用 ge
2022-04-09 20:16:09
1171
原创 vue脚手架及其基本应用
VUE脚手架脚手架的好处和能力脚手架的安装创建项目格式化脚手架组件中的js语法脚手架vue脚手架指的是 vue-vli是vue官方提供的一个全局模块包脚手架的好处和能力统一的项目结构(文件夹+文件+配置代码)开发过程中的webpack各系列支持babel支持eslint约束语法风格（代码风格）样式预处理器lessvue单文件支持提供一个开发时服务器，打包并预览项目代码热更新 (实时打包变化代码)本地服务器环境基于nodejs的命令行工具脚手架的安装在安装脚手
2022-04-07 19:37:54
279
原创 webpack
Webpack简介webpack的基础使用更新打包自定义出入口打包流程图自动生成html文件简介webpack本身是node的一个第三方模块包, 用于打包代码他可以把很多文件打包整合到一起, 缩小项目体积, 提高加载速度webpack的基础使用首先我们要知道 我们webpack是有默认的出口和入口的默认入口为 ./src/index.js默认出口为 ./dist/main.js这里需要注意的是我们不能吧文件或者文件夹之类的名字 不能取名为webpack接下来我们用yarn来使用webpa
2022-04-06 17:12:50
940
原创 vue基础
vue了解vuevue的特性数据驱动视图双向数据绑定MVVMvue的基本使用传统开发工程化开发指令和过滤器指令1 内容渲染指令v-text{{}}语法 又名插值表达式v-html2 属性指令在属性和插值表达式中书写js代码3 事件绑定指令$event事件修饰符按键修饰符4 双向绑定指令双向绑定的修饰符5 条件渲染指令区别v-if配套的指令6 列表渲染指令了解vuevue是一套用于构建用户界面的前端框架构建用户界面指的是 用vue往html页面填充数据框架指的是 一套现成的解决方案 程序员只能遵守框架
2022-03-26 10:44:45
1136
原创 yarn 管理包
yarnyarn下载使用添加移除5. 全局yarn在学习webpack之前 我们需要在电脑上有一个包的管理器npm和yarn都可以下载下载yarn建议 不要安装到带有中文的路径下 建议下载到c盘使用我们可以通过不同的终端打开使用yarn 这里我用的是vscode里面的终端先执行初始化命令yarn init这样就代表了安装成功 并且显示了版本这一段为配置项 因为是在学习做练习 所以我就没有过多配置接着 我们就可以开始操作了添加命令: yarn add [package]
2022-03-22 17:11:42
1352
原创 插件笔记 art - template 模板引擎
模板引擎前言使用第一步 导入第二步 定义数据第三步 定义模板第四步 调用第五步 渲染语法条件输出原文输出循环输出过滤器前言art -template是一个简约超快的模板引擎中文官网下载安装 如何插入我们的文件中使用即可使用第一步 导入 <script src="/assets/lib/template-web.js"></script>第二步 定义数据var data = { name: 'zs', age: 20}第三步 定义模板模板引擎的html结构
2022-03-16 19:23:20
411
原创 Git的基础应用
Git什么是Gitgit的记录快照Git的三个区域Git中的状态基础的Git工作流程Git基础配置用户信息用户名绑定邮箱绑定查看绑定是否成功获取Git仓库的两种方法将尚未进行版本控制的本地目录**转换**为 `Git` 仓库从其它服务器**克隆**一个已存在的 `Git` 仓库文件的四种状态显示文件状态以精简的方式显示文件状态跟踪新文件提交更新修改文件撤销对文件的修改移除文件同时移除只从仓库中移除忽略文件查看提交历史回退历史版本什么是GitGit` 是一个开源的分布式版本控制系统，是目前世界上最先进、最
2022-03-09 20:41:37
135
原创 面试题 防抖和节流
防抖和节流前言😺防抖🐱前言😺防抖和节流是一个常问的面试题 我也不指名道姓了，不同于某些jsonp 防抖和节流在实际开发者对性能的优化和对用户体验的升级都有作用所以我们很有必要掌握话不多说 开始正文😾防抖🐱函数防抖，就是指触发事件后，函数在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。简单的说 就是一段时间只执行一次这样就能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次举个例子🌰你打游戏 按b回城需要十秒钟 🐱等你回了城出来 再
2022-03-09 13:49:36
2248
原创 面试题-JSONP
JSONP前言什么是JSONPJSONP 是如何实现的jQuery中的JSONP前言让我们一起和这个没什么用 只有老旧的项目才会用的 偏偏面试喜欢出的难题JSONP对线一下首先 我们要知道 同源和跨域简单的说 两个网站的 协议 域名 端口一样 他们就是同源 反之 则是跨域 处于安全考虑 同源策略禁止跨域交互数据但是实际开发有时候又需要跨域 于是 在聪明的cv端（前端）程序员的聪明才智下 JSONP应运而生什么是JSONPJSONP是JSON with Padding的略称，JSONP为民间提
2022-03-08 20:56:42
955
原创 同源和跨域
同源和跨域同源同源策略跨域浏览器对跨域请求的拦截如何实现跨域数据请求同源同源指的是 两个页面的协议，域名和端口都相同那么这两个页面具有相同的源协议指的是 http，https（目前用的最多的） 还有文件协议file://域名指的是例如 baidu.com 之类的 域名是需要购买的端口号指的是域名后面的 ‘：+数字’http的默认值是80 https的默认值是443同源策略同源策略指的是浏览器提供的一个安全功能MDN0官方给的概念是 同源策略限制了从同一个源加载的文档或者是脚本如何与来自另
2022-03-08 20:04:36
6288
原创 常用HTTP响应码
HTTP响应码200201301302200代表请求成功 一般用于GET和POST请求201代表成功请求并创建了新的资源 通常用于POST或者是PUT请求301代表永久重定向 指的是请求的资源已经被永久移动到新的URL 今后所有新请求都由新的URL代替302...
2022-03-08 14:45:59
128
原创 HTTP协议
HTTP协议什么是HTTP协议请求和响应请求 reques响应 responseHTTP请求方法什么是HTTP协议HTTP被我们常称为超文本传输协议 是用来维护万维网服务器超文本传输到本地资源的传输协议这么说有点官方 我们可以这么理解在客户端和服务器之间要实现网页内容的传输则通信的双方必须遵守网页内容的传输协议就是HTTP协议请求和响应请求 reques因为HTTP协议是客户端和服务器之间的通信协议所以客户端向服务器发起的请求叫请求报文（request）请求报文由三部分组成请求行
2022-03-08 14:25:38
71
原创 用原生JavaScript实现ajax
AJAX概念使用xhr发起GET请求了解xhr对象的readyState属性使用xhr发起带参数的请求编码和解码使用xhr对象发送POST请求概念XMLHttpRequest（简称xhr）是浏览器提供的Javascript` 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的使用xhr发起GET请求一共分为四步第一步 用new关键字创建一个xhr对象const xhr = new XMLHttpRequest()第二
2022-03-06 10:18:05
743
原创 利用jQuery来实现Ajax
Ajaxget()不带参数时带参数时post()ajax（）使用$.ajax()发起get请求使用$.ajax() 发起POST请求get()在jQuery中 $.get()函数的功能比较单一它是专门用来发起get请求的 从而将服务器上的资源请求到客户端来使用$.get()函数的语法如下$.get( url , [data] ,{callback})第一个参数url 是字符串类型 也是必须要有的 他代表 要请求的资源地址第二个参数data 是要以对象方式 它代表请求资源期间需要携带的参数
2022-03-03 16:04:19
1661
原创 初识Ajax
初始Ajax什么是AjaxAjax的作用Ajax的典型应用场景用户名查重搜索提示数据分页展示什么是AjaxAjax 全称 Asynchronous JavaScript and XML, 即异步JS与XML简单的说就是 在网页中利用XMLHttpRequest 对象和服务器进行数据交互的方式就是AjaxAjax的作用在我们之前所学的技术 只能把网页做的更加美观 但是Ajax可以让我们轻松的实现网页和服务器之间的数据交互如下图所示Ajax的典型应用场景用户名查重在用户注册的时候 通过
2022-03-03 14:44:02
255
原创 JavaScript Set数据结构
Set什么是Set数据结构利用Set初始化添加删除查找清空遍历什么是Set数据结构ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构const s = new Set()利用Set初始化因为Set不能重复所以我们可以用Set来进行初始化如let arr =[2,2,2,2,2,5,5,2,0]; let x = new Set(arr); console.log(x); let
2022-03-02 21:20:22
371
原创 JavaScript ES6 新增语法
ES6中新增的语法扩展运算符利用扩展运算符来合并数组方法1方法2将类数组或可遍历对象转换为真正的数组Array.from()find()findIndex()数据扁平化includes()遍历对象startsWith() 和 endsWith()repeat（）扩展运算符扩展运算符又被称为展开语法扩展运算符可以将数组或者对象转化为用逗号隔开的参数序列如下let arr = ['a','b','c']console.log(...arr);利用扩展运算符来合并数组方法1let arr1
2022-03-02 21:06:22
1845
原创 JavaScript 剩余参数
剩余参数什么是剩余参数利用剩余参数和解构配合使用什么是剩余参数剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数const sum = (...args) => { let total = 0; args.forEach(item => total += item); return total;};console.log(sum(10, 20));console.log(sum(10, 20, 30));
2022-03-02 20:00:20
136
原创 JavaScript高级 箭头函数
箭头函数什么是箭头函数特性可以省略不可绑定this小结什么是箭头函数箭头函数是es6中一个新增加的定义函数的方式它的语法是() => { }这里面()小括号里面代表的是参数=>是必须要的符号 代表指向哪一块的代码{}代表的是函数体比如const fn = ()=>{}这就是一个箭头函数特性可以省略函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号比如let x = (num1,num2) => num1+num2;在箭头函数中 如
2022-03-02 19:46:55
89
原创 JavaScript 解构赋值
解构赋值解构赋值解构数组解构对象总结解构赋值解构赋值就是把数据结构分解，然后给变量进行赋值在ES6中 允许从数组和对象中提取值 按照对应位置 对变量赋值利用解构赋值 我们可以更加方便的取用对象或者数组中的属性 和方法等等解构数组数组解构用中括号包裹，多个变量用逗号隔开如下所示let [a,b,c] =[1,2,3]这就是一个简单的数组解构赋值我们打印分别abc就会分别得到123需要注意的是如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefinedlet [a,b,c
2022-03-02 19:17:12
423
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人