vue
关注
分享
扫一扫
文章平均质量分 55
duansamve
我的Web前端(React、Vue)、NodeJS......开发笔记
展开
-
破解 Vue3.x 新特性
一、refref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性：基本语法：import { ref } from 'vue'// 创建响应式数据对象 count，初始值为 0const count = ref(0)// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以console.log(count.value) // 输出 0// 让 count.原创 2021-10-27 11:15:52 · 302 阅读 · 0 评论
-
手动封装Vue组件并发布到NPM
1、首先用vue-cli4.5新建一个简易版本的Vue项目，方法如下:创建一个项目 | Vue CLI目录结构如下：v src-v util--v plugins---v perms---- codes.js---- index.js---- index.vuepackage.json2、新建line-chart文件夹，新开发的自定义组件放在此文件夹下，其中：index.vue：为组件开发文件，需要注意是组件必须声明name，因为name是该组件标签，打包发布到npm后其原创 2020-06-30 23:08:16 · 779 阅读 · 0 评论 -
Vue性能优化方法与技巧大全
一、常用指令：v-if：v-show：v-for：v-bind：v-on：v-is：二、方法、计算属性、侦听器：三、Class和Style绑定：四、事件处理；五、表单输入绑定：六、组件：1、如何定义一个组件；2、父->子通信、子->父通信；3、组件分类：普通组件、动态组件、异步组件；4、slot：...原创 2020-05-17 14:14:09 · 590 阅读 · 0 评论 -
解析Vue2 Diff 算法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/bootstr原创 2018-08-15 23:17:47 · 1341 阅读 · 0 评论 -
vue-router实现原理
路由router\index.js配置：import Vue from 'vue'import Router from 'vue-router'const Home = () => import('@/components/HelloWorld')const Badge = () => import('@/components/Badge')const Progress ...原创 2019-09-26 10:04:29 · 2008 阅读 · 0 评论 -
Web端实时播放RTSP视频流（监控）
2、点击Windows图标，选第一个：Windows builds from gyan.dev3、跳转到下载页面：4、下载后放到合适的位置，不用安装，解压即可：5、配置path复制解压后的\bin路径，配置环境变量如图：命令行输入：ffmpeg -version出现如下信息则说明配置成功。原创 2025-01-15 11:46:23 · 905 阅读 · 0 评论 -
若依前后端分离版（Vue3）在新标签页打开页面
基于RuoYi-Vue3前后端分离框架。原创 2025-01-02 09:45:05 · 705 阅读 · 0 评论 -
如何快速搭建若依管理系统？
6、IntelliJ IDEA通过Maven下载开发依赖；原创 2024-12-15 22:14:44 · 483 阅读 · 0 评论 -
el-table动态新增/删除表单行及校验规则
点击新增，table新增一行，点击删除，删除所在行。若验证不通过，点击“确定”，提示如下图。原创 2024-10-20 21:48:11 · 477 阅读 · 0 评论 -
Vue3在大数据场景下原生实现单元格合并，让Thead固定让Tbody滚动
【代码】Vue3在大数据场景下原生实现单元格合并，让Thead固定让Tbody滚动。原创 2024-10-20 10:28:01 · 377 阅读 · 0 评论 -
LogicFlow工作流在React和Vue3中的使用
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。原创 2024-08-12 10:26:37 · 1415 阅读 · 2 评论 -
React/Vue项目解决跨域的方法
CORS是浏览器的一种机制，当发起跨域请求时，服务器可以返回一个特殊的响应头Access-Control-Allow-Origin来授权给定源访问该资源。只需要在服务器端设置响应头即可实现CORS。通过在请求中添加一个回调函数的参数，服务器返回的数据会包裹在该回调函数中，实现跨域获取数据。在上述示例中，将以/api开头的请求转发到http://api.example.com，并将请求路径中的/api部分去除。在上述示例中，将以/api开头的请求转发到http://api.example.com。原创 2024-07-22 22:06:07 · 720 阅读 · 0 评论 -
vue3使用方式汇总
iconfont阿里：https://www.iconfont.cn/在main.js中导入。原创 2024-07-07 17:00:57 · 289 阅读 · 0 评论 -
vue-router 4获取当前路由及路由传参
传递参数：src/components/Today.vue。接收参数：/src/components/Map.vue。路由配置：/src/router/index.ts。原创 2024-07-05 22:43:31 · 361 阅读 · 0 评论 -
前端文件预览汇总
vue-office支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3，也支持非Vue框架的预览。原创 2024-07-04 11:17:40 · 644 阅读 · 0 评论 -
element-plus 2.7.6相关使用方式
【代码】element-plus 2.7.6相关使用方式。原创 2024-07-01 11:03:51 · 455 阅读 · 0 评论 -
解决vue3中父组件使用ref 获取不到子组件属性问题+子组件触发父组件中方法的方式
父子组件使用语法糖，父组件通过给子组件定义ref访问其内部事件。原创 2024-06-24 22:47:55 · 1247 阅读 · 0 评论 -
Vue3系列：8、Vue3新组件
/原创 2024-05-25 22:15:15 · 338 阅读 · 0 评论 -
Vue3系列：7、其它 API
通过使用 shallowRef()和 shallowReactive()来绕开深度响应。浅层式API创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。原创 2024-05-25 22:13:52 · 419 阅读 · 0 评论 -
Vue3系列：6、组件通信
子 => 父。注意区分好：原生事件、自定义事件。原生事件：事件名是特定的（clickmosueenter等等）事件对象$event: 是包含事件相关信息的对象（pageXpageYtargetkeyCode自定义事件：事件名是任意名称事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！--在父组件中，给子组件绑定自定义事件：--> < Child @send-toy = " toy = $event " />原创 2024-05-25 22:12:18 · 380 阅读 · 0 评论 -
Vue3系列：5、pinia
第二步：操作此时开发者工具中已经有了pinia选项。原创 2024-05-25 22:10:54 · 277 阅读 · 0 评论 -
Vue3系列：4、路由
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被。作用：让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：控制路由跳转时操作浏览器历史记录的模式。作用：可以简化路由跳转及传参（后面就讲）。作用：将特定的路径，重新定向到已有路由。浏览器的历史记录有两种写入方式：分别为。参数时，需要提前在规则中占位。文件夹，一般组件通常存放在。掉的，需要的时候再去。的对象写法，必须使用。原创 2024-05-25 22:09:21 · 435 阅读 · 0 评论 -
Vue3系列：3、Vue3核心语法
Vue3核心语法原创 2024-05-25 22:07:33 · 384 阅读 · 0 评论 -
Vue3系列：2、创建Vue3工程
点击查看备注：目前vue-cli已处于维护模式，官方推荐基于Vite创建项目。原创 2024-05-25 22:03:49 · 309 阅读 · 0 评论 -
Vue3系列：1、Vue3简介
2020年9月18日，Vue.js发布版3.0One Piece（n3.3.4。原创 2024-05-25 22:02:27 · 284 阅读 · 0 评论 -
vue中使用xlsx插件导出多sheet excel实现方法
【代码】vue中使用xlsx插件导出多sheet excel实现方法。原创 2023-10-26 21:45:34 · 1665 阅读 · 0 评论 -
企业微信应用开发实践
使用企业微信开放接口和工具资源，为企业提供丰富的应用服务。原创 2022-11-25 22:34:55 · 3293 阅读 · 0 评论 -
Electron集成React和Vue
Electron集成React或者Vue的方式很多，这是灵活性比较大的一种原创 2022-08-23 09:55:29 · 887 阅读 · 0 评论 -
vue-cli3.0如何在打包时设置静态资源目录？
vue-cli3.0如何在打包时设置静态资源目录？原创 2022-06-18 23:26:43 · 2393 阅读 · 0 评论 -
常用第三方Vue/NodeJS组件、工具
1、vue-treeselect：vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持。支持嵌套选项的单选和多选 模糊匹配 异步搜索 延迟加载（仅在需要时加载深度选项的数据） 键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等） 丰富的选项和高度可定制的 支持 多种浏览器需要Vue 2.2+官网：Vue-Treeselect | Vue-Treeselect 中文网............原创 2022-04-29 13:48:31 · 1200 阅读 · 0 评论 -
彻底明白Vue2中.sync修饰符
对于Vue的初学者来讲，肯定会感觉prop的写法很麻烦，很讨厌！你肯定想如果prop也可以实现双向绑定那怎是一个爽字了得！不过现实是残酷的，如果子组件可以任意修改父组件的内容，那势必会带来数据的混乱，从而造成维护的困扰！官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！先来完成一个小功能：通过父组件按钮将子组件显示出来，如图：父组件代码：<template> <div>原创 2022-02-12 22:40:38 · 11727 阅读 · 3 评论 -
Vue-Router 4.x填坑
查阅Vue-Router 4.x官方文档（Vue Router4.x），你会发现里面讲得很不完善，跳过了很多步骤，如果按照官方文档在项目中使用，你会发现很多地方会报错。这里讲下Vue-Router 4.x的正确使用方式：1、引入createRouter、createWebHashHistory：import { createRouter, createWebHashHistory } from "vue-router";/src/router/index.js：import { cre.原创 2021-11-22 09:27:27 · 592 阅读 · 0 评论 -
vue使用路由懒加载以后不能获取当前url
当使用路由懒加载时：import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', //原创 2021-11-10 21:35:33 · 1164 阅读 · 0 评论 -
Vue中权限控制完全实现
一、菜单的实现：登录之后获取到的数据：[ { path: "/main/data", alias: "/data", name: "data", meta: { title: "统计", icon: "el-icon-house", re原创 2021-06-25 16:54:51 · 1622 阅读 · 0 评论 -
Vue+Element实现左侧无限级菜单
NavItem.vue：<template> <div> <el-menu-item :index="basePath" v-if="!item.child"> <i class="el-icon-menu"></i> <span slot="title">{{item.name}}</span> </el-menu-item> <el-submen原创 2021-06-08 16:52:00 · 708 阅读 · 0 评论 -
vue调试工具vue-devtools安装及使用
1、到github下载：（下载一定要记得是master主分支的代码，默认克隆后进入的是dev分支，执行npm run build会报错）直接下载zip文件即可。github国内很多地方访问不是很稳定，git clone下载代码的方式可能会比较慢，所以直接下载zip文件。2、在vue-devtools目录下安装依赖包：cd vue-devtoolscnpm install3、依赖包下载完后执行cnpm run build,编译打包成功后会在shells下生成chrome文件夹。此文件夹原创 2021-04-04 18:34:45 · 3641 阅读 · 0 评论 -
vue element的单选框组模拟tabs使用echarts
<template> <el-card> <el-row> <el-col :span="12"> <el-radio-group v-model="chartComponents"> <el-radio-button label="lineChart">折线图</el-radio-button> .原创 2021-04-04 15:37:31 · 282 阅读 · 0 评论 -
vue element的tabs中使用echarts
tabs中使用echarts，除了第一个图表能默认显示外，当tabs切换的时候，第一个之后的可能就显示不了了，如何解决？<template> <div> <el-row> <el-col :span="24"> <el-card> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> .原创 2021-04-02 09:13:20 · 2242 阅读 · 0 评论 -
Vue+Element+Node.js+Mysql实现后端分页
table.vue：<template> <div> <el-card> <el-row :style="{marginBottom: '15px'}"> <el-col :span="24"> <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</原创 2021-03-21 21:53:50 · 2219 阅读 · 0 评论 -
Vue中如何设置代理跨域请求数据
webpack提供了配置代理的方法解决跨域：1、在vue-cli项目中打开webpack.dev.cof.js，如下：devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], },原创 2021-01-04 21:34:19 · 761 阅读 · 0 评论