- 博客(40)
- 收藏
- 关注
RSS订阅原创 路由组件缓存
目录组件缓存-匹配缓存组件缓存-新钩子函数组件缓存-匹配缓存路由不停的切换时，消失的页面会不停的创建和销毁，所有代码重新执行，效率不高所以要把组件缓存到内存，优化性能，只需要用keep-alive, 包裹切换的挂载点即可<keep-alive> <router-view></router-view></keep-alive>在keep-alive的时候, 使用include/exclude区别缓存哪些组件.
2022-02-23 10:40:15
576
原创 vue-路由使用
目录声明式导航声明式导航-跳转声明式导航-传参编程式导航 - 用js方式切换路由路径编程式导航-跳转编程式导航-传参、重定向404页面修改路由在地址栏的模式
2022-02-23 10:25:16
930
原创 vue-路由的下载安装
步骤 1. 下载vue-router模块到当前工程 2. 在main.js中引入VueRouter函数 3. 添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件 4. 创建路由规则数组 – 路径和组件名对应关系 5. 用规则生成路由对象 6. 把路由对象注入到new Vue实例中 7. 用router-view作为挂载点, 切换不同的路由页面 //1、安装 yarn add vue-router //2、导入路由..
2022-02-22 22:55:55
2509
原创 自定义指令
当vue内置的指令满足不了需要的时候，就可以自己定义在标签中使用 v-指令名全局注册Vue.directive('指令名', { inserted(el) { }})局部注册directives: { 指令名: { inserted(el) { } }}
2022-02-21 21:56:12
159
原创 vue组件插槽
插槽的作用：让组件的服用更加灵活 提高组件的复用性默认插槽：1. 在组件内使用 slot 标签占位，在slot标签内的内容为默认内容，如果不传值，则显示默认内容2. 使用组件时将自定义标签传入组件内具名插槽当组件中有多个内容不确定时，通过具名插槽区分1. 在子组件的slot标签上设置name属性2.父组件的template上结合 v-slot:子组件的name值 来指定对应的插槽子组件：<template> <div><slo..
2022-02-21 21:50:57
300
原创 vue-组件通信
组件是一个可复用的 Vue 实例, 封装了 HTML / CSS / JS好处：相互独立 复用性高 扩展性高 可维护性高组件使用1、封装组件一个vue文件就是一个组件2、引入组件3、注册组件全局注册：在main.js中注册 注册后所有地方都可以使用// 1. 引入组件对象import 自定义 from './components/文件名.vue'// 2. 全局注册组件// 一次只能注册一个, 所以是 component 没有 ...
2022-02-18 21:16:40
206
原创 vue03-webpack配置
webpack：静态模块打包器除了合并代码, 还可以翻译和压缩代码less/sass -> cssES6/7/8 -> ES5webpack-使用前-准备1、初始化包环境yarn init -y2、安装依赖包yarn add [email protected] [email protected] -D3、在package.json中, 配置scripts(自定义命令)scripts: { "build": "w...
2022-02-15 21:58:29
2002
原创 vue方法中的this
.vue事件方法中的this指向 ： vue实例 2.vue事件方法中访问data对象中的成员 : this.属性名 vue会将data对象与methods对象中的成员 平铺到 vue实例中 3.注意点： 如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员 <!DOCTYPE html><html lang="zh-CN"><head> <meta char..
2022-02-12 20:42:05
6399
4
原创 vue基础-1
入口函数原生js的入口函数 要等dom树和外部资源加载完毕再执行，并且只能注册一个 ，多个会覆盖。而jq的入口函数只需要等dom树加载完毕就可以执行，并且可以注册多个。标准写法与简写一样，推荐简写简写：$(function(){})标准：$(document).ready(function(){})jQuery对象与dom对象dom对象是使用dom语法获取的对象，jQuery对象是使用jQuery语法获取的对象。jQuery对象获取的结果是伪数组，dom与jq对象不互通，因为原型链不同.
2022-02-12 20:39:57
342
原创 Ajax的优化方案-防抖与节流
防抖防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次。防抖的本质： 利用setTimeout延时器 在单位事件重新触发事件，清除上一次的事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=...
2022-01-12 20:19:30
436
原创 Ajax-同源策略与跨域
同源策略同源 同源指的是两个URL地址具有相同的协议、主机名、端口号例如：下表给出了相对于 http://www.test.com/index.html 页面的 5 个同源检测结果同源策略是浏览器提供的一个安全功能，不允许非同源的URL之间进行资源的交互 ajax请求数据要遵循同源策略. html静态文件 与 接口地址 遵循同源策略,反之就是跨域跨域 浏览器不允许非同源的URL之间进行交互，所以出现了跨域， 跨域的拦截...
2022-01-12 19:59:35
265
原创 Ajax-XMLHttpRequest
XMLHttpRequest是浏览器内置的一个构造函数作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！使用 XMLHttpRequest 发起请求我们可以不用 axios 封装的 Ajax 函数，直接基于 XMLHttpRequest 发起 Ajax 请求。1、创建 xhr 对象
2022-01-11 20:20:23
152
原创 Ajax文件上传
FormDataFormData是浏览器提供的一个WebAPI，以键值对的方式存储数据。FormData + Ajax 技术实现文件上传的功能。注意：Ajax 实现文件上传的时候，请求体的编码格式必须是 multipart/form-data。FormData上传文件的格式为二进制FormData + axios 向服务器提交普通的数据FormData 是一个构造函数，new FormData() 即可得到 FormData 对象：let fd = new Fo...
2022-01-11 20:06:17
6208
原创 AJax拦截器（interceptors）
拦截器是用来全局拦截axios的每一次请求与响应的，可以把每个请求中某些重复性的代码封装到拦截器中，提高代码的复用性。当客户端把请求发送到服务器的时候，请求拦截器会在其中进行请求拦截，然后运行封装的重复性代码，再发送给服务器。当服务器把响应发送到客户端的时候，响应拦截器会进行响应拦截，然后运行封装的重复性代码，再发送给客户端。请求拦截器：axios.interceptors.requset.use(function())响应拦截器：axios.interceptors.response.use
2022-01-11 19:48:34
3846
原创 Ajax-01
客户端：（将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用）广义：电脑、笔记本、pad、电子手表、手环.......狭义：在前端开发中，客户端特指“浏览器”。服务器： 是提供服务的设备（本质上是一台电脑主机）...
2022-01-08 21:57:05
372
原创 js基础 +webAPI+js高级
目录知识点三要素：1.作用 ：2.语法 ：3.注意点 ：知识点三要素：1.作用 ： 概念性：主语是 一个修饰语的宾语 功能性 ：主语的作用是功能描述 2.语法 ： 表达式 ：运算符与数据 语句: 关键字与格式 3.注意点 ：js基础02-webapi1.1-DOM操作1.2-事件1.3-bom1.4-案例编程思维03-js高级（面试点汇总）...
2022-01-02 21:40:26
355
原创 js高级面试点总汇
请说说你对面向对象的理解？面向对象是一种注重结果的思维方式面向对象 ： 封装、继承原型对象是来解决什么问题的？内存浪费 + 变量污染请简述原型对象、构造函数、实例对象三者之间的关系（三个属性）构造函数： prototype指向原型对象原型对象 ： constructor指向构造函数实例对象： __proto__指向原型对象js是通过什么来实现面向对象继承的？原型链请说说什么是静态成员，什么是实例成员。静态成员： 函数自己的成员实例成员： 实例对象的
2022-01-02 21:08:43
431
原创 JavaScript-数组迭代方法
目录数组map遍历数组filter遍历数组forEach遍历数组some遍历数组every遍历数组findIndex方法数组reduce方法数组map遍历map场景：映射数组。遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组 例如：将数组中的每一个元素+1 例如：将数组中每一个元素 * 2map方法特点 (1) 回调执行次数 === 数组长度 (2)本身返回值：映射之后的新数组 (...
2021-12-28 21:18:22
79
原创 javascript高级-ES6新语法
目录ES6新语法var、let与constlet和const区别：解构赋值语法对象解构赋值数组解构赋值函数参数解构箭头函数this指向展开运算符数据类型SetES6新语法var、let与const（ES5）var特点：(1)var的预解析会使变量声明提升 可以先调用在声明 （先上车后补票）(2)没有块级作用域,if和for大括号里面声明的变量是全局的（ES6）let 与const：(1)没有预解析：变量必须要先声明，才能使用...
2021-12-28 20:48:43
542
原创 json格式数据介绍
1.json是什么？ : json是一种数据格式 本质是字符串类型 实际开发中，网页中的数据都是来源于网络服务器。 而服务器不是js语言开发，而是其他编程语言 ： java、c++、python、go、c#、.net .... 而不同的编程语言，数据类型不同。他们是不互通的。后来人们就发明了一种通用的数据格式，让所有的编程语言都支持。这就是json格式。json作用 ： 数据跨平台传输问题json语法 ： （本质是字符串） 3.1 json转js : let js对象 = ...
2021-12-19 19:57:31
1542
原创 js-BOM
目录window对象1.window对象两个方法：2.window对象事件3.location对象4.history对象 5.navigator对象6.screen对象存储对象storagelocalStorage语法 :sessionStorage对象localStorage和sessionStorage的区别？localStorage存储对象window对象window对象是sj中的顶级对象。所有全局函数、全局属性都是window对象的成..
2021-12-19 19:51:59
97
原创 DOM操作
1.1-addEventListener注册事件// 设置同名的点击事件 调用方法 let box = document.querySelector("#box") // 事件源.addEventListener 事件类型 事件处理函数 box.addEventListener('click', function () { alert('好好学习') }) box.addEventLi
2021-12-16 21:49:54
84
原创 网页特效-定时器
定时器：一段代码 间隔时间 重复执行应用场景：电商表示，自动轮播，广告自动消失setInterval 永久定时器一旦开启，永久重复执行，只能手动清除 开启定时器： setInterval(一段代码,间隔时间) 清除定时器: clearInterval(定时器ID)setTimeout 一次定时器一次定时器：开启之后间隔时间只会执行一次， 执行完成后自动清除 开启定时器： setTimeout(一段代码,间隔时间)...
2021-12-15 19:15:13
1383
原创 Dom节点（1）
查获取子节点： 父元素.Children <ul> <li>我是班长1</li> <li id="li2">我是班长2</li> <li>我是班长3</li> <li>我是班长4</li> <li>我是班长5</li> </ul> <script> .
2021-12-15 19:10:20
1238
原创 js-DOM操作
对象(object) 是js里面的一种数据类型 可以理解为一种无序的数据集合对象的声明：let 对象名 = {}//声明了一个 person 对象let person = {}对象的使用对象有属性和方法组成属性（对象的静态体征）方法（对象的动态行为） let 对象名 = { 属性名:属性值, 方法名：函数 }let person ={ uname : '小明', age : 18, fn : fu.
2021-12-12 20:34:32
308
原创 js -对象
对象(object) 是js里面的一种数据类型 可以理解为一种无序的数据集合对象的声明：let 对象名 = {}//声明了一个 person 对象let person = {}对象的使用对象有属性和方法组成属性（对象的静态体征）方法（对象的动态行为） let 对象名 = { 属性名:属性值, 方法名：函数 }let person ={ uname : '小明', age : 18, fn : fu.
2021-12-10 19:57:19
323
原创 js-函数（function）
封装定义:函数的封装，将需要重复使用的代码块使用函数进行封装， 等到下次需要使用的时候只需要 调用函数就可以了调用：函数不调用不执行函数的复用代码和循环重复代码的区别：循环代码写完即执行，不能很方便控制执行位置随时调用，随时执行，可重复调用函数：function，是执行特定任务的代码块作用：利于精简代码方便复用声明语法：function 函数名(){ 函数体 }函数名命名规范: 和变量命名基本一...
2021-12-09 19:43:51
673
原创 js-冒泡排序
冒泡排序是一种简单的排序算法。 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列 的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。 比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]<script> let arr = [10, 3, 7, 24, 6, 81, 5] //
2021-12-08 20:04:48
144
原创 js 循环、数组操作
for循环把声明起始值、循环条件、变化值写到一起，更方便for循环最大的价值是循环数组for循环和while循环的区别：明确了循环的次数的时候推荐使用for循环，不明确循环的次数的时候推荐使用while循环退出循环continue：结束本次循环，继续下次循环break：跳出所在的循环循环嵌套一个循环里再套一个循环，一般用在for循环里例子：九九乘法表数组数组(Array)是一种可以按顺序保存数据的数据类型 当需要的元...
2021-12-08 20:01:17
401
原创 循环退出break和continue
break和continuebreakbreak 跳出所在循环 不再执行此循环（for、for....in、 while、 do....while）当在循环中时，会终止循环 ，执行循环之后的代码 当在switch中时，会跳出switch代码，执行其他代码 在多层switch中时，break 会终止距离最近的switch 当多重循环嵌套的时候， break 会跳出当前那层循环 continuecontinue 结束本次循环 继续下次循环 （for、for....in、...
2021-12-06 20:23:39
1270
原创 while 循环
while 循环<script> while(循环条件){ 要重复执行的代码(循环体) }</script>跟if语句很像，都要满足小括号里的条件为true才会进入执行代码while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到 小括号判断条件，直到括号内条件不满足，即跳出循环需要具备三要素： 变量起始值 终止条件（如果没有终止条件，循环会一直执行，形成死.
2021-12-06 19:44:39
346
原创 JS- 分支语句
if 分支语句 if 语句有三种使用方法：单分支、双分支、多分支单分支：<script> if(条件){ 满足条件时执行的代码 }</script>括号内的条件为true时 执行大括号里面的代码小括号里面的条件若不是boolean类型时 会发生隐式装换转换为boolean类型双分支： <script> if(条件){ 满足条件时执行的代码 } else { 不满...
2021-12-06 14:42:36
462
原创 JavaScript 基础 - 运算符
运算符算数运算符 +(加)、-（减）、*（乘）、%（除） 、 /( 取余-开发中经常作为某个数字是否被整除)优先级：先乘除 后加减 有括号里面的先算括号里面的赋值运算符 = ：赋值 ，将等号右边的赋值给左边，要求左边必须是一个容器 +=：例 m += n 将m + n 的值重新赋值给 m 等同于 m =m + n -=、*=、%=、/= 同理一元运算符一元运算符，只需要一个操作数自增：...
2021-12-06 13:57:56
317
原创 JavaScript 基础
1、引入方式：1、内部形式：通过 script 标签包裹 JavaScript 代码 <script> alert('努力 奋斗') </script>2、外部形式：将 JavaScript 代码写在独立的以 .js 文件中，然后通过 script 标签的 src 属性引入 <script src="./my.js"></script>如果 script 标签使用 src 属性引入了.js 文件，那么 标签的代码会被忽略.
2021-12-05 20:17:28
396
原创 移动web-动画
动画可以不用鼠标触发，可以自动、反复的执行某些动画。属性： 动画名字参照css类选择器命名 动画时长和延迟时间别忘了带单位 s infinate 无限循环动画 alternate 为反向 就是左右来回执行动画（跑马灯） forwards 动画结束停留在最后一帧状态 linear 让动画匀速执行 使用1、定义：@keyframes 变量名{ from{ } to{ } ...
2021-12-05 09:50:39
135
原创 移动web-空间转换（3D）
立体呈现：使用3D转换代码就必须要给父亲添加3D转换的代码；1、3D坐标系一定要记住3个坐标轴取值的正反： X 轴 往右越大，是正值， 否则反之 Y 轴 往下越大，是正值，否则反之 Z轴 往里越大，是正值，否则反之 Z轴指向我们 2、3D位移 完整写法： transform: translate3d(x, y, z);只不过在很多情况下，我们经常喜欢分开写：transform: translateX(100px)...
2021-12-04 14:13:33
90
原创 移动web-线性渐变
background-image：linear-gradient(direction，color1,color2);direction为渐变终点， 渐变方向默认为从上到下，改变渐变方向：从左往右： background-image：linear-gradient( to right ,color1,color2);对角渐变（从左上到右下）background-image：linear-gradient( to right top ,color1,color2);...
2021-12-04 13:48:39
347
原创 移动web-transform（2D）
1、位移（translate）margin移动盒子会影响其他的盒子把其他的盒子挤开tranform不会影响其他盒子，不脱标，位移的值可以是 数值+px 也可以是百分比 ，百分比移动的是盒子自身的宽度。 transform: translateX(100%) translateY(100%); transform: translateX(100px) translateY(100px);2、旋转 （rotate）rotate（数值+deg）...
2021-12-04 13:29:36
123
原创 移动web-字体图标
1、字体图标 先在css里面引入字体图标库方法1 (重点)：标签<span class="iconfont icon-daohangdizhi"></span> 需要两个类名：iconfont icon-xxxx 第一个类名是说明盒子里的文字是字体图标 第二个类名是选择那个小图标方法2：unicode编码(了解) <strong>  &...
2021-12-04 13:03:43
132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人