- 博客(127)
- 收藏
- 关注
RSS订阅原创 swiper loop 为 true 的时候 click 事件失效问题
项目中使用 swiper 时，设置 loop:true时，slides前后会clone若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件，导致复制的slides点击不会跳转。不要将click事件绑定在dom上，而是在放在 on() 回调函数中调用。
2024-04-24 16:42:38
192
原创 Package search npm & yarn
npm package : npm | Homeyarn package : Yarnnpm install packageNameyard add packageName
2024-01-23 09:48:37
391
1
原创 nvm 安装 node 安装不上 npm
点击新版本的 nvm exe 文件安装，它会自动接管你的 node。然后 nvm install 之前卸载的 node list 即可。nvm -v 查看到自己的 nvm 版本号是 1.1.7。nvm uninstall 各个版本只保留一个最低版本。nvm list 查看手里 node 的所有版本。下载最新版本的 nvm .exe 文件。npm -v 发现没有安装上。node -v 安装上了。
2023-10-18 10:48:33
798
原创 Vue load 页面报错：Error: Request failed with status code 404 ###createError.js
cmd 运行 netstat -aon 查看 0.0.0.0:8080 端口被哪个 PID 号占用 如 “4444”然后打开人物管理器，看看是哪个程序的 PID 号是 4444，然后修改改程序占用的端口号就可以啦。网上各种查找原因，说是后台接口对接跨域问题，但是相同的项目其他同事都能正常链接。折腾好久，把同事的整个 node_modules 文件夹复制过来，还是不行。也有说是 .env 文件问题，但是我这个项目没有该文件。后来发现又其他软件占用的 8080 接口。
2023-09-24 14:18:52
268
原创 MPX 小程序框架 - Tracy 小笔记
基于 Mobo 实现高效的数据相应，基于 webpack 实现基于依赖手机的优化编译。MPX:全面拥抱原生的框架。
2023-09-17 10:54:35
496
原创 Selenium - Tracy 小笔记2
它可以让python代码调用浏览器。并获取到浏览器中加们可以利用selenium提供的各项功能。帮助我们完成数据的抓取。1.掌握 selenium发送请求，加载网页的方法。2.掌握selenium简单的元素定位的方法。selenium本身是一个自动化测试工具。它没有逻辑，只有相应的函数，直接搜索即可。3.掌握selenium的基础属性和方法。4.掌握selenium退出的方法。
2023-09-10 10:43:47
1611
原创 项目打包和自动化部署
如下是安装 jenkins 的命令，它的意思是安装 “http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo” 到我们服务器的文件夹 “/etc/yum.repos.d/”中并且命名为“jenkins.repo” （注意，这里必须要下载到这个文件夹下这个程序才能生效）等到测试阶段，开发人员等待测试反馈bug，也会处于等待状态。Tips:因为我们之前选的服务器的操作 系统的版本是 8点多的版本，因此它自带dnf,是操作系统里的包管理工具，很像npm。
2023-07-20 18:44:02
182
原创 类型的查找（类型声明） - Tracy TypeScript 小笔记
外部类型声明通常是我们使用一些库（比如第三方库）时，需要的一些类型声明这些库通常有两种类型声明方式：方式一：在自己库中进行类型声明（编写.d.ts文件），比如axios方式二：通过社区的一个公有库DefinitelyTyped存放类型声明文件该库的GitHub地址：https://github.com/DefinitelyTyped/DefinitelyTyped/该库查找声明安装方式的地址：https://www.typescriptlang.org/dt/search?search=
2022-12-25 20:49:10
282
原创 模块化开发(命名空间和模块化) - Tracy TypeScript 小笔记
通过namespace来声明一个命名空间 （命名空间其实不太常用，了解即可。就是当同一个文件中的两个函数都想取相同名称的时候，就可以把这两个函数变量等 放置到不同的命名空间里去）每个文件可以是一个独立的模块，支持ES Module，也支持CommonJS。
2022-12-25 19:39:30
119
原创 Tracy vue3 小笔记 - template 数据访问顺序
相同变量名的时候， 展示顺序如下 setup > data > computed。原因可查看 Vue 中的源代码，它是一个 if else 语句的一个判断。
2022-09-30 12:33:59
324
原创 Composition API （setup）&& Options API
Options API的一大特点就是在对应的属性中编写对应的功能模块；p比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命 周期钩子当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）；...
2022-08-06 15:52:06
241
原创 setup 中响应式数据的两种实现方法 & reactive API, ref,ReadOnly
我们通过reactive或者ref可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个 响应式对象希望在另外一个地方（组件）被使用，但是不能被修改，这个时候如何防止这种情况的出现呢？readonly会返回原生对象的只读代理（也就是它依然是一个Proxy，这是一个proxy的set方法被劫持，并且不 能对其进行修改）；注意 传递给子组件父组件等的数据，也需要是响应式的才能联动。但是经过readonly处理的原来的对象是允许被修改的；readonly返回的对象都是不允许修改的；.....
2022-08-06 15:51:05
399
原创 Reactive判断的API，toRef & toRefs，ref其他的API，customRef
isProxy检查对象是否是由reactive或readonly创建的proxy。isReactive检查对象是否是由reactive创建的响应式代理如果该代理是readonly建的，但包裹了由reactive创建的另一个代理，它也会返回true；isReadonly检查对象是否是由readonly创建的只读代理。toRaw返回reactive或readonly代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）。...
2022-07-31 16:34:23
134
原创 对象的深拷贝和浅拷贝
1.浅拷贝es6 新增方法 Object.assign const info = {name: "why", age: 18, friend: {name: "kobe"}}; const obj = Object.assign({}, info); info.name = "kobe"; console.log(obj.name); info.friend.name = "james"; console.log(obj.friend.name);2.深拷贝
2022-04-24 19:22:38
921
原创 Tracy vue3 小笔记 1 - 如何使用 VUE， MVC, MVVM, Template， Vue 源码
那么安装和使用Vue这个JavaScript库有哪些方式呢？方式一：在页面中通过CDN的方式来引入；方式二：下载Vue的JavaScript文件，并且自己手动引入；方式三：通过npm包管理工具安装使用它（webpack再讲）；方式四：直接通过Vue CLI创建项目，并且使用它Demo code <div id="app"> <h2>Hello World</h2> </div> <script src="https
2021-12-13 15:42:40
637
1
原创 css px 转成 vw 插件 像素单位批量转换
1.安装npm install postcss-px-to-viewport --save-dev2.配置postcss.configs.js// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers:
2021-12-03 17:15:41
1289
原创 图片懒加载插件
用于在页面滑动到图片所在位置的时候再加载，从而不影响页面加载速度的插件。1.安装npm install vue-lazyload --save--dev2.引入main.js 中添加import VueLazyload from ''vue-lazyload'Vue.use(VueLazyload) //普通引入Vue.use(VueLazyload，{ loading: require('./assets/image/common/placeholder.pn...
2021-12-03 16:39:35
1446
原创 FastClick 解决移动端 300毫秒点击延迟的插件
FastClick 是 FT Labs 专门为解决移动端浏览器 300毫秒点击延迟问题所开发的插件公司没有特定要求的话可以不用的，了解即可安装方式 npm install fastclick -- save在 main.js 中引入import FastClick from 'fastclick'FastClick.attach(document.body);...
2021-12-03 16:30:53
168
原创 Toast 插件封装方式 自己创建一个插件
调用方式：this.$toast.show("成功");components/toast/Toast.vue<template> <div class="toast" v-if="isShow">{{message}} </div></template><script type="text/javascript">export default { name: "Toast", data() { return { .
2021-12-03 16:19:09
524
原创 Vue 响应式原理 defineProperty 监听对象属性的改变 观察者模式
不要认为数据发生改变，界面跟着更新是理所当然的。 Vue 背后做了很多的操作才实现了这个效果1.Vue 内部是如何监听的呢一个变量 message 数据的发生了改变呢？答： Object.defineProperty -> 监听对象属性的改变2.监听到了数据改变，Vue 又如何知道要通知哪些人来让界面发生刷新呢？既： 页面有三个 {{message}} {{message}} {{message}}， 它怎么知道要通知这三个地方呢？答： 利用“发布订阅者模式” Object
2021-12-03 10:07:58
373
原创 点击标题滚动到对应的 section, 滚动到对应的section 对应的标题高亮
<template> <div class="home"> <tab-control class="tab-control" ref="tabControl" :titles='["商品", "参数", "评论", "推荐"]' @tabClick="tabClick" /> <scroll class="scroll" ref="scroll" :probeType="3" :pullUpLoad="true" @scroll="handleScrol.
2021-11-01 14:23:49
330
原创 添加商品到购物车 Vuex
商品详情/购物车页面 code<template> <div class="home">购物车车 <button @click="addGood(1)">Add Good1</button> <button @click="addGood(2)">Add Good1</button> <button @click="addGood(3)">Add Good1</button> <ul
2021-11-01 14:17:27
537
原创 Vue 获取元素的 offsetTop 可能会遇到的坑
在哪里才能获取到正确的 offfsetTop? 1.created 肯定不行，压根通过 this.$refs 获取不到元素 2.mounted 也不行，数据还没有获取到 3.updated 也不行，获取到了数据 Dom 还没有渲染 4.$nextTick 也不行，因为 dom 渲染了但是图片还没有加载完毕 5.在图片都加载完毕后获取元素的 offsetTop, 这里注意防抖函数的应用普通 元素用的是 this.$refs.元...
2021-10-26 11:37:19
9195
1
原创 Tracy Vue 小笔记之 mixin 混入
如果多个组件中，都会调用相同的代码如相同的组件，相同的 methods, 相同的变量，相同的过滤器等，那么可以利用混入 mixins混入的 js 文件命名为：mixin.js//混入 minxin 导出的是一个对象，不是方法，这个对象中可以放 methods， data 等export const dateFormateFilterYYYYMMDD = { filters: { dateFormate(time) { return timeFormate(time, "
2021-10-14 14:57:54
116
原创 时间戳的格式化 filters:
数据库一般存的日期数据都是一个时间戳，很少存字符串html code: {{ good.time| showDate}}filters:{ showDate(value) { //1.先将时间戳转化为日期格式 const date = new Date (value*1000) ; //因为 new Date 中要传一个到毫秒的时间戳，而我们的时间戳是到秒，所以 * 1000 //2.将 date 进行格式化...
2021-10-11 11:20:42
177
原创 给子组件传递复杂数据
在 js 文件中定义类//Es6 写法export classPerson{constructor(data1,data2){this.name=data1.name;this.age=data2.age;}}//Es5 写法export functionPerson(data1,data2){this.name=data1.name;this.age=data2.age;}在父组件接受到数...
2021-10-09 17:23:01
65
原创 vue 返回上一页&跳转到其他页面
返回上一页this.$router.back();this.$router.go(-1);跳转到其他页this.$router.push('/home'); // html5 的 history 模式： pushStatethis.$router.replace('/home'); //返回不了上一页
2021-09-30 15:49:03
493
原创 让 Home 页面离开的时候保持原来的状态
思路1. 用 keep-alive 让页面不要销毁<keep-alive include="HomePage"> <router-view /></keep-alive>Tips:include 不设置的话，所有页面都不销毁，设置 include 是组件 name 为 “HomePage”的不销毁2.离开的时候保留一个位置信息3.进来时，将位置设置为原来保存的位置信息即可 注意，最好回来时betterscroll 设置下 r...
2021-09-30 15:43:52
111
原创 tab-control 吸顶效果
css 设置它是一个比较新的属性，所以不是所有浏览器都能实现position:sticky;top:40px; //必须设置 top 的位置来确定它滚动到距离上面是哪里才开始 stickyJS 设置思路1.必须知道滚动到多少时，开始有吸顶效果 看这个元素距离上边的距离是多少，用属性 offserTop 注意，这个属性值如果不准，是因为页面加载的时候图片是后加载的。这个值如果是在图片加载之前返回的就不准。需要先判断该元素上面的图片是否都加载完毕了，然后再开始计算这个值。...
2021-09-27 11:07:23
145
原创 防抖函数 debounce 节流函数 throttle
对于一些操作非常频繁的函数，我们要进行防抖操作，比如说我们用 Better score 的时候，为了解决滚动区域不准确的问题，需要在每个图片加载完成之后调用this.$refs.scroll.refresh();但是我们其实在最后一个图片加载完成之后调用一次就可以了。 由于我们无法判断哪个图片是最后一个加载完成的，因此每个图片加载完成后先调用防抖函数，在某个时间之内如果另外的图片也加载完成了，那么就取消前一个图片load 完想要调用还没有调用的 refresh 操作。直到最后一个图片调用防抖函数..
2021-09-26 16:07:32
174
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人