表单validatefield动态vue
vue3 + element 实现季度选择框
效果图 1.子组件 <template> <div class="el-quarter-wrap"> <el-popover title="" content="" width="320" v-model="visible"> <template #reference> <el-input v-mo ......
【技术积累】Vue.js中的组件库【一】
博客推行版本更新,成果积累制度,已经写过的博客还会再次更新,不断地琢磨,高质量高数量都是要追求的,工匠精神是学习必不可少的精神。因此,大家有何建议欢迎在评论区踊跃发言,你们的支持是我最大的动力,你们敢投,我就敢肝 ......
vue3如何正确设置 Tailwind CSS
1.创建vue3项目 npm init vue@latest 需要配置的选择YES 2.切换到 项目newProject目录下 npm install 下载依赖包 3.安装 tailwind 及其依赖项(PostCSS 和自动前缀) npm install -D tailwindcss@latest ......
vue3+ts利用draggable组件实现拖拽
界面展示 实现步骤 安装组件(vue3引入的包为vuedraggable@next ,vue2为vuedraggable) npm i -S vuedraggable@next 引入并使用组件 <template> <!-- 此页面template中没有可刷新页面的数据变化,拖拽会不起作用,所以加个 ......
关于项目开发中遇到的难点问题-vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗口时候,sessionStorage中数据丢失问题
vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗口时候,sessionStorage中数据丢失问题。 问题描述:项目中A页面有table列表,在列表上方有“导入文件”按钮,点击按钮后需在浏览器新窗口中打开B页面,在B页面进行选择文件上传xlsx数据经过一系列校验后,将最终确定的数据返回回显在 ......
vue3 checkbox 单选
<template> <div class="ant-checkbox-group ant-checkbox-group-outline"> <label v-for="item in getOptions" :key="`${item.value}`" :class="getCheckboxwra ......
vue3组合式 API_为 computed() 标注类型
computed() 会自动从其计算函数的返回值上推导出类型 <template> <h3>{{ doubleCount }}</h3> </template> <script setup lang="ts"> import { ref,computed } from "vue" const cou ......
vue3+antd-vue实现增改弹窗
对于前端来说,在后台系统中最常见的需求,就是基于表单表格的正删改查。对于增和改,需要实现弹框组件。代码如下: ``` ``` ###使用方法: ###模板使用组件 ``` ``` ###控制打开弹窗 ``` 编辑 ``` ###js const classModal = ref(null) func ......
解决element ui 下拉框表单验证切换选项就直接触发的问题
element ui 下拉框表单验证正确使用步骤 1.确保form组件的:model属性绑定了表单的数据对象 2.确保form组件的rules绑定了对应的rule 3.确认要验证的表单item绑定了对应的prop属性 注意:prop属性的名称要和rule里面的名称一样并且和v-model的属性名称一 ......
vueuse使用(VUE3)
vue create my-vue HelloWorld.vue <template> <button type="button" @click="open">选择文件</button> </template> <script> import { useFileDialog } from '@vue ......
vue contenteditable编辑模式下,样式不生效
换行后生成div,设置的样式没有生效 ***原因 style标签上设置了scoped 解决办法 1、去掉style的scoped属性 2、额外写一个style,不加scoped(vue支持多个style) <div class="mainText-body" contenteditable="tru ......
vue3中组合式 API_为 reactive() 标注类型
reactive() 也会隐式地从它的参数中推导类型 <template> <h3>{{ book.title }}</h3> <h3>{{ book.author }}</h3> </template> <script setup lang="ts"> import { reactive } fr ......
Vue3 响应式全局对象json 动态绑定界面四 (Div块样式 Json数据绑定)
效果 man.js 定义 响应式全局对象 globalData //全局对象 const globalData=reactive({ extTelTalkData: [ { userExten: "1000", userName: "刘亦菲", callStatus:"通话" }, { userEx ......
Vue3 响应式全局对象json 动态绑定界面三 (Div块样式 字符串叠加)
效果 man.js 定义 响应式全局对象 globalData //全局对象 const globalData=reactive({ missedCallData:"", currentUserTel:"", }) app.provide('globalData', globalData); 在ma ......
Vue3 响应式全局对象json 动态绑定界面二 (方块矩阵样式)
效果 main.js //全局对象 const globalData=reactive({ extTelMonitorData: [ { title: '用户组一', list: [ { groupID: "0", groupName: "All Users", userDomain: "equii ......
Vue3 响应式全局对象json 动态绑定界面一 (列表样式)
效果 man.js 定义 响应式全局对象 globalData const globalData=reactive({ extTelListData: [ { userExten: "1000", userName: "秦岚", callStatus:"通话" }, { userExten: "10 ......
VUE|模板语法
## 1 模板 ### 1) 什么是模板 > 什么是模板 > > 由Vue解析的HTML字符串 > Vue的主要工作 1. 编译模板 2. 挂载 ### 2) 如何确定模板 确定模板有几种方式 1. 没有指定`template`选项, 以容器的`innerHTML`做为模板 2. 指定`templa ......
VUE|组件基础
## 1 快速体验 > 步聚 1. 定义组件 2. 导入组件 3. 引用组件 > 语法 ```vue 模板 ``` ### 1) 定义组件 在`components`目录下, 创建组件文件`TheCounter.vue` ```vue 计数器:{{ count }} 点击+1 ``` ### 2) ......
VUE|计算属性
## 1 计算属性 ### 1) 什么是计算属性 计算属性就是基于现有属性计算后的属性 ### 2) 计算属性的作用 计算属性用于对原始数据的再次加工 ### 3) 案例 > **需求** > > 实现如下效果 > > ```html Document 请输入一个字符串: 反转后的字符串: {{re ......
VUE|侦听器
## 1 侦听器 ### 1) 什么是侦听器 可以通过watch配置项, 监听已经存在的属性的改变 ### 2) 语法 ```javascript watch: { // 监听data中的firstName属性 firstName() { // 执行一系列的操作 }, },watch: { // 监 ......
第十五篇 - Vue添加图标
参考链接:https://www.yii666.com/blog/45780.html 添加图标的两种方式: 1. 直接使用element-plus/icons-vue(图标名称网址:https://element-plus.gitee.io/en-US/component/icon.html#ic ......
VUE|组合式API
# VUE|组合式API ## 1 setup语法糖 在`vue`项目中, 通常使用`setup`语法简化书写 setup的特点 1. 在setup语法中定义**变量**, 可以直接在**模板**中使用 2. 在setup语法中定义**函数**, 可以直接在**模板**中使用 3. 导入的组件对象, ......
vue3高阶用法一
### 1. v-model 和v-model:value为什么要的需要加: + v-model vue3中使用了modelValue来代替了value, 所以子组件触发emit的写法为 emit('update:modelValue','xxx') + v-model:value 为什么有的需要加 ......
第十一节 动态规划 - 3
## 区间 DP ## A. 能量项链 **题目描述** 在 Mars 星球上,每个 Mars 人都随身佩带着一串能量项链。在项链上有 $N$ 颗能量珠。能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数。并且,对于相邻的两颗珠子,前一颗珠子的尾标记一定等于后一颗珠子的头标记。因为只有这样 ......
vue复制data中的对象
要复制Vue中的data对象,可以使用Object.assign()或者ES6解构赋值语法。以下是两种方法的示例: 使用Object.assign(): // 假设对象名为sourceData const clonedData = Object.assign({}, this.sourceData) ......
在Vue3中,解决 Echart tooltip 不显示的问题
为什么在 Vue 中使用 ECharts 时图表显示异常? Vue3,中使用 reactive 及 ref 会导致 ECharts 的对象实例被代理成为响应式对象,影响 ECharts 对内部属性的访问,可能会导致图表无法正确显示等一系列意外问题,且会由于深度监听而极大地降低图表展示性能。 解决方案 ......
springboot中使用动态sql约束查询
最近遇到个新功能,就是需要进行动态sql的查询,因为不确定会有多少个查询条件,所以就搜集各种资料,发现springboot中有两种方式,一种是注解形式,一种是xml的形式,我用的是注解的形式,xml的可以参考https://blog.csdn.net/qq_61903414/article/deta ......
前后端分离实现注册+登录(Vue3.0 + Django3.2)
> 博客地址:https://www.cnblogs.com/zylyehuo/ # 一、使用 vite+webstorm 搭建 Vue 环境,构建前端 ## 1、结构树 * ![](https://img2023.cnblogs.com/blog/3071480/202307/3071480-20 ......
vue-router安装配置和使用
title: vue-router安装配置和使用 date: 2023-07-20 17:55:19 tags: - vue categories: - 工程 - 前端 top: ![](https://img2023.cnblogs.com/blog/2863049/202307/2863049- ......