1.vue+js 语法 1.使用 v-model 实现双向绑定 父组件 12345678910111213141516171819202122232425<template> <div> <button @click="showModal">显示弹框</button> <my-modal v-model="modalVisible"></my-modal> </div></template><script> import MyModal from './MyModal.vue'; export default { components: { 'my-modal': MyModal, }, data() { return { modalVisible: false, & ...

git相关插件：gitLens、Git History、Git History Diff 汉化插件： Chinese (Simplified) 开发提示相关插件： Tabnine AI（强推）、Path Intellisense（路径提示）、Vetur、Volar、Auto Close Tag、Auto Complete Tag、Auto Rename Tag、HTML Snippets、Wrap Console Log Lite 浏览器调试插件： JavaScript Debugger、Debug Visualizer、scode-js-debug 静态服务器：Live Server 代码运行器： Code Runner 正则提示插件： any-rule、Regex Previewer（辅助验证正则结果） Docker插件： Docker 格式化类插件： EditorConfig for VS Code、ESLint 进制文件查看： Hex Editor TODO提示： Todo Tree 流程图绘制： drawio PDF查看： vscode-pdf Markdown预览：Mar ...

ECharts 是一个功能强大、灵活多样的数据可视化库，提供了丰富的配置选项和 API 接口。以下是一些常用的 ECharts 属性： 常用属性1234567891011121314151617181920212223title：图表标题，可以设置主标题和副标题。tooltip：提示框组件，用于展示鼠标悬停在数据点上时的信息。legend：图例组件，用于展示不同系列的名称和颜色。xAxis 和 yAxis：坐标轴组件，用于展示数据的数值范围和刻度。series：系列列表，用于展示图表的数据内容。grid：直角坐标系内绘图网格，可以设置图表的位置、大小和边距等。toolbox：工具箱，提供了一些常用的工具和功能，如下载、缩放等。dataZoom：数据区域缩放组件，用于对图表进行局部放大和缩小。visualMap：视觉映射组件，用于将数据映射到不同的视觉元素，如颜色、大小等。backgroundColor：图表背景色。animation：动画效果配置，可以控制图表的动画效果、时长和延迟等。color：图表的颜色主题，可以使用预定义的颜色主题或自定义颜色。 具体配置xAxis，yAxis简 ...

要在 Vue2 中使用 ECharts，可以先在项目中引入 ECharts 库，然后在 Vue 组件中创建 ECharts 实例并传入配置选项。以下是封装 ECharts 组件的基本步骤： 安装 ECharts使用 npm 安装 ECharts： 1npm install echarts --save 创建一个 ECharts 组件在 components 文件夹下创建一个 ECharts 组件： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<template> <div :id="chartId" :style="{height: height,width: width}"></div></template><script> import echarts from 'echart ...

Math.random()使用 Math.random() 函数生成随机数并转换为字符串，然后使用 substr() 函数截取字符串的一部分作为 ID： 1234function generateRandomId() { var id = Math.random().toString(36).substr(2, 10); return id;} Date.now()使用 Date.now() 函数获取当前时间戳，并将其转换为字符串作为 ID： 1234function generateTimestampId() { var id = Date.now().toString(); return id;} UUID生成符合 UUID（通用唯一标识符）标准的随机 ID： 1234567function createUUID() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r ...

uni-app 支持通过 可视化界面、vue-cli 命令行 两种方式快速创建项目。 可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。 开始之前，开发者需先下载安装如下工具：HBuilderX：官方 IDE 下载地址HBuilderX 是通用的前端开发工具，但为 uni-app 做了特别强化。 除了 HBuilderX 可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。 因为习惯使用 vscode 进行开发，我选择 vue-cli 命令行的方式来创建项目，下面是具体操作。 初始化项目环境安装1npm install -g @vue/cli@4.5.15 创建 uni-app使用 Vue21vue create -p dcloudio/uni-preset-vue my-project 使用 Vue3/Vite 版创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板） 1npx degit dcloudio/uni-preset-vue#vite my- ...

使用 scale 适配大屏。实现数据大屏在任何分辨率的电脑上均可安然运作。无需特定编写 rem 单位，也不需要考虑单位使用失误导致适配不完全。您即使全部用 position 去定位在其他屏幕上都不会乱。（%和 px 随便用） 布局在 vue2 中的写法如下：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061<template> <div class="dataScreen-container"> <div class="dataScreen" ref="dataScreenRef"> <div class="dataScreen-header"> <div class="header-lf"></div> ...

最近遇到需求要求给 element 的 tabs 组件实现拖拽,通过查资料找到 Sortable 插件此插件既能支持拖拽 tabs,也能支持拖拽 table,具体使用代码如下: [1]sortablejs官方文档 1.table 拖拽12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576<script>import { fetchList } from '@/api/article'import Sortable from 'sortablejs'export default { name: 'DragTable', filters: { statusFilter(status) { const statusMap ...

虚拟表格是指只渲染当前可视区域内的数据，通过滚动页面或者表格来动态加载和渲染数据，从而提升页面的性能和用户体验。通常在 vue2 项目中，element-ui 和 ant design vue 组件库是不支持虚拟表格的。vue3 项目，element-plus 和 ant design vue 组件库已支持。在 Vue2 项目中，可以使用以下一些常用的虚拟表格插件： [1]umy-ui官方文档 [2]vxe-table官方文档 1.umy-uiumy-ui 适合和 element ui 组件库搭配使用 快速使用： 1npm install umy-ui 123456789101112131415161718192021222324252627282930313233343536373839404142<template> <div> <u-table ref="plTable" :data="tableData" :height="height" use-virtual showBody ...

在 Vue 项目开发中，有很多插件可以用来提高开发效率和功能实现，以下是一些常用的插件。 Vue 项目插件Vue-CLI：Vue 的官方命令行工具，用于快速搭建 Vue 项目的开发环境和构建打包等操作。 Vue-Router：一个 Vue 插件，用于实现路由功能。 Vuex：一个 Vue 插件，用于实现全局状态管理。 Axios：一个用于发送 HTTP 请求的 JavaScript 库。 Vue Test Utils：Vue 的官方测试工具库，用于编写和运行单元测试和端到端测试。 UI 组件库Element UI：一个基于 Vue 的 UI 组件库，提供丰富的 UI 组件和样式。 Ant Design Vue：一个基于 Vue 的 UI 组件库，提供丰富的 UI 组件和样式。 Bootstrap Vue：一个基于 Vue 的 UI 组件库，提供丰富的 UI 组件和样式。 Vuetify：另一个流行的基于 Vue.js 的 UI 组件库，提供了大量的现成的组件和布局，也可以根据自己的需要自定义主题。 富文本编辑器、代码编辑器CodeMirror：一个基于 JavaScript 的代码编 ...