- 博客(54)
- 收藏
- 关注
RSS订阅原创 数据仓库Pinia
getters：Getter 完全等同于 Store 状态的 计算值(相关值不变不会重新运行，取缓存中的值)。改变仓库数据的方式1：通过直接对仓库数据进行修改，因为仓库数据是响应式的，使用所有使用该数据的组件或者标签都会改变。actions：它可以异步同步的统一修改状态，之所以提供这个功能 就是为了项目中的公共修改状态的业务统一。改变仓库数据的方式2：将仓库数据解构赋值后通过toRefs或者toRef改变成响应式数据。名称，作为第一个参数传递，并将仓库导出。3.创建需要的仓库，使用。
2022-09-22 20:16:45
2019
1
原创 vue的hook（钩子函数）
ref将变量变成了一个对象，将数据存在对象的value属性中 然后通过监听value的改变 劫持value的setter和getter 然后它监听对象时 会将对象的所有属性进行遍历劫持 但是可能需求只需要改变对象中的某一个属性 而对象里面嵌套了很多层 这时候使用ref 就会造成性能的浪费 所以对于引用数据 一般使用reactive函数。3.toref：toref这个函数可以对对象的某一个属性进行单独的响应式设计（调用fm函数后x的值并不会变，y因为通过toref和obj.y关联了，所以y的值会改变）
2022-09-21 16:34:48
846
原创 插槽和组件的自定义事件
插槽主要是在组件中预留几个位置，后面再来添加需要的内容插槽的用法：单个插槽 多个插槽（多个插槽的使用就需要将slot命名 不然会出错）
2022-09-07 00:28:05
453
1
原创 生命周期函数
钩子函数: 生命周期函数 (c语言中有一类系统回调的函数然后执行业务 叫做钩子)在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数能否网络请求?能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的能否网络请求数据 然后设置到数据源中?不能设置到数据源中,因为这个钩子中 this还在创建这个在项目中干什么?只要不是用于页面渲染的操作都能做。
2022-09-05 00:37:18
393
原创 Vue相关面试题（1）
Angular是一个mvc框架，它与jquery不同，前者致力于mvc代码解耦，采用model、controller以及view方式去组织代码，而后者提供给你了很多APi函数，你可以不用写很多原生js去实现比较复杂的效果，比如说动画，$.animate。同时也会对视图view的监听，当DOM改变时，就会被监听到，实现model的改变，实现数据的双向绑定。Vue框架是用于构建用户界面的渐进式框架。框架：是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架适合的地方，框架会在合适的实际调用你的代码。..
2022-08-31 00:16:41
166
原创 条件渲染和循环渲染
v-if和v-show的功能是一样的 都是当变量值为true时显示 为false时隐藏 但是v-if隐藏是通过移除节点在节点树中的位置，而v-show是通过给标签添加display：none属性实现隐藏效果 就是说v-if是将标签从节点树中直接删除 而v-show是通过给标签添加属性实现的。v-show具有较高的性能消耗,常常用在频繁切换的模块中（虽然解决了消耗问题 但是因为虽然隐藏 但内容都在 所以会给内存造成一定的压力 一般用于需要频繁切换的模块中）...
2022-08-30 23:52:50
200
原创 样式绑定
v-bind指令绑定的class属性是一个对象 属性为类名 值为任意一个表达式 表达式会被判断为布尔值 当值为true时 对应是类名才会生效 否则不会生效。数组语法,这样写将始终添加 deng，但是只有在a1 a2是真值时才添加对应类名。v-bind:class 指令也可以与普通的 class 属性共存。通过class绑定实现开关灯样式。...
2022-08-30 19:48:34
300
原创 Vue的基本指令和属性绑定
7.v-cloak指令在运行到vue代码后就会被删除，可解决因为浏览器执行顺序而造成的闪屏问题（浏览器会有一瞬间的{{}}代码为编译的样式，执行到vue才会被识别编译） 通过给div设置v-cloak属性，将其设置为display：none运行到vue代码时 该属性就会被删除 样式也就失效了。8.引入vue后 就可以使用vue实例对象，基本语法，el是选择器，data是内容，需要注意的是vue底层将data对象中的内容都复制到了vue对象的下面，网页使用的vue内容也是来自vue对象 而不是data。...
2022-08-29 20:13:37
281
原创 模块化
npmi模块名字x1模块名字x2模块名字x3--save//把模块x1x2x3这个三个模块下载到项目安装路径(就是当前项目内部的node_modules)npmi模块名字x1模块名字x2模块名字x3-g//把模块x1x2x3这个三个模块下载到全局安装路径。去当前项目中的node_modules文件夹中找fs文件夹中的package.josn中的main字段对应的路径然后引入。npmi模块名字x1模块名字x2模块名字x3。nodejs中有3种模块。...
2022-07-29 18:46:55
149
原创 __dirname和URL模块
varobj=url.parse(网址str)//obj.pathnameobj.query。__dirname文件（这个js文件）当前所在的目录（路径到文件上一级）__filename文件的目录（路径到文件这一级）将网址分割为多个部分以对象的形式返回方便使用。...
2022-07-28 19:17:35
448
原创 node fs模块常用方法
fs.appendFile(__dirname+"/src/b.txt","马上放学",(err)=>{注意fs.rename的bug==>oldpath,newpath不是同一个根盘操作会失败。node.js中把一系列相同类型的功能封装到相同的模块中。写入文件信息会将原来的文件内容覆盖函数会返回运行失败信息。创建并写入文件信息如果文件不存在就会创建。删除文件如果删除遇到权限问题会删除失败。如果文件夹不存在就会报错。读取文件buffer。对文件进行操作的模块。...
2022-07-28 19:07:29
230
原创 网页加载流程&&各种路径之间的区别
浏览器是怎么加载网页的?1.1浏览器地址栏输入网址访问会请求一次服务器服务器会返回一个数据包就是网页代码(html格式的文本文档)1.2浏览器开始去运行解析html文本(此时还没有外部图片,js,css,字体库资源)1.2.1解析时遇到了img标签的src属性会异步的开始再次网络请求服务器,服务器返回数据包(图片编码)然后渲染出来1.2.2解析时遇到了link-href会异步的开始再次网络请求服务器,服务器返回数据包(css编码)然后加载。...
2022-07-28 19:02:05
307
原创 后端将资源发送给前端
2.创建一个服务器对象回调函数不会直接运行会在用户每次访问当前计算器的IP的8081端口。将服务器挂起后访问该网页需要注意的事网址为IP地址+端口号（想要跳转的页面自己设置）1.引入node自带的模块http这个模块可以调用函数来创建后端服务器。node运行成功后访问可以访问到图片。...
2022-07-27 19:31:03
2975
原创 了解网页中的绘制技术
媒体标签(视频、音频、图片canvas在浏览器中是一张图片)内容不会显示到网页上canvas元素自己属于图片有自己的编码有自己的宽高(就是行内属性定义的宽高通过style设置的宽高是改变了原本的宽高可能会造成图片失真)......
2022-07-22 19:23:02
821
原创 页面渲染流程
冰元素document.createDocumentFragment()它自己不会添加到文档树中用于渲染但是它的子代元素都会添加进去它会自动融化(删除)将操作执行完成后一次添加到页面中只回流了一次避免了高频重绘回档。程序执行时常常会操作页面所以常常引起重绘/回流太过频繁就会造成页面性能不好==>页面卡迟缓手机发烫。注意呈现树中有的文档树中一定有文档树中有的呈现树中不一定有比如隐藏的元素文档树中有呈现树中就没有。所以操作页面时避免高频重绘(通过冰元素)或者使用框架(MVVM)...
2022-07-21 01:29:20
107
原创 事件链（冒泡目标捕获）
e.stopImmediatePropagation()不止会阻止事件冒泡还会阻止兄弟级别事件的触发比如一个元素绑了两个事件在前面事件调用这个函数后面事件就不会被触发。添加到事件上可以阻止事件在往上冒泡后面在捕获阶段执行的事件就不会被触发只能阻止向父节点冒泡。大多数事件默认在冒泡阶段被触发也就是说事件捕获阶段一般不会被触发目标节点被触发进入冒泡阶段才会按冒泡顺序执行事件。系统默认事件标签自带的事件比如a标签的点击事件可以在给a标签添加其他事件会先执行添加的事件再执行默认事件。...
2022-07-21 01:27:17
262
原创 事件对象
/获取按下对应键位的keyCode值(和ASCll值差不多只是多了特殊键位的值)e对象中还可以判断各种组合键是否按下。//pageYpageX获取点击位置的XY坐标包括滚动条折叠的相对于body标签。//movementXmovementY在规定时间内坐标XY值变化的差值会为负数。//offsetYoffsetX相对于元素自己的坐标相对于父元素。//mousemove移动事件规定时间内位置发生变化就会打印。//获取value值。...
2022-07-18 20:27:04
53
原创 事件
事件元素在某种状态(浏览器实现的)达成时要执行的提前设计好的程序我们称之为事件句柄。2.事件类型怎么触发（比如鼠标点击（onclick）鼠标经过键盘按下）添加一个监听器(同一个元素可绑定多个监听器触发后按注册顺序依次执行)3.事件处理程序(handler)通过一个函数赋值的方式完成。listener事件处理函数事件发生时会调用该监听函数。1.事件源事件被触发的对象（谁被触发）属性绑定(只能绑定一个函数)行内式(将事件写在标签内)...
2022-07-18 18:47:21
115
原创 元素的垂直居中
4.模拟表格法（IE7及以下不支持）将容器设置为displaytable，然后将子元素也就是要垂直居中显示的元素设置为displaytable-cell，然后加上vertical-alignmiddle来实现。5.transform将元素的XY偏移数值全部设置为-50%（transformtranslateX(-50%）transformtranslateY(-50%);1.line-height垂直只有一行或几个文字的文本，将文字的行高和文本容器高度设置为一样。6.css3的box方法。...
2022-07-18 09:44:00
77
原创 获取元素的方法
通过关系获取节点 大多数父节点和父元素是同一个 但是html标签没有父元素(null) 有父节点(document) 因为html外层没有元素了 document是节点不是元素标签
2022-07-14 16:24:12
272
原创 Promise
Promise是一个ES5就出现的方法 ES6将它直接写入标准 Promise是一个构造函数 创建一个数据容器 Promise主动产生数据，不用手动添加 Promise对象的then函数是一个异步非阻塞函数 then函数的返回值是一个新的promise对象，如果then传入的回调函数返回值是一个promise对象 那么就是它，如果不是，就会把函数的结果包装为一个生成了数据的promise对象...
2022-07-13 22:52:02
49
原创 事件循环
任务分为同步阻塞任务 同步不阻塞任务 异步阻塞任务 异步不阻塞任务 异步任务的队列优先级：异步宏任务先执行 然后执行异步微任务 这里出现情况是因为两个任务不在一次事件循环中(任务开启后 内部又产生了新的任务) 事件循环过程： 先执行第一轮宏任务(脚本)中的代码:同步～微任务～下一轮宏任务中的代码 宏任务中:同步~微任务~下轮排队的宏任务 下轮排队的宏任务中:执行同步～执行微任务～遇到宏任务继续排队～执行下轮排队的宏任务
2022-07-13 22:49:02
45
原创 类
//js是什么语言 //js是一个基于面向对象设计的单线程的静态脚本语言 //基于面向对象：本质没有面向对象的方法和一些特点，但是按照自己的语法特征进行了相识的设计 //单线程：只能同时执行一个js代码 //静态：有错误不会立即返回 只有执行遇到才会报错 //脚本语言：具有嵌套特征 直接在代码中嵌套新代码 //类的语法 类名最好大写 好做区分 //声明类 class Person {} let p1 = new Per
2022-07-12 19:51:17
79
原创 箭头函数和模块化
定义式 声明式 不是声明式就是定义式 声明式是function开头 箭头函数 箭头函数里面的this总是指向最靠近的function 内部的this var fn = () => {}; 函数执行体只有返回值时 可以将大括号和return省略 var fn = () => this; 形参只有一个时 可以将小括号省略 var fn = a=> a * a; 等价于 var fn = function (a)
2022-07-12 19:42:58
170
原创 ES6字符串 数组 对象新方法
ES6之前判断字符串是否包含子串,用indexOf方法, ES6新增了子串的识别方法 includes():返回布尔值,判断是否找到参数字符串。 startsWith() :返回布尔值,判断参数字符串是否在原字符串的头部。 endsWith() :返回布尔值, 判断参数字符串是否在原字符串的尾部。 repeat()返回新字符串 将新字符串重复指定次数返回 padStart() padEnd()返回新字符串 表示用参数字符串从头到尾{或从尾到头}补全原字符串
2022-07-12 17:23:55
290
原创 symbol&&Map&&Set
es5中基本数据:null undefined number string boolean es6新增数据：symbol 生成一个独一无二的数据 es6出的新数据容器：数据是二维数据的形式，可以存任何数据 Map没有创建的语法糖 取数据 存数据 其他方法 扩展运算符购物车案例 只有大概思路...
2022-07-12 17:15:06
88
原创 解构赋值
1.对象模型 2.数组模型 举个例子 解构赋值允许指定默认值(当结构赋值找到的结果全等于undefined时 变量会取默认值 有值就会优先取找到的值 特别注意 null也不全等于undefined 也会取到值) 最后需要注意的是解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错...
2022-07-08 19:45:00
524
原创 var&&const&&let
特点：1.可以声明不赋值 2.可以先访问在声明（隐式提升） 3.可以声明相同的变量名 特点： 1.可以声明不赋值 2.没有隐式提升 3.不可以在一个作用域声明相同的变量名 console.log(n)//报错 没有隐式提升 let n=200 console.log(n) es5代码块没有作用域 但是let可以将一个块封装成一个作用域 let a =
2022-07-08 16:30:49
119
原创 ES6相关面试题
1.浏览器内核有哪些浏览器要渲染出给用户看 必须加载html编码和js脚本 渲染引擎渲染页面的UI和js执行引擎操作内存 就是浏览器的重要组成部分：内核 根据不同的浏览厂商 他们使用了不同的内核 内核的程序是很难实现的 根据我的了解有一些内核是公司自己实现的 有一些是直接用 比如： 1.IE浏览器内核：Trident内核（IE内核） 2.Chrome浏览器内核：Chrome内核，以前是Webkit内核 现在是Blink内核 3.Firefox浏览器内核：Gecko内核（Firefo
2022-07-08 11:48:58
170
原创 函数的方法
函数声明 function fn() {} //直接声明一个函数 可以被提升函数定义 var fm = function () {}; //不会提升函数 必须定义完才可以使用 var obj = { fn1: function () {}, };函数自调用 只要不让function开头 都可以执行自调用 前面可以是+ - ！各种符号 (function fn2() { console.log(111); })();
2022-07-07 16:59:29
78
原创 原型对象及使用
原型对象：存在于构造函数的prototype，它的属性和方法可以被"实例化"对象继承 (通过new进行实例化对象) 原型链：对象的属性__proto__指向构造函数的prototype 最终原型Object.prototype,原型链的重点为null 对象的属性，自己有优先使用，没有沿着原型链逐层查找 1.prototype是函数才有的属性，对象没有，__proto__是每个对象都有的属性 2.prototype属性可以给函数和对象添加可继承的方法属
2022-07-07 16:52:04
65
原创 this指向问题
1.全局下的this都指向Window 2.方法调用中 谁调用this指向谁 找不到调用者就是window 3.构造函数中this指向构造函数的实例 new 调用函数 结果一定是引用数据类型 步骤一:在函数第一行执行创建this 步骤二:给this分配一片地址空间 让this指向这片空间 步骤三:执行其他语句 步骤四:将this的地址空间返回...
2022-07-07 16:43:17
40
原创 运算符&&操作符
delete--------true false typeof--------number string undefined function object boolean in---------true false in:判断某属性在不在某对象中 instanceof：能不能实例化类型（new）------true false > < >= true
2022-07-07 16:39:02
132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人