Xaire-优快云博客

原创 vue3教程笔记

只适用于对象（数组或者内置对象），创建的对象都是js的proxy。属性下暴露内部值，模板中访问的。选项式的写法基本和vue2一致。：它会被自动解包，让使用更简单。会返回一个包裹对象，并在。则可以接受任何值类型，ref 时不需要使用。

2023-03-23 08:26:41 166

块元素独占一行（display:block(可以设置宽高)/table,div\h1\h2\table\ul\ol\p等），内联元素可以换行，（display：inline（行内元素，可以换行，不可设置宽高）/inline-block（行内块元素，可以设置宽高也可以换行）,span\img\input\button）。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。fixed固定定位，常用于弹窗等。

2023-03-09 09:54:32 487

原创前端页面性能

提升前端页面性能的方法

2023-03-04 20:45:55 689

原创 nginx知识点，~标识的意思

一.概念：1.Nginx是一个高性能的HTTP和反向代理服务器软件。专为性能优化而开发。2.反向代理1）.正向代理：通过代理服务器访问目标网址2）反向代理：由代理服务器根据请求转发到对应的真实服务器，然后返回响应。对外暴露代理服务器地址，隐藏真实服务器IP地址。代理和目标服务器，对于客户端就是一个服务器。3.负载均衡：把多个请求平均的分发到多个服务器上。（提高请求的并发量）4.动静分离：把动态页面和静态页面分别由不同的服务器来解析，以加快解析的速度。降低了原来单个服务器的

2020-05-20 00:32:51 3298

原创 vue中devtools的安装使用

npm install -g @vue/cli //安装最新版本的vue-cli脚手架 @vue/cli 3.0以上就可以（@vue/cli 4.3.1）vue -V //安装完成后，用这个命令可以查看到版本执行vue ui 去创建图形化界面，一路按照界面选择根据需求就可以配置了。配置完成后进入任务选项卡，右上角有个 devtools,点击会自动跳转到chrome插件的安装地址。...

2020-04-11 16:40:17 751

原创合并对象id相同的两个数组对象

