- 博客(34)
- 收藏
- 关注
原创 vue的响应式原理
数组的响应式 是通过重写数组的方法(push、pop、splice)来实现对数组变化的监听,因为这些方法无法通过。响应式API : reactive 和 ref。Proxy he reflect 的区别。收集依赖(收集使用该数据的组件),派发更新(通知依赖的组件重新渲染)
2025-03-21 18:29:14
445
原创 Vite创建Vue3项目
将http://localhost:5173/在浏览器打开。2. 是否使用此项目名称,你可以使用也可以自己写个名称。这是是问你是否需要安装以下软件包:这里我们选择y。项目创建完成之后依次执行以下命令即可。选择使用框架,这里我们选择vue。选择语言,我们选择 TS。看见以下场景即为创建完成。
2024-11-18 10:14:06
336
原创 node版本升级,从卸载到使用nvm管理node版本并配置vue环境(学习趟雷版)
直接打开控制面板,找到默认程序,找到nvm直接卸载就行,通过nvm下载的node会跟随nvm一起卸载。nvm管理node版本对外的接口是node.js,打开node.js,可以看见npm 在这个文件夹内。一般环境变量会跟随nvm的卸载删掉,可以打开环境变量,查看是否存在环境变量如果存在删掉就行了。4.复制上一步的路径,将 node.js的安装路径放在nvm的安装路径里面。通过控制面板删除node,按下【win+R】键,输入control。两个文件夹,作为全局的模块安装路径和缓存路径。
2024-11-15 16:17:51
2041
原创 小程序textarea在ios中位置偏移
textarea 在 ios 下 textarea 的 padding 无法置0,模拟器和安卓上显示符合预期,在ios真机上会出现默认的内边距。
2024-08-20 23:45:00
485
原创 微信小程序模板语法的使用和组件内传递样式externalClasses的用法
当前引用组件需要在不同地方展示,但样式不同时,需要此属性,外部样式定义,在组件内声明具体生效的样式名,可以多个,**注:**当父组件和子组件样式冲突时,需提高权重覆盖子组件内地样式。
2024-08-13 23:30:00
452
原创 vue 文件下载 http 和https的区别
https下打开http链接浏览器会默认阻止,进行拦截,因为浏览器认为https 下打开http时不安全的。
2024-05-09 19:45:00
306
原创 uniapp 小程序实现分享功能
监听用户点击页面内转发按钮(button 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。注意:button + open-type = “share” 才会触发。注意:只有定义了此事件处理函数,右上角菜单才会显示“分享到朋友圈”按钮。监听右上角菜单“分享到朋友圈”按钮的行为,并自定义分享内容。
2024-04-28 11:46:16
1629
原创 uniapp引入vant UI
直接引用node_modules文件里面的暂时没找到合适方法,有会的大佬可以分享下哈。第一种引用方法, 使用那个引用那个 或 根据需求引用。下载之后根目录会多一个node-modules。第二种使用easycom自动批量移入组件。在pages.json里面引用。/*每个页面公共css */
2024-04-16 20:38:02
1989
2
原创 自定义指令 vue2 和 vue3 的区别
自定义指令的钩子函数bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
2023-12-08 11:22:10
922
原创 微信小程序scroll-view去除滚动条
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html。
2023-12-08 11:02:48
358
原创 vue 使用 echarts实现图表数据
exharts 文档:https://echarts.apache.org/zh/option.htmlvueechartsmain.js。
2023-12-05 19:49:48
206
1
原创 对象转url参数或url参数转对象
可对 url 进行解码,(必须一个字符串),decodeURIComponent() 对编码后的 URI 进行解码(如果传递过来的 url 是通过 encodeURIComponent 编码过的):通过特殊字符截取成键值对形式的数组,拼接成对象返回。的下标在此基础到字符串长度末尾的字段截取查出来。返回值:给定对象所有可枚举属性的字符串数组。参数:要返回其枚举的自身属性的对象。:将数组拼接为最终的参数字符串返回。:过滤符合条件的值返回为新的数组。:将数据进行修改组成新的数组返回。:将给定对象组成数组,
2023-06-29 18:58:10
1743
1
原创 基于silder.js的步骤条封装
基于silder.js的步骤条封装基于silder.js上进行开发封装的,主要应用:jQuery,silder.js**主要:**是基于silder来封装的原有silder.js属性:elem:步骤条展示的dome组件color: 颜色,pos: 初始滑动百分比,count: 最大值,disable: 是否禁用组件showNum: 是否显示进度事件callBackMove: 鼠标滑动事件 callBackMove: function (num) {//鼠标滑动
2021-03-16 22:23:42
459
原创 tab栏切换标签样式
封装tab栏切换改变内容并居中当前点击标签主要使用了父子组件之间传值,使用发布和订阅,watch监听让父子组件之间实现双向绑定,从而实现操作子组件也引起父组件内的数据变化,如果想要实现滑动内容切换tab标签,可以结合swiper实现标签封装属性topNavheight:标签盒子的高度currentcolor:标签字体颜色currentfotsize:标签字体字号subbgcolor:标签下标选中颜色因为有些写的是自适应,所以就没有在封装了,如果想要改变标签显示的数量可以在组件内修改(
2021-03-16 22:21:39
1127
原创 watch 和 computed 的区别
watch 和 computed 的区别和运用场景watch: 是监听属性值的变化,是在数据变化时,要执行异步和开销较大的操作时使用,即一个属性影响多条数据时使用使用 watch 我们可以执行异步操作,并最终得到我们想要的值 data(){ return { name:'你好' } } watch:{ /* 原有写法 */ name(newval,oldval){ c
2021-03-14 14:50:47
321
原创 vue与Android和ios互相传值
VUE和Android,ios互相传值Android向Vue传数据 android5.0之前的可以用下面的方式: webView.loadUrl("javascript:getDataFromNative('" + mParam + "')"); android5.0之后的可以用下面的方式: webView.evaluateJavascript("javascript:getDataFromNative('" +mId +"')", new ValueCallba
2021-03-03 20:43:41
786
2
原创 vue编写折叠面板组件
vue编写折叠面板组件首先我们创建组件collapse.vue方便在其他组件中使用 <ul class="collapse"> <li class="item" v-for="(item, index) in collList" :key="index"> <p @click="open(index)"> <img src="/static/svg/tbm.svg" alt="" />
2021-03-03 20:34:00
2766
1
原创 前端拖拽式布局
jquery-sortable–拖拽排序SortableJS 中文网址: http://www.sortablejs.com/借鉴文档: http://www.itxst.com/sortablejs/neuinffi.html拖拽排序别的不多说了,直接上例子,记得引入jQuery.js <!doctype html> <html> <head> <meta charset="utf-8">
2021-03-03 20:29:55
1199
1
原创 css文本超出出现省略号问题
单行文本超出出现省略号 overflow: hidden;/* 超出文本溢出隐藏 */ text-overflow:ellipsis;/* 溢出用省略号显示 */ white-space: nowrap;/* 溢出不换行 */多行文本超出显示省略号 overflow:hidden; /* 超出文本溢出隐藏 */ text-overflow:ellipsis;/* 溢出省略号显示 */ display:-webkit-box; /* 将文本当成弹性盒子 */
2021-03-03 20:25:10
428
1
原创 vue组件之间通讯
父组件给子组件传递参数 <template> <child :data="childData" @show="showChild"/> <!-- 子组件传递过来的值 --> <p>{{fatch}}</p> </template>父组件定义属性和方法然后对子组件进行操作和传值,利用v-model和v-on来绑定事件和属性,:data 是定义的属性,@show 是定义的
2020-11-09 20:50:18
348
原创 input框各种输入框限制总结
限制输入框只能输入正整数记录日常碰到的输入框限制,以后会慢慢补充 <input maxlength="3" style="width:70px;height:32px;" type="text" id="btStime" placeholder="限制输入框只能输入正整数" oninput="positive(this)">js逻辑:应用场景:对于年龄和手机号这些场景有帮助 function positive(obj) { if(obj.valu
2020-11-08 15:48:36
1416
原创 iframe 子页面改变父页面样式
父元素改子元素样式(不跨域): document.getElementById('ID名').contentWindow.document.body.style.backgroundColor="#f00";子元素改变父元素样式 var topWindow = $(window.parent.document); var $iframe = topWindow.find('标签名/类名');//查找相应的类名iframe //一共两种方法,你可以选择其中一种来..
2020-11-08 15:40:47
2197
原创 原生jS实现点击复制功能
jS实现点击复制功能 <button onClick="copyCode()">复制</button>点击按钮,创建input,填充要复制的内容,然后剪切到鼠标右键剪切板上 /* 复制链接 */ /* content:复制的内容, message:提示的消息 */ function copyCode()(content, message) { var url = content//复制的网址或内容 var au
2020-11-02 10:16:10
685
原创 解决阿里巴巴图标在v-for循环中渲染不出图标问题
解决阿里巴巴图标在v-for循环中渲染不出图标问题v-for循环,按照下载的项目图标步骤来走v-for 循环<span v-for="(item, index) in info" :key="index"> <i class="iconfont">{{item.icon}}</i> </span>//页面中渲染的结果: 图标循环渲染: //这是
2020-05-21 16:12:42
1465
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人