- 博客(32)
- 收藏
- 关注
RSS订阅
原创 从底层了解Vue3
Vue3带来了什么（新特性）更快1. 重写虚拟dom,diff算法优化回顾Vue2的vdom：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到所构建的真正的DOM树上，视图就更新了vue2.x的diff算法叫做全量比较，顾名思义，就是当数据改变的时候，会从头到尾的进行vDom对比，即使有些内容是永恒固定不变的,它也会一一遍
2021-02-25 15:51:51
838
原创 PWA桌面应用开发
什么是PWAProgressive Web App, 渐进式web应用程序，简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。PWA 的主要特点包括下面三点：可靠 - 即使在不稳定的网络环境下，也能瞬间
2021-11-19 16:52:36
3832
原创 第一章：TypeScript
了解TypeScriptTypeScript是Javascript的超集,Typescript = Type + ECMAScript + Babel-Lite为何使用TypeScript增加了代码的可读性和可维护性减少运行时错误，写出的代码更加安全，减少 BUG享受到代码提示带来的好处重构神器从开发效率上看，虽然需要多写一些类型定义代码，但TypeScipt能做到智能提示，智能感知bug，我们不必运行项目时才发现错误，我们也可以给那些没有TS类型声明的稳定模块写声明文件
2021-07-15 10:38:33
191
原创 Vue3中组件的挂载及调用
在Vue2.X中，我们通过Vue.prototype.$dialog = dialog的方式挂载组件，并使用this.＄xxx的形式通过函数调用组件，如this.＄dialog({})而在Vue3.X中，组合式API没有this，不过新增了globalProperties属性，代替了Vue.prototype查看Vue3.X官方文档（https://www.vue3js.cn/docs/zh/api/application-config.html#globalproperties）// 之前(Vue
2021-04-06 16:13:14
8416
2
原创 vue-cli3+ 打包至非根目录静态资源(图片，字体文件)路径加载错误，导致不显示，丢失
缘由当开发vue项目时，ele字体图标显示无任何问题，然而当项目打包部署上线时，图片，字体文件等静态资源就丢失了，通过分析是因为项目打包时是非根目录，通过publicPath进行了配置，静态资源没有匹配到publicPath，因此打包出来的路径错误，导致页面不显示资源分析由于是打包至非根目录下，我们需要对webpack中的publicPath进行配置，同时记得修改router.js中的base地址// 打包至非根目录下// vue.config.jspublicPath: "/tpls/vue/
2021-03-03 18:19:53
2902
3
原创 Vue3写法总结
组件实例中的使用setup所以Vue3中API的入口和出口，Composition API都在写在其里面，Options API可以共存写在其中，但推荐使用全Composition API的写法setup在beforeCreate,create之前创建，因此没有this在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用setup有两个参数，第一个是props，用于接收传递的属性对象，可以通过watchEffect监听，第二个参数是context,其包含at
2021-02-26 14:13:20
20067
3
转载 js中原型，原型链的理解
引入相信大家都使用过构造函数，它可以很方便的让我们构造出一个对象上所包含的属性和方法，并通过new关键词把我们所需要的对象构造出来，但当我们用到一些公共方法时，我们可能会遇到许多问题。举个例子：我们通过构造函数创建一个小狗的对象，并添加属性和方法，并实例化出来我们知道，小狗对象只有名字与年龄是不同的，而方法say是每个实例化小狗对象都拥有的，不需要做改变。但是这种写法所实例化的过程是这样的：而我们的想要的效果是下面这样的：在使用new关键字，每次创建一个对象的时候，都会在内存开辟一个新的空间，我
2020-09-09 10:49:35
139
原创 快速掌握js中闭包的理解与应用(面试中如何回答闭包)
闭包：首先讲讲闭包的定义：在我看来，闭包有三大特点。一是函数嵌套函数，二是外部函数可以访问内部函数的变量，三是参数和变量不会被垃圾回收机制回收。所以简单来说我认为闭包可以理解为是连接函数内部和函数外部的一座桥梁。然后讲讲闭包的原理：为什么会形成闭包呢，因为当内部函数被返回至外部并保存时，一定会形成闭包。而关于闭包为什么能访问内部函数的变量，且不会垃圾回收机制回收，是因为闭包会产生原来的作用域链不被释放。我们从JS预编译的角度来讲，可以知道当外部函数执行的前一刻，内部函数被
2020-06-06 20:13:53
10140
原创 前端性能优化-图片
前端性能优化的目的:从用户角度而言: 优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。从服务商角度而言: 优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。我们先了解图片大小的计算：对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 * 1 * 4 / 10
2020-05-31 22:26:59
187
原创 JS For循环中嵌套setTimeout()方法的理解
思考：先上代码，我们可以看一遍，思考一下答案，对比两种方法的区别。for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1)}for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1)}答案： 3 ，3 ，3 和 0 ，1 ，2解析：我们通过在每一个阶段加入 console.log(i) 来更深层次的理解 js 的
2020-05-22 17:32:07
2603
原创 js中数组去重的几种实现方式(区别)
// 1,2,3,'a','2',null,NaN,undefined,{a:1},true 10项 var arr = [3,'a', 1, 2, 2, 3, '2', 3, null, NaN, null, NaN, undefined, {size:1}, undefined, true, {size:1}, true]; // 方法一：利用splice方法去重 // 说明：用双层for循环嵌套，用每一项与另外得其他项一一对比，若相同则删除后...
2020-05-18 14:12:41
276
原创 js中如何判断引用值为数组(几种不同方式的详解)
回顾在JavaScript中，数据属于Object类型，也属于引用数据类型。我们可以通过typeof来判断该数据是否为引用类型，但无法判断其为数组。实验数据： var a = []; var b = {};依据原型判断通过原型上的构造器 constructor 判断说明： 每一个实例对象一个来自原型上的 constructor 属性，它指向构造函数，即存放着创建当前对象的构造函数 console.log(a.constructor) // ƒ Arr
2020-05-16 17:43:46
207
原创 js中深浅拷贝的实现方式(含图解原理)
关于赋值，浅拷贝，深拷贝提前熟知：栈内存（stack）：会自动分配的内存空间，它由系统自动释放堆内存（heap）：动态分配的内存及大小，不一定会自动释放基本数据类型：String, Number, Boolean, undefined, null, Symbol引用数据类型：Object, Array, Function在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆
2020-05-15 22:32:21
1863
2
原创 CSS实现元素水平垂直居中的几种方式
让不定宽元素垂直水平居中的几种方法gridflexpositiontranslate演示环境代码用两个div作为父元素，实现子元素div的水平垂直居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...
2020-05-06 16:38:41
289
原创 快速入门，理解，使用 axios请求
为什么选择axios区分Ajax,Jquery Ajax,Fetch, AxiosAjax:ajax自然不必说，最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。Jquery Ajax：jQuery框架中的发送后端请求技术，对原生XHR的封装，除此以外还增添了对JSONP的支持。随着三大主流...
2020-05-05 19:01:32
230
原创 关于React中DOM,虚拟DOM及diff算法的理解
前言初次学习React，最先接触的关键字应该就是响应式UI，虚拟DOM，组件本文中，我们来讲讲Dom，虚拟Dom，以及diff算法的理解。DOMDOM的全称是“Document Object Model”,即文档对象模型。通过这个截图我们可以发现，其实简单点我们可以将DOM理解为一棵树，一颗倒长的树。也可以说是一颗家谱树，而家谱树本身就是一种模型，其典型用法是表示人类家族谱系。它能很容...
2020-04-25 19:20:16
454
原创 uni-app中微信小程序端使用腾讯地图API实现定位服务(超详细教程)
在目前的小程序开发中，为了更好的用户体验，以及信息推荐，我们难免要获取用户的授权拿到定位。所以在uni-app的学习中，我决定将实现的步骤详细地记录下来，希望可以帮助到更多的人！使用到的方法及api:实现这个功能时，最好先看一遍官方的文档uni.authorize(OBJECT) 向用户发起授权请求 点击查看uni-app官方文档qqmapsdk = new QQMapWX({ }...
2020-04-18 22:53:22
15072
3
原创 快速入门vuex带案例说明（超详细易理解）
理论关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。VueX中的核...
2020-04-16 23:22:44
555
1
原创 uni-app中的分类页面(仿京东分类页面)(scroll-view的使用)
京东效果图：代码效果图：说明：实现图中所示的的左侧标签栏可上下滑动，右侧区域为对应左侧标签展开的图片文字详情说明，也具备上下滑动的功能scroll-view可滚动试图区域本文着重使用”scroll-y“即纵向滑动<template> <view class="classify"> <!-- 左侧标签区域 --> <scroll-...
2020-04-15 18:49:04
5483
原创 阿里云CentOs中Vue项目的上线（node+express+pm2）
通过node创建web服务器1. 创建node项目创建一个文件夹初始化包管理配置文件npm init -y2. 安装express， 通过express快速创建web服务器安装expressnpm i express -S3. 新建app.js入口文件，进行如下配置const express = require('express') // 创建 web 服务器 c...
2020-04-11 17:40:55
243
1
原创 阿里云CentOs搭建node环境以及配置API接口服务器
部署后端API接口服务器到阿里云上前提：阿里云CentOs已安装node.js，npm安装方法可查看我的另一篇文章：点击跳转可通过查看版本号确认是否安装成功：将已编写好的后端服务器文件夹通过xftp传输到阿里云上安装依赖包进入到刚刚传输到阿里云的服务器的目录（即app.js所在的文件夹）npm install运行入口文件安装完依赖后，使用node运行app.j...
2020-04-10 16:25:53
625
原创 阿里云CentOs8安装node,pm2,mysql数据库以及运行.sql文件
安装node.js先把yum更新到最新版本yum -y update我们将使用最新源代码构建Node.js，要进行软件的安装，需要一组用来编译源代码的开发工具yum -y groupinstall "Development Tools"进入/usr/src文件夹，这个文件夹通常用来存放软件源代码cd /usr/src从 Node.js的站点 中获取压缩档源代码, ...
2020-04-09 22:40:35
693
原创 VUE中的全局时间过滤器（格式化时间）
全局时间过滤器相对时间过滤器,把时间戳转换成常用时间代码如下：将过滤器命名为dataFormat传入一个为处理的时间参数 orgiinVal获取日期对象，使用以下获取年月日时分秒的方法使用padStart()方法用于时间补0，即不足2位用0补充将时间进行格式拼接返回出来Vue.filter('dateFormat', function (originVal) { const...
2020-04-07 17:09:06
594
原创 Vue中的使用axios封装的全局拦截器
使用axios，并挂载到全局以下配置在main.js中其他页面在使用axios的时候直接 this.$axios就可以了import Axios from 'axios';Vue.prototype.$axios = Axios;配置全局请求拦截器使用如下方法axios.interceptors.request.use(config=>{},err=>{})报错时通...
2020-04-07 16:51:33
933
2
原创 uni-app在小程序，h5端，安卓端的打包发布
在小程序端的打包发布1. 登录微信公众平台，如图所示，打开开发》开发设置》AppID（复制）2. 将复制的AppID粘贴到配置文件manifest.json中3. 如若需要发布，则需要修改api的接口修改为线上的接口域名，并在微信开发设置的服务器域名中配置（socket合法域名）4. 修改完成后重新编译，在微信开发者工具点击上传*我们会遇到如下提示，需要把字体图标文件转至线上...
2020-04-02 11:46:16
1243
原创 uni-app开发微信小程序封装异步请求
在uni-app项目中如需经常发起网络请求，可以为uni.request方法进行二次封装，使代码更加简洁，便于后期修改维护原无封装代码：onLoad() { // 在页面加载时调用 this.getSwipers() }, methods: { getSwipers () { // 发送请求 uni.request({ url: 'http://...
2020-03-30 15:53:46
1423
原创 vue,uni-app组件间的通讯(父子，兄弟组件间传值)
父组件给子组件传值父组件通过v-bind绑定数据传递给子组件：<template> <view> <son :msg="msg"></son> </view></template><script> import son from "@/components/son/son.vue" expor...
2020-03-30 11:19:44
2103
8
原创 搭建本地api接口
搭建本地api接口1. 使用phpstudy开启MySQL服务2. 创建数据库设置与sql文件相同的数据库名称运行sql文件(注意选择字符集)3. 运行服务器安装包：cnpm i运行：node ./文件名检查接口是否开启在cmd窗口关口开启的端口号，在浏览器中访问，出现数据即为成功搭建本地api接口...
2020-03-27 20:14:01
7015
5
原创 uni-app中下拉刷新及上拉刷新的使用
下拉刷新开启下拉刷新的两种方式：在pages.json中，找到当前页面的pages节点，并在style中添加 enablePullDownRefresh "style":{ "enablePullDownRefresh": true }通过设置点击事件触发 uni.startPullDownRefresh() 方法监听下拉刷新：onPullDownRefres...
2020-03-27 19:00:34
1776
1
原创 了解uni-app的生命周期（应用，页面生命周期）执行顺序
应用生命周期定义在app.vue中生命周期函数名说明onLaunch当uni-app 初始化完成时触发（全局只触发一次）onShow当 uni-app 启动，或从后台进入前台显示(多次触发)onHide当 uni-app 从前台进入后台（多次触发）onUniNViewMessage对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue ...
2020-03-27 18:09:41
13472
3
原创 uni-app中理解，区分，使用rpx单位和px单位及样式字体的导入
uni-app中的rpxTips:rpx 即响应式 px，是一种根据屏幕宽度自适应的动态单位。rpx 以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度 (即 375rpx) 为屏幕一半的宽度);当屏幕变宽时，rpx 实际显示效果也会等比例放大使用 @import 语句导入外联样式表@import url("./test.css");支持基本的常用选择器 class,id,el...
2020-03-27 11:32:13
11770
1
原创 入门，创建uni-app项目
开始使用uni-app目录结构一个uni-app工程，默认包含如下目录及文件：┌─components uni-app组件目录│ └─comp-a.vue 可复用的a组件├─hybrid 存放本地网页的目录├─platforms 存放各平台专用页面的目录├─pages ...
2020-03-25 16:00:10
171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人