var arr2=[{id:1,name:'23'}]var arr1=[{id:1,car:'car2'}]const combined = arr2.reduce((acc, cur) => { const target = acc.find(e => e.id === cur.id);console.log(target) if (target) { Object...

2020-03-30 18:03:24 4180

原创 uni-app实现购物功能模块

参考资料：uni-app官网1.选用工具HBuilderx快速创建uni-app项目。2.运行——>选择浏览器运行。等待编译及相关依赖安装完成后，浏览器会自动启动显示页面。3.自定义顶部导航栏部分，官网资料框架配置部分，配置pages.json的navigationStyle选项为“custom”4.在主页面实现顶部导航组件和下方内容中的购物功能5.实现添加商...

2020-03-25 11:14:44 2258

原创 nodejs的server实时响应工具supervisor

npm install -g supervisor安装supervisor把node命令换成supervisor app.js执行app.js文件后保存，node就会自动执行，不用再重新运行node app.js就可以得到相应的结果...

2020-02-21 22:23:16 190

原创 nodejs模块使用——http、url

1.安装插件在vsCode中安装插件Node Snippets后，有node提示输入node根据提示文本选择node-http-server可以快速生成请求代码var http = require('http');http.createServer(function (request, response) { response.writeHead(200, {'Conten...

2020-02-21 22:05:17 318

原创 nodejs的运行环境及demo

1.http://nodejs.cn/download/下载稳定版并安装安装完成后再cmd窗口中执行 node -v，成功显示版本则安装成功2.安装vscode编译器https://code.visualstudio.com/新建文件(node的文件所在目录路径中没有空格和特殊字符)app.jsconsole.log("hello nodejs")3.ctrl+`...

2020-02-21 18:36:16 331

原创 html5中自定义属性data-*应用

参考：jqueryAPI文档解释技術分享 html的data-*属性data-* ：允许你对于一个HTML元素绑定自定义的属性。HTML5 中的 data-* attribute 屬性<div id="slider" data-type="slideShow"> <img class='photo' data-item="1" data...

2019-12-07 17:48:56 556

原创 git快速创建本地库并从github上clone仓库

参考：廖雪峰官网1.下载安装git:https://git-scm.com/download/win；下载完成后双击Git-2.24.0.2-64-bit.exe默认安装（注意安装路径不要有空格和特殊字符）2.安装完成后，在应用程序中找到git Bash,打开窗口，依次输入下方命令mkdir localRepository 创建本地库的文件cd localRepo...

2019-12-02 20:50:18 720

原创利用...数组扩展快速交换数组内元素

/**将数组末尾元素交换至数组首位*/function rollToRight(arr){ let newArr = [arr[arr.length-1],...arr.slice(0,arr.length-1)]; return newArr;}/**将数组首位元素交换至数组末尾*/function rollToLeft(arr){ let newArr...

2019-11-17 11:43:03 179

原创 webpack4——css中引用图片

webpack.config.js中配置module module:{ rules:[ { /*打包css需要工具style-loader和css-loader *npm install style-loader --save-dev *npm ins...

2019-11-12 17:00:28 582

原创 webpack4——打包html文件

将index.html文件放在src文件夹中在webpack.config.js中配置：1.consthtmlPlugin=require('html-webpack-plugin');2./*需要npminstall--save-devhtml-webpack-plugin*/3.plugins:[ new htmlPlugin({ ...

2019-11-12 15:47:25 299

原创 webpack入门——打包css

webpack4会默认压缩js文件1.新建index.css文件2.在entry.js中引入index.css文件在webpack.config.js中配置moudle module:{ rules:[ { test:/\.css$/, use:['style-loa...

2019-11-12 15:08:55 176

原创 webpack入门——配置出入口和服务热更新

配置完成后，直接输入npm run server 启动服务，再浏览器中输入网址即可，具体配置参考下方新建文件webpack.config.jsconst path=require('path');module.exports={ entry:{ entry:'./src/entry.js',/**入口文件地址**/ entry2:'./src/...

2019-11-09 18:12:49 206

原创 webpack入门——安装与Demo

安装参考地址npm install --save-dev webpacknpm install --save。如果你在安装一个用于开发环境目的的 package 时（例如，linter, 测试库等），你应该使用npm install --save-dev查看webpack和node的版本：webpack -v //如果webpack是v4+ 版本，你还需要安装CLI...

2019-11-09 17:47:50 210

原创利用Element+vue实现的点餐前端系统

参考教程：https://jspang.com/detailed?id=28#toc21 （若是链接失效，进入https://jspang.com可以找到相关教程）参考代码地址：https://github.com/shenghy/AwesomePOS参考技术：https://element.eleme.cn/#/zh-CN/component/installation后台系统参考代码...

2019-11-06 17:50:55 5451 2

原创解决：vue打包后无法在本地正常运行

解决：vue打包后无法在本地正常运行运行打包命令：npm run build生成了dist文件夹点击 index.html，浏览器显示空白，原因是打包路径配置成了绝对路径：assetsPublicPath:'/',解决办法：在config/index.js文件中将打包路径配置为相对路径：assetsPublicPath:'./',//在路径前面加一个点...

2019-11-06 17:36:10 7556 2

原创冒泡排序、插入排序、希尔排序、快速排序比较

冒泡排序O(n^2) =选择排序O(n^2)> 插入排序O(n^2)>希尔排序O(n^(3/2))>快速排序O(nlogn)详解参考https://www.jianshu.com/p/f1f2dc978762https://www.jianshu.com/p/8940e7030ff4冒泡排序：从左往右比较并交换最大值得位置，将最大值放在最右侧；循环这一操作选择排序：...

2019-10-31 16:08:08 973

原创冒泡排序算法

从左向右遍历，依次比较找出最大值，最后通过交换，把最大值放置最右侧<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> ...

2019-10-31 15:12:02 169

原创树结构——javascript实现删除及其他方法

非线性结构树的术语：节点的度——节点的子树点个数树的度——树的所有节点中最大的度数任何一颗树最后都可以用二叉树（每个节点的子节点最多只有2个）模拟二叉搜索树（BST, Binary Search Tree）,又称为二叉排序树或二叉找树查找效率高<!DOCTYPE html><html> <head> &l...

2019-10-14 18:01:06 1180

原创算法面试题---判断数字是否为质数

判断数字是否为质数方法一：//判断传入数字是否为质数//质数特点:只能被1和它本身整除function isPrime(num){ for(var i=2;i<num; i++){ if(num % i == 0){ return false } } return true}方法二：提高了算法效率一个数n的分解的两个因子，一定会一个小于sqr...

2019-10-13 16:42:38 770

原创哈希表——js实现哈希表

哈希表：基于数组，不能重复且无序将名称及单词与下标或数字对应起来1.将字母或单词转换成下标或数字（hashCode）——过程讲解：方案一：数字相加——数组下标太小方案二：幂的连乘——数组下标太多方案改进：哈希化，例如取余操作冲突：哈希化后依然有数组下标会重复解决冲突的两种方案：1.链地址法（拉链法）2.开放地址法一：链地址法将冲突（产生冲突的元素一...

2019-10-13 15:56:56 815

原创集合与字典

字典：一一对一，键值对的储存方式。key:value，key不可以重复且无序，value可重复Dictionary/dict/HashMap&TreeMap集合：无序，不能重复的元素构成；常见实现方式哈希表<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...

2019-09-13 18:31:08 279

原创双向链表的js实现

双向链表：既可以从表头开始遍历也可以从表尾开始遍历<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>双向链表</title> </head> <body> <script> //封...

2019-09-12 17:51:51 343

原创 vuejs中的watch选项监控数据的变化

1.watch写在Vue构造器内部2.直接使用vm.$watchapp.$watch('temperature',function(newVal, oldVal){})<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=...

2019-09-11 15:44:14 885

原创 vue事件绑定的3种书写方式

参考：https://jspang.com/posts/2017/03/26/vue2-3.html#%E7%AC%AC3%E8%8A%82%EF%BC%9Amethods-option-%E6%96%B9%E6%B3%95%E9%80%89%E9%A1%B91.$event传递点击鼠标的一些事件及属性<!DOCTYPE html><html lang="en"&...

2019-09-10 12:02:35 2082

原创单向链表——JS实现链表的常见操作

链表的插入和删除操作时，时间复杂度可以达到O(1)，但是访问慢只能从表头开始访问。数组的查找快，可以直接通过下标访问，但是删除和插入数据效率低。insert方法图解<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>LinkList...

2019-09-06 12:29:24 195

原创格式化浮点数的数字为千分位：js实现数字自动增加

js传值：index.jsconst indexData={ times: 88888899.89, }export {indexData}components的代码:indexNumber.vue<template lang="html"> <div class="indexnavbox"> <spa...

2019-09-01 17:38:05 740

原创队列（Queue——先进先出（FIFO First In First Out）

栈和队列都是一种受限的线性结构队列是数据从表的后端rear进行插入，表的前端front删除操作。应用场景：打印队列、线程队列基于数组实现的Demo<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>封装队列基...

2019-08-29 11:42:46 1786

原创栈——后进先出（LIFO：last in first out）

栈：后进先出（LIFO：last in first out）例如：自助餐中的自取餐盘面试题目：有六个元素6 5 4 3 2 1 的顺序进栈，哪一个不是合法的出栈序列：A. 5 4 3 6 1 2 B.4 5 3 2 1 6 C.3 4 6 5 2 1 D.2 3 4 1 5 6解析：进入栈的顺序保持6 5 4 3 2 1 ，3出栈所以栈中现在是从栈底-->栈顶依次为6...

2019-08-24 10:48:01 3354

原创数据结构与算法的理解

数据结构：计算机中，存储和组织数据的方式（满足方便放入数据和取出数据）常见的数据结构：了解真相，才能获得真正的规则！！！哈哈小码老师的金句算法（Algorithm:解决问题的办法/步骤逻辑）：有限指令的集合，接受输入并产生输出，且最终结果。不依赖于语言。简单的来讲算法就是用语言写出来的解决问题的逻辑代码。举栗子！二分查找法解决100万里的高架线中出现故障的线路...

2019-08-22 17:30:57 183

原创 float元素对父元素高度的影响，img、a及浏览器之间兼容性问题

问题一：子元素float后导致父元素高度不能自适应计算解决办法：. 浮动会让子元素脱离文档流，当所有元素都脱离时，此时父元素没有设置高度，导致父元素高度为0 给父元素添加overflow:hidden;会清除所有子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会裁剪问题二： img是内联元素，但是其本身有宽...

2019-08-22 12:12:21 528

原创解决float属性影响后续元素排版的问题

一：解决后续元素不会另起行显示： 1.在该元素后面新加div 2.并设置clear:both属性二：早期版本的IE在float中的BUG： 1.块元素 2.float: left; 3.margin-left不为0 margin-left会double 解决办法是：...

2019-08-19 15:44:18 1742

原创学习视频时get到的东西

friends——学英语（带字幕看一遍，不带字幕看一遍，盲听）参考——W3school成长，不断增加自身的不可代替性成功转行——需要3年的准备时间主流浏览器引擎前缀:-webkit- (谷歌, Safari, 新版Opera浏览器等) -moz-(火狐浏览器) -o-(旧版Opera浏览器等) -ms-(IE浏览器和Edge浏览器)推荐 html中用双引号""...

2019-08-19 15:41:10 121

转载 CSS弹性盒子布局flex

使用flexbox布局的文档区域称为flex容器。要创建Flex容器，我们将区域容器的display属性值设置为flex或inline-flex。一旦我们这样做，该容器的直接孩子就会成为弹性物品。与CSS中的所有属性一样，定义了一些初始值，因此在创建Flex容器时，所有包含的flex项将按以下方式运行。display: flex|inline-flexflex-direction: row...

2019-06-15 16:48:52 196

原创 javaScript中的变量提升

全局变量提升JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。console.log(a);var a = 1;上面代码首先使用console.log方法，在控制台（console）显示变量a的值。这时变量a还没有声明和赋值，所以这是一种...

2019-05-29 15:20:42 146