随笔分类 - Vue
关于display:flex;justify-content: space-between;的最后一个元素无法左对齐的问题解决方法
摘要：1. 问题：当使用v-for遍历一个数组，当数字长度不是要进行左右对齐的数字的倍数*（以3为例），无法进行左对齐的问题 解决方法： 1. 使用watch监听这个数组的长度的变化，判断这个数组的长度是否3%2是不是等于0，如果是为则这个数字追加一个空对象，代码如下： watch:{ rowsForm:
阅读全文
ElementUI tree 折叠全部节点
摘要：第一 引入树组件，需要通过按钮来控制展开/折叠必须要配置 ref 属性和node-key，树数据要和node-key能匹配 <template> <el-button @click="foldTree">折叠全部节点</el-button> <el-button @click="expandTree
阅读全文
input只能输入数字、小数的方法
摘要：1. 在input中设置 type="number" 这个属性可以帮助我们限制文本框输入的文本只能是数字或者小数，但是会跟随一个默认的样式，我们需要把默认样式删掉 代码： <style> input::-webkit-outer-spin-button, input::-webkit-inner-s
阅读全文
vue 表单校验el-form-item加上v-if不触发校验
摘要：1 问题：在使用element是使用自定义表单校验，当表单校验el-form-item加上v-if不触发校验的问题 下图是自定义的表单校验 当切换为v-if为true的条件时，表单校验无法触发 解决方法：在el-form-item的v-if上加一个key值，令key=prop的值就解决了 自定义校验
阅读全文
vue2 input防抖功能
摘要：1. 在el-input绑定@input事件 2. 在data中定义timer为null 3.在methods中定义@input绑定的方法 4. 在setTimeout中调用对应处理的方法 <el-input style="width: 140px;color:#FF8900" size="smal
阅读全文
vue页面加载闪烁的问题以及解决方案
摘要：一、原因： 问题：当我们打开Vue页面的时候，如果弱网环境，会出现一个闪烁的效果下图：加载闪烁问题效果 原因：因为在浏览器中先执行html代码，先渲染Dom，然后再执行JavaScript代码，Vue还来不及处理的模板 二、解决： 在闪烁元素的最外层添加上一个v-cloak，并在css中添加样式：[
阅读全文
vue的异步组件
摘要：异步组件 异步组件：可以在首页加载之前先加载的组件，主要是做性能优化，提高用户体验 一、基本用法 在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能： import { defineAsyncC
阅读全文
vue3和vue2的区别
摘要：一、Vue3介绍 Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了 在更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受
阅读全文
Vue中组件和插件的区别
摘要：一、组件是什么 1：组件的定义： 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件 2：组件的优势 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等
阅读全文
Vue搭建项目的完整流程 如何搭建一个完整的vue项目 vue项目架构
摘要：vue项目架构 技术栈：vue3、vue-router 、vuex(和pinia)、element plus 、axios、ts、sass 1、安装vue3 脚手架+ ts vue create admin 2、分析目录结构 node_modules =>依赖包 public => 静态文件 src
阅读全文
vue组件的对象式写法，vue中的h函数
摘要：render：将虚拟dom转为真实dom h函数：创建的是vnode，也可以成为createVnode函数 语法：h(元素名称 ,这个元素的数据,子集) 第一个参数：可以为一个html标签，一个组件，一个异步组件，或者是一个函数式组件。 第二个参数：{ Object } Props，与attribu
阅读全文
Vue组件之间的通信方式都有哪些？
摘要：一、组件间通信的概念 我们通常把组件间通信这个词进行拆分 组件 通信 都知道组件是vue最强大的功能之一，vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传
阅读全文
Vue 注册全局组件的方式
摘要：一、语法：Vue的实例.component("组件名称",组件） 1、方式一：这个组件就是 vue文件 import { createApp,h } from 'vue' //引入 创建vue实例的api import App from './App.vue' //引入 根组件 let app =
阅读全文
Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()
摘要：一、 provide和inject（依赖注入） 1：在父级组件中提供数据 语法：provide('提供给子组件的变量名',提供给子组件的数据) 2: 在子级组件中获取收据 语法：let nums=inject('父组件传过来的变量名') 二、在Vue3中获取组件实例的方法getCurrentInst
阅读全文
Vue3中的响应式api
摘要：一、setup文件的认识 特点1：script 中间的内容就是一个对象 特点2：script 在第一层 定义的方法 或者 变量 => 就是这个对象 属性 => 顶层的绑定回被暴露给模板（模板可以直接使用这个变量） 特点3：setup 默认执行生命周期beforeCreate created 注意：这
阅读全文
