vue
关注
分享
扫一扫
2019ab
自信人生二百年，会当纵横九万里
展开
-
vue2-vue3响应式原理
vue2响应式原理主要是通过Object.definePropert()函数实现的，而Vue3实现原理主要是由Proxy（）代理实现的......原创 2024-07-06 09:00:00 · 1070 阅读 · 0 评论 -
Vue3实现过渡动画
Vue3中实现动画，淡入淡出，使用标签以及css中 v-enter-to,v-enter-from,v-leave-to,*-leave-from等等属性......原创 2024-07-05 08:45:00 · 1384 阅读 · 0 评论 -
Vue3中的jsx的babel配置
JSX在Vite和web pack中如何使用,并附带在setup函数中，在Compoitison-Api中和Options-Api的使用案例......原创 2024-07-04 08:00:00 · 516 阅读 · 0 评论 -
Vue3中h函数
h函数需要在render函数中使用，本文介绍了什么是h函数，以及h函数分别在options Api中和Compitons Api中如何使用，以及setup函数中的使用情况原创 2024-07-03 20:15:00 · 483 阅读 · 0 评论 -
Vue3认识Vue插件
认识Vue插件,插件模式可以有两种编写方式，对象类型和函数类型。对象类型中必须包含一个install的函数......原创 2024-07-02 08:30:00 · 188 阅读 · 0 评论 -
Vue3异步组件和Suspense
Vue3异步组件和Suspense中的是默认方案，然而是应急方案，先展示fallback等数据加载完毕后显示default方案原创 2024-07-01 11:19:51 · 371 阅读 · 0 评论 -
Vue3内置组件补充Teleport
在组件化开发中，我们封装一个组件A，在另一个组件B中使用，但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置:原创 2024-06-30 07:15:00 · 249 阅读 · 0 评论 -
Vue3自定义指令时间格式化案例(4)
自定义指令时间格式化案例,将时间戳通过自定义指令的方法来实现格式化原创 2024-06-29 07:45:00 · 244 阅读 · 0 评论 -
Vue3自定义指令参数修饰符值(3)
自定义指令参数修饰符值,我们使用的是mounted(el,bindings)中的第二个参数bindings中可以获取标签里包裹的内容原创 2024-06-28 21:00:00 · 294 阅读 · 0 评论 -
Vue3自定义指令生命周期(2)
Vue3中自定义指令的生命周期,详细说明了created，beforeMounted，mounted，beforeUpdate，update，beforeUnmount，unmounted原创 2024-06-27 09:00:00 · 226 阅读 · 0 评论 -
Vue3自定义指令基本使用(1)
Vue3的高级部分,自定义指令,分为局部定义和全局定义,Componistion API语法和options API语法原创 2024-06-26 20:30:00 · 341 阅读 · 0 评论 -
Vue3中Pinia状态管理库学习笔记
store/counter.jspinia的核心Statestore/user.jspinia的核心Gettersstore/counter.js网络请求stores/counterstores/home感谢大家观看，我们下次见原创 2024-03-14 21:14:21 · 1205 阅读 · 0 评论 -
Vue3中Vuex状态管理库学习笔记
引入 store/index.js。原创 2024-03-03 13:13:02 · 1057 阅读 · 0 评论 -
Vue3--Vue Router详解--学习笔记
Vue-Router的使用，学习笔记。欢迎大家观看指正...原创 2023-11-19 19:10:43 · 521 阅读 · 0 评论 -
Vue3-Composition-API-学习笔记
Vue3的Composition-API开发模式，学习笔记原创 2023-11-10 22:52:40 · 721 阅读 · 0 评论 -
Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
Vue3中Options API学习笔记原创 2023-11-05 18:11:41 · 698 阅读 · 0 评论 -
uni-app 190扫一扫加入群聊功能（二）
/pages/chat/scan-add/scan-add.nvue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="加入群聊" showBack :showRight="false"></free-nav-bar> <view class="p-5"> <view class="bg-white rounded p-4"原创 2022-03-10 14:19:29 · 1122 阅读 · 0 评论 -
uni-app 189扫一扫添加群聊功能（一）
/components/free-ui/free-nav-bar.vue<template> <view> <view :class="getClass"> <!-- 状态栏 --> <view :style="'height:'+statusBarHeight+'px'"></view> <!-- 导航 --> <view class="w-100 flex align-center原创 2022-01-20 16:04:12 · 411 阅读 · 0 评论 -
uni-app 188修复弹框问题
弹框问题/components/free-ui/free-nav-bar.vue<template> <view> <view :class="getClass"> <!-- 状态栏 --> <view :style="'height:'+statusBarHeight+'px'"></view> <!-- 导航 --> <view class="w-100 flex align-ce原创 2022-01-20 15:37:16 · 658 阅读 · 0 评论 -
uni-app 187多进程实现（二）
/app/extend/context.js// app/extend/context.jsvar qr = require('qr-image');module.exports = { // 成功提示 apiSuccess(data = '', msg = 'ok', code = 200) { this.body = { msg, data }; this.status = code; }, // 失败提示 apiFail(data = '', msg = 'f原创 2022-01-19 17:45:18 · 792 阅读 · 0 评论 -
uni-app 186多进程实现（一）
/app.jsclass AppBootHook { constructor(app) { this.app = app; } configWillLoad() { // 此时 config 文件已经被读取并合并，但是还并未生效 // 这是应用层修改配置的最后时机 // 注意：此函数只支持同步调用 } async didLoad() { // 所有的配置已经加载完毕原创 2022-01-19 16:57:33 · 2042 阅读 · 0 评论 -
uni-app 185iOS端兼容处理
朋友圈样式问题/pages.json{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/common/login/login", "style" : {原创 2022-01-19 16:22:04 · 690 阅读 · 0 评论 -
uni-app 184查看好友朋友圈完善（五）
前端将H5的修改同步到APP里/pages/find/moments/moments.nvue<template> <view> <free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar> <view class="position-relative" style="height: 620rpx;">原创 2022-01-16 17:18:35 · 181 阅读 · 0 评论 -
uni-app 183查看好友朋友圈完善（四）
如下图是我测试的截图前台/pages/mail/user-base/user-base.vue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white"> <view slot="right"> <free-icon-button v-if=.原创 2022-01-16 16:53:41 · 671 阅读 · 0 评论 -
uni-app 182查看好友朋友圈完善（三）
如下是我测试的截图前台/pages/find/moments/moments.vue<template> <view> <free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar> <view class="position-relative" style="height: 620rpx;"> &.原创 2022-01-16 16:28:06 · 193 阅读 · 0 评论 -
uni-app 181查看好友朋友圈完善（二）
前台/pages/find/moments/moments.vue<template> <view> <free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar> <view class="position-relative" style="height: 620rpx;"> <image src=原创 2022-01-16 16:05:29 · 195 阅读 · 0 评论 -
uni-app 180查看好友朋友圈完善（一）
前端H5同步APP代码/common/free-lib/chat.jsimport $U from "./util.js";import $H from './request.js';import $store from '@/store/index.js';class chat { constructor(arg) { this.url = arg.url this.isOnline = false this.socket = null this.reconnectConfi原创 2022-01-13 18:06:10 · 216 阅读 · 0 评论 -
uni-app 179转发名片功能
/pages/chat/chat-list/chat-list.vue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="选择" showBack :showRight="true"> <free-main-button :name="muliSelect ? '发送 ('+selectCount+')' : '多选'" slot="right" @click原创 2022-01-13 17:19:32 · 173 阅读 · 0 评论 -
uni-app 178添加背景提示音（二）
解决iOS端提示音自动播放下面是源码视图/manifest.json{ "name" : "WChat", "appid" : "__UNI__DAD2A12", "description" : "", "versionName" : "1.0.0", "versionCode" : "100", "transformPx" : false, /* 5+App特有相关 */ "app-plus" : { "usingCo原创 2022-01-13 14:47:31 · 1896 阅读 · 0 评论 -
uni-app 176添加背景提示音（一）
/common/free-lib/chat.jsimport $U from "./util.js";import $H from './request.js';import $store from '@/store/index.js';class chat { constructor(arg) { this.url = arg.url this.isOnline = false this.socket = null this.reconnectConfirm = 0 this原创 2022-01-12 18:16:11 · 569 阅读 · 0 评论 -
uni-app 175app端兼容处理（二）
/pages/find/moments/moments.nvue<template> <view> <free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar> <view class="position-relative" style="height: 620rpx;"> <image src="h原创 2022-01-12 17:13:05 · 285 阅读 · 0 评论 -
uni-app 174app端兼容处理（一）
首先我们将所有的.vue文件改为.nvue,如下图注意，这里是pages文件夹下面所有的.vue文件结尾的然后我们修改 manifest.json文件，如下图所示原创 2022-01-11 18:06:11 · 406 阅读 · 0 评论 -
uni-app 173小程序端兼容处理
/common/free-icon.css/* @font-face {font-family: "iconfont"; src:url('/static/font_1365296_2ijcbdrmsg.ttf') format('truetype')} */@font-face {font-family: "iconfont"; src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAACNcAAsAAA原创 2021-12-22 09:40:56 · 26304 阅读 · 0 评论 -
uni-app 172标签列表和标签用户列表
app/router.js // 标签列表 router.get('/tag/list',controller.tag.list); // 标签用户列表 router.get('/tag/read/:id',controller.tag.read);app/controller/group.js'use strict';const Controller = require('egg').Controller;class TagController extends Control原创 2021-12-27 23:00:00 · 628 阅读 · 0 评论 -
uni-app 171部分小细节优化
/pages/mail/user-base/user-base.vue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white"> <free-icon-button slot="right" v-if="detail.friend"><text class="原创 2021-12-22 23:30:00 · 157 阅读 · 0 评论 -
uni-app 170邀请加入群聊（二）
下图是我测试截图感谢大家观看，我们下次见原创 2021-12-22 22:30:00 · 490 阅读 · 0 评论 -
uni-app 169邀请加入群聊（一）
app/router.js// 将某人加入群 router.post('/group/invite',controller.group.invite);app/controller/group.js'use strict';const Controller = require('egg').Controller;class GroupController extends Controller { // 获取群聊列表 async list() { const { c原创 2021-12-27 08:30:00 · 432 阅读 · 0 评论 -
uni-app 168将某人踢出群聊（三）
/pages/chat/chat-set/chat-set.vue<template> <view style="background-color: #EDEDED;"> <!-- 导航栏 --> <free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar> <view class="flex flex-wrap py-3 bg-white">原创 2021-12-26 23:15:00 · 194 阅读 · 2 评论 -
uni-app 167将某人踢出群聊（二）
app/router.js // 将某个群成员踢出 router.post('/group/kickoff',controller.group.kickoff);app/controller/group.js'use strict';const Controller = require('egg').Controller;class GroupController extends Controller { // 获取群聊列表 async list() { co原创 2021-12-27 08:15:00 · 2287 阅读 · 10 评论 -
uni-app 166将某人踢出群聊（一）
/pages/chat/group-user/group-user.vue<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="选择" showBack :showRight="false"> </free-nav-bar> <!-- 搜索框 --> <view class="p-3 bg-light position-fi原创 2021-12-26 23:00:00 · 145 阅读 · 0 评论