- 博客(131)
- 收藏
- 关注
RSS订阅原创 vue2数据绑定以及收集依赖
Watcher 依赖收集器 以及通知更新的喇叭，可以收集并管理 Watcher。他们之间的关系是多对多的，可以相互依赖更新。注意，此时只是定义了 get 方法，并没有执行收集依赖的过程，所有此时还没有根据 data 建立 对应的 Watcher。目标对象，所有监听的数据会生成一个 Watcher 实例，一 一对应。initState 中会执行 observer， 劫持所有数据，封装一层方法，如下。数组： 重写原型上的方法，用来劫持数据的改变。主要是用来数据绑定，以及定义收集依赖的方法。
2023-02-07 11:01:32
515
原创 Generator 函数基本用法以及原理探究
generator 函数是 ES6 提供的一种异步编程解决方案。yield 表达式是暂停标记；函数执行到此处会暂停。一个基本的 generator 函数如下。
2023-01-18 16:58:28
268
原创 js 浏览器执行过程
当浏览器引擎拿到javascript源码时，会将js代码 转为 ast 树，这个过程就是预编译的过程，当 ast 构建完毕时，则代表预编译完毕，可以开始按照 ast 执行代码。
2022-12-12 14:47:36
407
原创 promise 原理解析
1. 基本功能实现思路：（当前不考虑链式调用）promise 实例化时 会传入一个函数，函数有俩个参数直接执行这个函数根据这两个参数(函数)，去改变函数的状态，并且储存传递的值调用方法时(.then)，根据当前 promise 的状态去做不同的操作调用 .then 时，如果是 resolve 或者 reject 状态, 则直接异步执行当前传入的函数(.then中的函数)；如果是 pending 状态，则当前 promise 没有执行 resolve 或者 reject 函数(可能是异步执行
2022-02-19 20:09:39
947
原创 typescript 运行
以下操作需要下载 node.js将写好的 ts代码编译成 js ： tsc 文件名.ts运行 js: node 文件名.js或者直接 npm i ts-node -g 再使用 ts-node 文件名.ts,此方法不会被编译成一个新 js 文件
2021-12-10 11:29:17
1019
原创 el-tree组件踩坑
业务逻辑问题: tree 组件中，同一选项会出现多次，这样使用 id 指定 key 值时会出现交互问题，element 默认 key 值唯一如下解决方法：自己循环所有数据项，创建新的 key 值，例如：语文组-张三 英语组-张三等。再根据 key 值去操作 tree 中的节点是否勾选...
2021-11-24 17:33:08
345
原创 vue 实现基础的拖拽排序
主要使用下面三个事件绑定@dragstart=func(index, e) 开始拖元素触发，作用于拖拽元素， index为拖拽开始的位置@dragover=func(index, e) 当元素拖动到drop元素上时触发，index为拖拽结束的位置@drop=func(index, e) 当元素放下到drop元素触发，index为拖拽结束的位置我主要是使用 @dragstart 以及 @drop 这两个事件// html<li v-for="(item, in
2021-11-10 17:57:15
1344
原创 vue scoped 以及 /deep/ 原理
使用 vue 写样式时，可以使用 scoped 属性，使组件得样式只在当前组件生效原理： vue 会给每个节点添加一个属性值，并且处理样式时，给每个样式添加一个属性选择器，如下// html<div class="fotter" data-v-001></div>// css .fotter[data-v-001] { /* ... */ }...
2021-08-17 16:20:47
554
原创 vue mixins简述
mixins 是 vue 中用来解决代码夯余的问题主要用来储存公用代码以及方法，( 登录，登出，固定跳转等 )mixins 使用定义 mixin 对象 (这个对象本质上也是一个 vue 实例)调用 vue.mixin 方法混入当前对象// 第一步: 定义全局对象const mixin = { data() { return { //... } }, computed: { // ... }, methods: { //... }}// 第二步: 挂载.
2021-08-11 17:37:42
248
原创 vuex 简述
vuex 解决了组件以及路由之间相互通讯和实时更新的问题1. Statestate 提供统一公告资源，所有公共的变量可以放在 state 中存储// 声明全局变量const store = new Vuex.Store({ state: { count: 0 }})/** * 调用全局变量 * 方法一： this.$store.state 调用 */ this.$store.state.count // this 指向全局 vue 实例/** * 方法二： mapState.
2021-08-03 15:16:00
121
原创 webpack 基础
1. webpack.config.js 基本配置webpack.config.js 都是使用 commentJSconst path = require('path');const { resolve, join } = pathconst HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/index.js', // 入口文件 /* bulid
2021-05-16 22:20:37
243
原创 elementUI el-select 不支持bulr表单验证 解决方法
思路： 自定义组件事件 bulr， 手动触发表单验证el-select 组件中定义 bulr 事件 @blur.native.capture='onclick'定义表单 rules 规则手动触发对应表单规则校验 this.$refs[formName].validateField(type) formName：表单名称 type：表单属性// html// 页面中我定义了多个表单，所以传入了表单 ref 名称。单个表单可以只传属性值<el-select @blu.
2021-04-30 17:13:05
1359
1
原创 chrome 浏览器解决跨域
右击浏览器图标点击属性目标后面增加一行文本-ignore-certificate-errors --disable-web-security --user-data-dir=C:\MyChromeDevUserData在浏览器桌面图标中重新打开浏览器
2021-04-25 09:07:06
193
原创 git 以及 vscode 快速下载
https://npm.taobao.org/mirrors/git-for-windows/v2.31.0-rc1.windows.1/
2021-03-07 12:39:28
264
原创 h5 唤起 app(ios，and)，没下载则跳转下载链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="utf-8"> <title>唤醒app</title> <div id="btn" style="font-size: 2.
2021-02-05 11:31:02
837
原创 去除overflow:scroll 滚动条
css3有一个直接调用的css，保证隐藏滚动条的同时还可以继续通过滚轮向下翻::-webkit-scrollbar { /*隐藏滚轮*/ display: none;}但是仅限于支持css3的浏览器。
2021-01-12 11:35:58
1920
1
原创 h5 ios 样式错乱
1. 问题app 内嵌 h5 IOS 中显示错误， 如下2. 解决后来发现 ios 对 flex 或者 gird 布局不友好，换成 float 完美解决
2021-01-05 09:16:33
1245
原创 聚合二维码生成(小程序二维码、付款码)
微信公众平台 》 开发 》 开发设置 》 启用 ‘扫普通链接二维码打开小程序’ 》配置普通链接二维码规则
2020-11-04 16:14:10
3972
1
原创 小程序动态改变 image src 失效
需求: 上传图片到服务器后改变 image src ,将图片显示出来,问题: 重复提交时,返回的图片路径都是一模一样的,这时服务器上的图片已经改变,但是不会更新视图中的图片.解决: 在图片路径最后添加参数, 为随机数,这时视图就会响应更新, 如下'http//:×××××.png?a=×××××' // 每一次参数都不一样...
2020-10-30 09:49:08
2995
原创 前端获取用户 IP 地址
// 请求 soho 接口， 返回值如下： // var returnCitySN = {"cip": "120.228.1.183", "cid": "CN", "cname": "CHINA"}; <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script> // session储存 IP 地址，需要的时候再用 sessionStorage.setItem("userIp.
2020-10-15 17:43:18
2306
原创 小程序 scroll-view 出现滚动卡顿解决
目前问题只会在真机上出现，开发工具中无法复现网上有多种方式都列举出来，以便以后查阅scroll-view 内容太多，并且设置了 absolute ，将层级设高即可解决，原理不明。（反正我是这么解决的）将 JSON 文件中的 "enablePullDownRefresh":"true", 删除设置 scroll-view 的高度选择不同的基础库调试给 view 和 scrll-view 设置 -webkit-overflow-scrolling: touch...
2020-08-15 12:43:50
4917
1
原创 Typescript 简述
1. 概述Typescript 是 js 的超集（相当于 js 的扩展，并且这个扩展包含 js 的任何功能）ts 新增了 类型系统，代码更加易于维护，使用其开发大型项目更加友好Vue3 源码大部分使用 TS 重写，未来的趋势优势：类型化：开发类型化，有效避免了很多因语言本身的灵活所导致的 Bug 的出现提高代码可读增强了 API ，枚举等补充 API2.使用2.1. 原理TS => 解析 => JS => 浏览器执行 / node环境运行2.2. 安装npm
2020-08-11 20:41:17
406
原创 图片在线转 64base编码
小程序 background-image:url();不可以使用相对/绝对路径，需要转为 64base 编码在线转 64 base 编码
2020-07-30 14:35:44
392
原创 小程序 蓝牙打印
最近着手开发了一个小程序的 B2B 后台管理以及业务处理系统其中用到了蓝牙小票打印功能，踩了很多坑，特此记录一下1. 官方 API 梳理梳理一遍后，小票机应该是属于低功耗蓝牙连接，官方也有写入数据的 API大体思路：初始化蓝牙模块 wx.openBluetoothAdapter()搜寻附近的蓝牙外围设备 wx.startBluetoothDevicesDiscovery()监听寻找到新设备的事件 wx.onBluetoothDeviceFound()连接低功耗蓝牙设备 wx.crea.
2020-07-11 23:35:03
1274
2
原创 taro 踩坑笔记
最近使用 react 的多端开发框架 taro 时踩了很多坑，记录一下1. 只使用 class 选择器， 使用伪类时在小程序端无法生效2. 使用 CSS 实现 多行文本溢出显示省略号 时，发现 外部样式表中的某些样式会被忽略掉，导致一直无法生效解决方法 ：直接添加行内样式即可3. 使用图片时，不可以直接使用，必须将图片 import 入 文件后才可以使用。import phoneIcon from '../../../public/images/phone.png'4. 组件中定义 add.
2020-06-20 20:29:20
703
1
原创 forEach 和 map
二者都是用来遍历数组的每一项，二者都不会通过处理遍历项 直接改变原数组1. forEach没有返回值，三个参数（数组项，下标，索引数组）可以通过改变 索引数组 或者 原数组 来更改数组，索引数组就是原数组的地址，可以通过改变它去改变原数组var arr = [1,2,3,4,5]arr.forEach((item, index, tempArr) => { tempArr[index] = item*10 // 等同于 arr[index] = item*10})console.l.
2020-06-20 20:02:01
604
原创 抢鲜！Vue 3.0
尤雨溪大佬在 2020年 4月 17日 凌晨 4点 推出了 Vue 3.0 Beta 版。之前也有关注尤大的发布会，这个消息也是才知道，下面来体验一下。github 上的地址：https://github.com/vuejs/vue-nextgithub 上找项目就不贴出来了，直接克隆 demo 项目克隆项目：https://github.com/vuejs/vue-next-web...
2020-04-24 09:51:23
149
原创 ES6 find / findIndex 底层详解
1.作用ES6 提供了 find 以及 findIndex 方法，可以让我们在数据中根据条件找出需要的项。二者原理相同，都接受一个回调函数。只是一个返回 符合条件的数据，一个返回符合条件的数据下标// find var a = [ { id: 1, name:'张三' }, { id: 2, name:'王五' }] var data = a.find(funct...
2020-04-21 16:35:07
732
1
转载 JavaScript 基础进阶（转载）
看了一个博主的前端基础进阶系列文章，对自己帮助很大。转载链接如下https://segmentfault.com/a/1190000012646488
2020-04-20 10:21:53
205
原创 MySQL JSON类型及存储引擎
MYSQL8 新增了JSON 类型。在某些时候，对于网页中不需要经常改动的数据，一般以数组形式的字符串存入库中。这样不易更改 数据。使用 JSON 类型可以很好的解决这个问题1.JSON类型创建方式：CREATE TABLE 表名...json字段名称 JSON...)下面创建一个字段为 JSON 类型2.基本方法使用 JSON_ARRAY() 和 JSON_OBJECT...
2020-04-15 21:23:35
642
原创 mysql 无法登录解决方法
1.无法连接至本地服务器Can't connect to MySQL server on 'localhost' (10061)博主在本地安装了两个 MySQL,可能是两个运行导致冲突解决方法：重新安装 mysqld 服务，输入 mysqld --remove mysql，成功后再安装，输入 mysqld --install重启 mysql， 输入net stop mysql。成功后再...
2020-04-11 12:25:24
2401
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人