![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
2019ab
向着全栈程序员冲刺中...
展开
-
vue2-vue3响应式原理
vue2响应式原理主要是通过Object.definePropert()函数实现的,而Vue3实现原理主要是由Proxy()代理实现的......原创 2024-07-06 09:00:00 · 1014 阅读 · 0 评论 -
Vue3实现过渡动画
Vue3中实现动画,淡入淡出,使用标签以及css中 v-enter-to,v-enter-from,v-leave-to,*-leave-from等等属性......原创 2024-07-05 08:45:00 · 782 阅读 · 0 评论 -
Vue3中的jsx的babel配置
JSX在Vite和web pack中如何使用,并附带在setup函数中,在Compoitison-Api中和Options-Api的使用案例......原创 2024-07-04 08:00:00 · 256 阅读 · 0 评论 -
Vue3中h函数
h函数需要在render函数中使用,本文介绍了什么是h函数,以及h函数分别在options Api中和Compitons Api中如何使用,以及setup函数中的使用情况原创 2024-07-03 20:15:00 · 306 阅读 · 0 评论 -
Vue3认识Vue插件
认识Vue插件,插件模式可以有两种编写方式,对象类型和函数类型。对象类型中必须包含一个install的函数......原创 2024-07-02 08:30:00 · 143 阅读 · 0 评论 -
Vue3异步组件和Suspense
Vue3异步组件和Suspense中的是默认方案,然而是应急方案,先展示fallback等数据加载完毕后显示default方案原创 2024-07-01 11:19:51 · 330 阅读 · 0 评论 -
Vue3内置组件补充Teleport
在组件化开发中,我们封装一个组件A,在另一个组件B中使用,但是某些情况下,我们希望组件不是挂载在这个组件树上的,可能是移动到Vue app之外的其他位置:原创 2024-06-30 07:15:00 · 209 阅读 · 0 评论 -
Vue3自定义指令时间格式化案例(4)
自定义指令时间格式化案例,将时间戳通过自定义指令的方法来实现格式化原创 2024-06-29 07:45:00 · 150 阅读 · 0 评论 -
Vue3自定义指令参数修饰符值(3)
自定义指令参数修饰符值,我们使用的是mounted(el,bindings)中的第二个参数bindings中可以获取标签里包裹的内容原创 2024-06-28 21:00:00 · 211 阅读 · 0 评论 -
Vue3自定义指令生命周期(2)
Vue3中自定义指令的生命周期,详细说明了created,beforeMounted,mounted,beforeUpdate,update,beforeUnmount,unmounted原创 2024-06-27 09:00:00 · 154 阅读 · 0 评论 -
Vue3自定义指令基本使用(1)
Vue3的高级部分,自定义指令,分为局部定义和全局定义,Componistion API语法和options API语法原创 2024-06-26 20:30:00 · 231 阅读 · 0 评论 -
React面试题(二)
React上注册的事件最终会绑定在document这个DOM上,而不是React组件对应的DOM(减少内存开销就是因为所有的事件都绑定在document上,其他节点没有绑定事件)React自身实现了一套事件冒泡机制,所以这也就是为什么我们event.stopPropagation()无效的原因。React通过队列的形式,从触发的塑胶向父组件回溯,然后调用他们JSX中定义的callbackReact有一套自己的合成事件 SyntheticEventrender(){return (原创 2024-06-24 22:30:00 · 797 阅读 · 0 评论 -
React面试题(一)
在React中,类组件基于ES6,所以在constructor中必须使用super在调用super过程中,无论是否传入props,React内部都会将porps赋值给组件实例porps如果只调用了super(),那么this.props在supper()和构造函数结束之间仍是undefind。原创 2024-05-22 21:00:00 · 914 阅读 · 0 评论 -
Vue3中Pinia状态管理库学习笔记
store/counter.jspinia的核心Statestore/user.jspinia的核心Gettersstore/counter.js网络请求stores/counterstores/home感谢大家观看,我们下次见原创 2024-03-14 21:14:21 · 1155 阅读 · 0 评论 -
Vue3中Vuex状态管理库学习笔记
引入 store/index.js。原创 2024-03-03 13:13:02 · 998 阅读 · 0 评论 -
Vue3--Vue Router详解--学习笔记
Vue-Router的使用,学习笔记。欢迎大家观看指正...原创 2023-11-19 19:10:43 · 460 阅读 · 0 评论 -
Vue3-Composition-API-学习笔记
Vue3的Composition-API开发模式,学习笔记原创 2023-11-10 22:52:40 · 682 阅读 · 0 评论 -
微信小程序解决wx.getUserProfile is not a function 问题
第一步,把基础库设置成,2.16.0。第三步,重新加载编译程序。第二步,清除所有缓存。第四步,查看成功打印。原创 2022-10-25 17:58:08 · 857 阅读 · 0 评论 -
uni-app 69发送消息接口开发-单聊(二)
app/controller/chat.js// app/controller/chat.jsconst Controller = require('egg').Controller;class ChatController extends Controller { // 连接socket async connect() { const { ctx, app } = this; if (!ctx.websocket) { c.原创 2021-10-18 09:24:04 · 163 阅读 · 0 评论 -
uni-app 68 egg.js发送消息接口开发-单聊(一)
router.js // 发送消息 router.post('/chat/send',controller.chat.send);app/controller/chat.js// app/controller/chat.jsconst Controller = require('egg').Controller;class ChatController extends Controller { // 连接socket async connect() { .原创 2021-10-15 09:14:41 · 320 阅读 · 0 评论 -
uni-app 67聊天类封装(四)-创建销毁聊天对象
chat.jsimport $U from "./util.js";class chat { constructor(arg) { this.url = arg.url this.isOnline = false this.socket = null // 获取当前用户相关信息 let user = $U.getStorage('user'); this.user = user ? JSON.parse(user) : {}, // 初始化聊天对象 this.T.原创 2021-10-14 10:01:57 · 271 阅读 · 0 评论 -
uni-app 66聊天类chat.js封装(三)
chat.jsimport $U from "./util.js";class chat { constructor(arg) { this.url = arg.url this.isOnline = false this.socket = null // 获取当前用户相关信息 let user = $U.getStorage('user'); this.user = user ? JSON.parse(user) : {} // 连接和监听 if(this.u.原创 2021-10-13 14:59:27 · 621 阅读 · 0 评论 -
uni-app 65egg.js聊天类chat.js封装(二)
chat.jsimport $U from "./util.js";class chat { constructor(arg) { this.url = arg.url this.isOnline = false this.socket = null // 获取当前用户相关信息 let user = $U.getStorage('user'); this.user = user ? JSON.parse(user) : {} // 连接和监听 if(this.u.原创 2021-10-12 09:28:49 · 312 阅读 · 0 评论 -
uni-app 63egg.js后端用户上线和下线深度剖析
router.js'use strict';/** * @param {Egg.Application} app - egg application */module.exports = app => { const { router, controller } = app; router.get('/', controller.home.index); // 用户注册 router.post('/reg',controller.user.reg); // 登录 .原创 2021-10-09 09:39:58 · 186 阅读 · 0 评论 -
uni-app 61完善几个小问题
apply-list.vue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="好友申请列表" showBack :showRight="false"> </free-nav-bar> <free-list-item v-for="(item,index) in applyList" :key="index" :title="item..原创 2021-10-08 10:29:31 · 185 阅读 · 0 评论 -
uni-app 23登录注册页
直接看效果图如下是主页面代码login.nvue<template> <view class=""> <view v-if="show" class="position-fixed top-0 bottom-0 left-0 right-0 bg-light flex align-center justify-center"> <text class="text-muted font">正在加载...</text> .原创 2021-09-24 09:20:07 · 1190 阅读 · 0 评论 -
uni-app 22发布朋友圈页面
直接上效果图下面是页面代码add-moment.nvue<template> <view class="px-3"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="true"> <free-main-button name="发表" slot="right" @click="submit"></free-main-button> </free-n.原创 2021-09-23 09:30:33 · 718 阅读 · 2 评论 -
uni-app 21公共搜索页开发
不废话,直接上图下图是代码search.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="我的收藏" showBack :showRight="false"> <input type="text" value="" placeholder="请输入关键字" style="width: 650rpx;" class="font-md" /.原创 2021-09-19 09:17:13 · 241 阅读 · 0 评论 -
uni-app 20收藏列表开发
效果图代码fava.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="我的收藏" showBack :showRight="false"></free-nav-bar> <view class="pt-3 px-3"> <view class="bg-white rounded p-3"> &l.原创 2021-09-18 09:20:39 · 405 阅读 · 0 评论 -
uni-app 19二维码名片页开发
不废话先看效果图,由于我们没有二维码名片所以先用一个照片代替下面是代码部分code.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="二维码名片" showBack :showRight="false"></free-nav-bar> <view class="p-5"> <view class="bg.原创 2021-09-17 09:23:43 · 238 阅读 · 0 评论 -
uni-app 18个人资料设置开发
先看效果图代码如下图所示userinfo.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="个人资料" showBack :showRight="false"></free-nav-bar> <free-list-item title="头像" showRight :showLeftIcon="false" @click="u.原创 2021-09-15 09:23:44 · 1594 阅读 · 1 评论 -
uni-app 17朋友圈开发
不废话,直接看效果图下面是实现代码moments.nvue<template> <view> <free-transparent-bar :scrollTop="scrollTop"></free-transparent-bar> <view class="position-relative" style="height: 620rpx;"> <image src="https://douyinzcmcss.o.原创 2021-09-14 09:25:59 · 267 阅读 · 0 评论 -
uni-app 16用户投诉开发
用户投诉user-report.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="用户投诉" showBack :showRight="true" bgColor="bg-white"> <free-main-button name="投诉" slot="right" @click="submit"></free-main-butt.原创 2021-09-13 09:30:21 · 454 阅读 · 0 评论 -
uni-app 15推荐名片功能
实现推荐名片的设计,并且把推荐名片弹出层封装成组件send-card.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="选择" showBack :showRight="true"> <free-main-button :name="muliSelect ? '发送 ('+selectCount+')' : '多选'" slot="right".原创 2021-09-10 09:32:19 · 341 阅读 · 0 评论 -
uni-app 14通讯录索引列功能
这一块主要讲了,微信通讯录右边的音文字母的联动效果mail.nvue<template> <view> <!-- 导航栏 --> <free-nav-bar title="通讯录"></free-nav-bar> <!-- 通讯录列表 --> <scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px;'" :scroll-into-.原创 2021-09-09 09:26:21 · 1023 阅读 · 0 评论 -
uni-app 13标星朋友和加入移出黑名单
页面代码 user-base.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="true" bgColor="bg-white"> <free-icon-button slot="right"><text class="iconfont font-md" @click="openAction">&am.原创 2021-09-08 09:20:08 · 230 阅读 · 0 评论 -
uni-app 12.1设置朋友圈动态权限
设置朋友圈权限页面 user-moments-auth.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="设置朋友圈动态权限" showBack :showRight="false"> </free-nav-bar> <free-list-item title="不让他看我" :showLeftIcon="false" sho.原创 2021-09-07 09:20:32 · 181 阅读 · 0 评论 -
uni-app 11设置备注和标签页
设置备注页 user-tag-set.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="设置备注和标签" showBack :showRight="true"> <free-main-button name="完成" slot="right" @click="submit"></free-main-button> <.原创 2021-09-06 09:32:04 · 1171 阅读 · 2 评论 -
uni-app 10.3个人设置页开发(三)操作菜单
主页面代码 user-base.nvue <template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="true" bgColor="bg-white"> <free-icon-button slot="right"><text class="iconfont font-md" @click="openAction">&.原创 2021-09-05 18:21:35 · 303 阅读 · 0 评论 -
uni-app 10.2个人设置页开发(二)
页面 user-base.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="true" bgColor="bg-white"> <free-icon-button slot="right"><text class="iconfont font-md" @click="openChat">&#x.原创 2021-09-04 18:34:43 · 446 阅读 · 0 评论