vue3

vue3 自定义指令控制按钮权限

经过1个周的摸索和查阅资料,终于搞定VUE3中自定义指令,实现按钮级别的权限控制。当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(button按钮),这样用户体验不好,让人感觉没有这个功能。为了提高用户体验,当该按钮无权使用时,使用e ... »

ytwqg vue3

Vue3实现九宫格抽奖的示例代码

目录 前言 前期构思 具体实现 1、布局 2、指定奖品 3、抽奖 最终效果 前言 对象说晚饭吃什么太难选择,问我能不能做一个九宫格抽奖来决定我们晚上吃什么,emmm。 既然对象都开口了,不做也不行啊,最后给大家看一个简化版的(没有美工样式、编辑奖品这些) 前期构思 首先是 »

Vue2 与 Vue3 的数据绑定原理及实现

目录 介绍 Object.defineProperty Proxy 介绍 数据绑定是一种把用户界面元素(控件)的属性绑定到特定对象上面并使其同步的机制,使开发人员免于编写同步视图模型和视图的逻辑。 观察者模式又称为发布-订阅模式,定义对象间的一种一对多的依赖关系,当它本身的状态发生改 »

vue3 hook自动导入原理解析

目录 1. vue3 自动导入 2. API 的 自动引入 Ⅰ、使用前后对比 Ⅱ、安装三方件 Ⅲ、配置三方件 3. 组件的自动引入 Ⅰ、使用前后对比 Ⅱ、安装三方件 Ⅲ、配置三方件 1. vue3 自动导入 原理 : 预加载前,该插件自动 按需导入 了,在本vue文件中使用 a »

vue3组合式api实现v-lazy图片懒加载的方法实例

目录 前置知识 Intersection Observer Vue3指令周期 image对象 思路 完整代码 总结 前置知识 Intersection Observer 浏览器提供api,用于检测目标元素和祖先元素/***文档视窗 (viewport) 交叉状态的方法。 »

vue-manage-system升级到vue3的开发总结分析

目录 前言 按需导入 组件的 name 选项 pinia 权限管理 Typescript 总结 前言 近期抽了点时间,对 vue-manage-system 这个项目进行了升级,从 vue2 升级到 vue3、 elementplus、vite、pinia、typescript。这也是对此 »

vue3 组件与API直接使用的方法详解(无需import)

目录 1. vue3 自动导入 2. API 的 自动引入 3. 组件的自动引入  1. vue3 自动导入 原理 : 预加载前,该插件自动 按需导入 了,在本vue文件中使用 api 和 组件 而 编写代码 的时候,就无需 import 了 注意并不是全局导入,并不会影响到资源 »

vue3中的setup使用和原理解析

目录 1.前言 2.setup 3.源码分析 setupStatefulComponent 执行setup函数  finishComponentSetup 4.总结 1.前言 最近在做vue3相关的项目,用到了组合式api,对于vue3的语法的改进也是大为赞赏,用起来十分方便。对于已 »

Vue3组合式API之getCurrentInstance详解

Vue2中,可以通过this来获取当前组件实例;  Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined。 在Vue3中,getCurrentInstance()可以用来获取当前组件实例  vue3官方文档解释 let { »

Vue3属性绑定方法解析

前言: 这篇文章来自我们团队的田鑫雨同学,强劲的“后浪”。不论使用已有框架,还是自实现框架,数据绑定都是一个热点话题,来看看他对Vue3数据绑定方式的分析 Vue3 通常使用 v-bind 绑定数据到子元素上,对于一个元素接收数据的方式有两种:通过property或通过attribute,本文通 »

vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

ref、isRef、toRef、toRefs、toRaw看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别。 1、ref ref 属性除了能够获取元素外,也可以使用 ref 函数,创建一个响应式数据,当数据值发生改变时,视图自动更新。 <script lang=" »

vue3 的 ref、isRef、toRef、toRefs、toRaw 详细介绍

ref、isRef、toRef、toRefs、toRaw 看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别。 1、ref ref 属性除了能够获取元素外,也可以使用 ref 函数,创建一个响应式数据,当数据值发生改变时,视图自动更新。 <script lang="ts" s ... »

vue2与vue3中的生命周期执行顺序有什么区别

本文小编为大家详细介绍“vue2与vue3中的生命周期执行顺序有什么区别”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue2与vue3中的生命周期执行顺序有什么区别”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 vue2与vue3中生命周期执行顺序区别 生命周期比较 »

Vue3中toRef和toRefs函数怎么使用

这篇文章主要介绍“Vue3中toRef和toRefs函数怎么使用”,在日常操作中,相信很多人在Vue3中toRef和toRefs函数怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中toRef和toRefs函数怎么使用”的疑惑有所帮助!接下来,请跟着小编 »

使用Docker制作的Rails6 + Vue3 + PostgreSQL开发环境

介绍 根据下面的文章,Rails6 + PostgreSQL,Vue3我已经用 Docker 构建了每个开发环境。 这一次,我想使用 Docker Compose 来管理这些已经单独构建的开发环境。 目录 1.目录结构2.完成的文件3.front/Dockerfile的修改4.修改docker »

Vue3 封装 Element Plus Menu 无限级菜单组件

本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。 ... »

youyacoder

vue3中defineComponent 的作用

vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeScript 而存在的。 我都知道普通的组件就是一个普通的对象,既然是一个普通的对象,那自然就不会获得自 ... »

musicbird

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

由于 vite 出现的时间不是很久,基于 vite 创建的项目没有 vue-cli 那么完整,如果要使用 vue 全家桶、ESLint 等,还需要开发人员手动添加和配置,步骤稍多,略繁琐。虽然在创建项目时可以选择 *Customize with create-vue*,但我由于网络问题,一直没有成功... ... »

youyacoder

使用 Vue3 构建 Web Components

有时候想写一个无关框架组件,又不想用原生或者 Jquery 那套去写,而且还要避免样式冲突,用 Web Components 去做刚觉就挺合适的。但是现在 Web Components 使用起来还是不够灵活,很多地方还是不太方便的,如果能和 MVVM 搭配使用就好了。早在之前 Angular 就支持 ... »